Angular学习笔记

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关键字
            语法:
ng中的指令:是由AngularJS提供的,可以将指令用在HTML中作为扩展属性,
    扩展标签
扩展属性用法:
扩展标签用法:
注意事项:ngInit来初始化变量的时候,如果需要初始化多个变量,
只需要通过';'来隔开
    

{{name+' age is :'+age}}

ngApp指令ng应用的作用范围,如果ngApp调用了多次,只有第一次是生效的。 1.ngBind指令: 用法: 双花括号 -> 表达式的结果输出到调用元素的innerHtml中。 ngBind将表达式的结果输出到调用元素的innerHTML中,但是相对于{{}}, 解决在ng启动较慢是,{{}}闪烁的问题 2.ngRepeat指令: 为HTML添加循环功能 语法1: 语法2: 用途:对于指定的集合的每个成员,一次赋值给临时变量,将当前的 元素循环输出一遍。 $index/$first/$middle... 3.ngIf指令 为HTML添加选择功能 语法: 用途:表达式的结果为true,当前元素添加到dom树上,否则删除。 4.ngShow/ngHide 语法:... 用途:根据表达式输出结果 true:显示 false:隐藏 语法:... 用途:根据表达式输出结果 true:隐藏 false:显示 5.ngSrc 语法:...

三、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指令或者双花括号语法来显示数据
            

{{name}}

事件:单击事件ngClick—— 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
    
    $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.双向数据绑定的工作原理

{{num}}

——ng框架自动添加一个监听(watch),和 scope. watch是一样
的,只有是数据发生了变化,视图就会更新。
如何知道数据是否发生了变化?
ng会周期性的运行一个函数来检查 scope idgest, scope. digest()
什么时候才会调用 digest()?ng digest(),都是 scope. apply();—— rootScope(). digest()
setInterval是原生js的功能,本身就是一个循环,需要我们手工调用 scope. digest.
Ajax调用: httpAjax 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.使用超链接
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.发送参数
    

十三、动态引入页头页尾

ngInclude:

十四、其他

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属性 在字母之间不可以使用‘-’

你可能感兴趣的:(学习笔记,angular,设计模式,设计,框架)