Angular学习笔记

最新推荐文章于 2022-08-24 19:09:37 发布

Hello_yihao

最新推荐文章于 2022-08-24 19:09:37 发布

阅读量847

点赞数 3

分类专栏：学习笔记文章标签： angular 设计模式设计框架

本文链接：https://blog.csdn.net/Hello_yihao/article/details/78675869

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

Angular学习

框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的复用率，开发速度，并保证良好的浏览器的兼容性。

一、常用的设计原则和设计模式

1.设计原则
    1.YANGI（you aren't gonna need it）不写不需要的代码）
    2.KISS（keep it simple and stupid）代码越简单越好
    3.DRY(don't repeat yourself)封装代码
    4.高内聚低耦合
        内聚：一个模块内部的不同之间的关系
        耦合：不同模块/组件的关系
    5.SRP(single responsibility principle)单一责任原则
    6.OCP(open closed principle)开闭原则
        对扩展开放，对修改关闭
    7.LCP（least knownledge principle）最少知识法则
2、设计模式（23种 了解）
    总体来说设计模式分为三大类：
    1创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、
        建造者模式、原型模式。
    2结构型模式，共七种：适配器模式、装饰器模式、代理模式、
        外观模式、桥接模式、组合模式、享元模式。
    3行为型模式，共十一种：策略模式、模板方法模式、观察者模式、
        迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、
        访问者模式、中介者模式、解释器模式。
    经常用到的
        工厂方法模式，单例模式，适配器模式，解释器模式，观察者模式。
        MVC,MVVM,MVP -> 终极目标：模块化和复用
        MVC:Model(模型数据) view（视图） controller（控制器）
        遥控器——控制器：数据的增删改查操作
        电视——view：展示数据
        光缆——model：模型数据
        why MVC?
        解耦（降低代码的耦合度）、职责的切分
        工作原理：当对视图操作的时候，触发控制器中的一些方法，在这些方法中对于
            数据的增删改查的操作，借助一些绑定显示，更新到视图，

二、认识angular.js

1.什么是angularjs
    ng是一个由Google维护的开源的框架，实现单页面应用程序，适用于数据
    操作比较频繁的场景
2.为什么学习angularjs
    四大特征：
        1.采用了MVC的设计模式
        2.双向数据绑定
        3.依赖的注入
        4.模块化设计
    怎么使用：
    引入对应的js
        表达式
            语法：{{表达式}}
            作用：将表达式的结果输出到该表达式的元素的innerHtml中
            ngAapp指令：指定angular的作用范围，自动载入并启动ng应用
            ngInit指令；初始化一些变量（对象，数组）注意：不需要写
                var关键字
            语法：<ANY ng-init=""></ANY>
ng中的指令：是由AngularJS提供的，可以将指令用在HTML中作为扩展属性，
    扩展标签
扩展属性用法：<ANY ng-init=""></ANY>
扩展标签用法：<ngView></ngView>
注意事项：ngInit来初始化变量的时候，如果需要初始化多个变量，
只需要通过';'来隔开
    <p ng-init="name='zhanmsi';age='88'">{{name+' age is :'+age}}</p>
ngApp指令ng应用的作用范围，如果ngApp调用了多次，只有第一次是生效的。

1.ngBind指令：
    用法：<ANY ng-bind=""></ANY>
    双花括号 -> 表达式的结果输出到调用元素的innerHtml中。
    ngBind将表达式的结果输出到调用元素的innerHTML中，但是相对于{{}}，
    解决在ng启动较慢是，{{}}闪烁的问题
2.ngRepeat指令：
    为HTML添加循环功能
    语法1：<ANY ng-repeat="临时变量 in 集合"></ANY>
    语法2：<ANY ng-repeat="(下标变量名，值变量名) in 集合"></ANY>
    用途：对于指定的集合的每个成员，一次赋值给临时变量，将当前的
    元素循环输出一遍。
    $index/$first/$middle...
3.ngIf指令
    为HTML添加选择功能
    语法：<ANY ng-if="表达式"></ANY>
    用途：表达式的结果为true，当前元素添加到dom树上，否则删除。
4.ngShow/ngHide 
    语法：<ANY ng-show="">...</ANY>
    用途：根据表达式输出结果 true：显示    false：隐藏

    语法：<ANY ng-hide="">...</ANY>
    用途：根据表达式输出结果 true：隐藏    false：显示

5.ngSrc
    语法：<IMG  ng-src="{{url}}">...</IMG>
            <img ng-src="{{url}}" alt=""/>

三、AngularJS如何实现MVC

    M: model模型数据:js定义的变量
    V：view视图：增强过后的html，显示数据
    C: controller控制器，负责数据的操作，function来处理
    步骤：
        1.声明一个模块
            var app = Angular.module(‘模块名’，‘依赖列表’)；
        2.注册模块
            ng-app='模块的名字'
        3.声明控制器
            app(模块).controller('控制器的名字'，function(){

            });
        4.调用控制器
            ng-controller='控制器名字'
        5.操作：操作模型数据($scope是一个控制器的作用域对象，服务
                service，单例模式的对象)。
            $scope.name = "Bob";
        6.显示
            在控制器的范围内，通过ng指令或者双花括号语法来显示数据
            <p>{{name}}</p>
        事件：单击事件ngClick——<button ng-click = "执行语句"></button>
            ngDblclick
            ngMouseEnter...
        初始化模型数据：推荐使用控制器的$scope来实现，ngInit耦合度较高
        ngDisabled
        ngChecked
        ngStyle/ngClass
        使用track by $index 解决数组中重复的数据

四、自定义指令

语法：
    var app = angular.module('myModule',['ng']);
    app.directive(name,fn);
自定义指令；
    restrict:'EACM'
    E->element元素
    A——Attribute属性
    C——class
    M——comment注释（在指令中添加一个属性：replace：true）
新指令的命名：
    驼峰式
    前缀一般是公司或者项目的简写，后缀一般是指令的作用
    使用指令：tsHello -> ts-Hello
    在第二个参数 指定一个方法，在方法中返回一个对象的设置指令，。
    对象中 template,restrict,replace ...
    如果要参数的传递，需要在创建指令的时候，加上scope，同时
    指定对应的属性的名称（testName）在使用指令的时候，需要加上
    对应的属性（test-name=''）
    注意：自定义属性的指令和传入的参数名字不能重复，不可一样否则
        报错。

五、双向数据绑定

1.方向1的绑定（Model数据绑定到View）
    实现方法；{{name}}、常用指令（ngRepeat/ngBind/ngIf）
    相比dom操作：先去查找元素，再去设置元素，只需要把model数据绑定
    视图上，数据改，视图就会更新。
2.方向2的绑定（将View数据绑定到Model数据）
    实现方法：只有一种方式：ng-model
    <input type='text' ng-model="myText">
    $scope.$watch('模型变量名',function(){})
    多行文本输入框，下拉菜单，单选框

六、过滤器

过滤器是用在表达式中，实现对表达式结果的筛选、过滤、格式化达到更好
的表现效果。
语法：“|”
    {{表达式 | 过滤器:'参数名称'}}
    currency货币样式过滤器
    date日期
    uppercase大写
    lowercase小写
    orderBy升序（false）或者降序（true）
    limitTo限定显示的数量
    number限制显示小数点后几位

七、常用函数

forEach
uppercase/lowercase
toJson/fromJson
序列化：将一个对象转换为json格式的字符串
反序列化：将一个json格式的字符串转化为json格式的对象

八、服务

在ng中服务是一种单利对象，所谓单利，服务在每一个应用中只会被实例化
一次。
功能：为应用提供数据和对象。
两大类：1.内置的服务 2.自定义服务
1.内置服务的使用方法
如果在控制器中，使用ng中内置的服务，需要在控制器的回调函数中，
将对应的服务个注入进来，就可以使用服务了。
 app.controller('myCtrl', function ($scope,$location) {
    $scope.url = "";
    $scope.getUrl = function () {
        $scope.url = $location.absUrl();
    }
});
2. 控制器和作用范围
    $scope与$rootScope
    $scope是$rootScope的子作用域控制对象，$rootScope的id为1其他为
    2,3,4...
    不同控制器之间，所对应的作用域控制对象（$scope），之间是互相隔离的
    如果要共享数据，怎么办？
    借助$rootScope这个根作用域控制对象来实现
    如果父作用域对象想要调用子作用域对象的变量或者方法，ng提供了2个
    方法：
    1.$broadcast 将事件从父级传递给子级
    $scope.$broadcast(even)

    2.$emit将事件从子级传递给父级
    $scope.$emit(eventName,data);

    接收：
    $scope.$on(eventName,function(event,data){});

九、ng的内置服务

（ $http,$ interval,$timeout…）
1.双向数据绑定的工作原理

——ng框架自动添加一个监听（watch），和

scope. $scope.$ watch是一样
的，只有是数据发生了变化，视图就会更新。
如何知道数据是否发生了变化？
ng会周期性的运行一个函数来检查

scope的模型数据是否发生变化，称之为 $scope的模型数据是否发生变化，称之为$ idgest,

scope. $scope.$ digest()
什么时候才会调用

digest()?ng指令，很少直接手工调用 $digest()? ng指令，很少直接手工调用$ digest(),都是

scope. $scope.$ apply();——

rootScope(). $rootScope().$ digest()
setInterval是原生js的功能，本身就是一个循环，需要我们手工调用

scope. $scope.$ digest.
Ajax调用：

http服务向服务器发起Ajax请求，异步的获取服务器端返回的数据，声明为模型数据，在视图中展现出来。 $http服务向服务器发起Ajax请求，异步的获取服务器端返回的数据，声明为模型数据，在视图中展现出来。$ http.get(‘url’).success(function(data){…}).

$http.post('url',data).success(function(data){...});

如果要发起post请求，必须设置头信息，设置的方式：
$http.defaults.headers.post = {'Content-type':'application/x-www
-form-urlencoded'}

十、自定义服务

无论是哪种方式创建的服务，和ng内置的服务使用的方式都是一致：注入进来，直接拿来用

1、factory方法

app.factory(‘服务名称’,function(){
return {
}
})

2、service方法

app.service(‘服务名称’,function(){

})

3、constant、value
创建的服务返回是变量
app.constant(‘服务名称’,value) ==> 创建配置数据
app.value(‘服务名称’,value) ==》创建对象

常量服务如果注入到控制器之后，可以通过angular.extend方法进行重置

十一、依赖注入

1、文件压缩
使用YUICompresspor来完成文件的压缩，使用方式有2种：
①直接通过命令行

②借助webStorm来配置
File–》Settings–>tools–>file watchers–》点击右上角的+号–》选中YUICOMPRESSOR-JS，设置program为jar包。

文件压缩的作用：
①删除所有的注释
②删除空白、没有语义的字符
③简化变量名、函数名、形参名–》混淆
注意：普通压缩的js文件会将传入的参数变为‘a’’b’ 等字母而不是自己原来传入的参数，这个时候需要使用行内式依赖注入才可不会改变自己传入的参数。

2、依赖注入
每个angularjs的应用，注入器负责查找和创建依赖的服务，注入器的本质是服务的定位器，
快速定位到应用需要注入的各种服务，在定位服务的过程当中，需要提供注入的标记，根据标记的不同，划分为3大类：
①推断式依赖注入（猜测）
这种方法不需要关心注入服务的顺序，ng会自动处理，根据参数列表注入服务，如果参数一旦经过混淆或者压缩，有问题。

只能处理原始的代码

②标记式依赖注入
直接调用$inject属性来完成标记式的注入声明，该属性是一个字符型的数组，由于它是数组，所以有引入的先后顺序的。

③行内式依赖注入（内联）
在构建一个ng对象时，允许开发人员将一个字符型数组作为对象的参数，而不仅仅是一个函数；
在这个数组中，除最后一个元素必须是函数体外，其余都是注入的服务名称，而且顺序保持一致。

建议：使用第三种依赖注入的方式：行内式依赖注入。

3、注入器（$injector）

定位和查找服务的。

has –》查找服务是否存在
get –》得到服务的实例

十二、如何自定义模块并进行调用

自定义模块：Angular.module（）；
模块之间如何互相调用：angular.module('myApp02',['ng','myApp01']);
模块化好处：体现“高内聚低耦合”的设计原则，提高代码的复用率，降低
测试难度

模块分类：
1.ng官方提供的模块
    ng/ngAnimate/ngRoute./ngTouch...
2.用户自定义的模块
angular.module();
一个Angularjs的模块可以包含哪些组件
1.controller:维护模型数据
2.directive:用在视图中输出或绑定module数据
3.function：forEach/toJson/fromJson
4.filter:结果的筛选，过滤，格式化
5.service:提供变量或者方法的服务

单页面应用的工作原理
url：http://127.0.0.1/index.html#路由地址
2.浏览器请求index.html 解析路由地址
3.查找路由词典，#/start => tpl/strat.html
4.获取当前路由地址对应的是模板的真实地址start.html
5.发起ajax请求，获取目标模板的页面，将服务器返回的代码片段，插入到
    当前的DOM树，实现局部的刷新

使用ngRoute模块来实现SPA应用的基本步骤：
1.创建一个完整的HTML页面index.html，引入angular.js,angular-route.js
2.创建自定义的模块，指定依赖于ng\ngRoute
3.指定容器，盛放代码片段ngView
4.创建模板页面
5.配置路由词典
6.测试在地址栏中输入不同的路由地址的时候，能否将代码片段加载进来

模板页面之间执行跳转的3种方式
1.直接修改地址栏中的url
2.使用超链接<a href='#/路由地址'></a>
3.$location.path('/路由地址');

如果有多个代码片段，都需要通过js的方式来跳转，为每个代码片段去创建
控制器 去定义jump方法，这个是不合理的，可以借助父控制器定义方法，
然后让子控制器去调用。
配置代码片段的控制器的方式
1.ng-controller
2.配置路由词典设置
    $routeProvider.when('/myLogin',{
        templateUrl:'tpl/login.html',
        controller:'loginCtrl'
    })

使用ngRoute进行参数的传递
1.明确发送方和接收方
2.配置接收方的路由以及接收参数
    when('/myRegister：id',{
        templateUrl:'tpl/register.html'
    })
    如果接受id，借助ngRoute服务：$routeParams.id
3.发送参数
<a href='#/myStart/123'>

十三、动态引入页头页尾

ngInclude:
<ANY ng-include="'tpl/include/header.html'"></ANY>

十四、其他

ngAnimate支持js动画和css3动画
引入对应的js
指定自定义的模块，要依赖于ngAnimate
ngAnimate模块为ngView添加ng-leave和ng-leave-active、ng-enter和
ng-enter-active

十五、表单

在ng中，专门针对表单和表单中的空间，提供了一些属性，用于验证控件
值的状态。
$pristine 未输入过
$dirty 已输入过
$valid 验证通过
$invalid 验证未通过
$error 验证时的错误信息

注意：需要给form标签加上name属性在字母之间不可以使用‘-’

Hello_yihao

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular学习笔记

Angular学习框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的复用率，开发速度，并保证良好的浏览器的兼容性。一、常用的设计原则和设计模式1.设计原则 1.YANGI（you aren't gonna need it）不写不需要的代码） 2.KISS（keep it simple and stupid）代码越简单越好 3.DRY(don't repeat your
复制链接

扫一扫