AngularJS笔记(指令,过滤器,服务)

若有不妥,请多指教

AngularJS(也叫安哥拉)
是一款由Google公司开发维护的前端MVC框架(诸多类库的集合),对开发的流程和模式做了约束,更注重实际的业务逻辑
AngularJS有着诸多特性,最为核心的是:模块化、双向数据绑定、语义化标签、依赖注入等
与之类似的框架还有BackBone、KnockoutJS、Vue、React等
https://code.angularjs.org/
AngularJS下载地址

目录:
1.指令
2.双向数据绑定
3.过滤器
4.依赖注入
5.服务

稍微写一点MVC模式:

MVC

MVC是一种开发模式,由模型(Model),视图(View),控制器(Controller)三部分构成:
模型(Model) 一般用来处理数据,包括操作数据库
视图(View) 用来展示数据,比如通过HTML展示
控制器(Controller) 用做连接模型和视图的桥梁
采用这种开发模式为合理组织代码提供了方便,降低了代码间的耦合度,功能结构清晰可见

先看个基础的使用:





    
    
        {{name}}对我深情地唱{{song}}
        
            
            第{{num+1}}句：{{lyric}}

打印结果

1.指令:

所谓指令就是AngularJS自定义的HTML属性或标签,这些指令都是以ng-做为前缀的
在上面这个例子中我们看到li标签后面有一种叫做"指令"的东西,
可以不用写JS代码,直接完成循环的功能,使HTML更像一种语言了

部分常用指令:
1.ng-binding = "属性名":绑定属性  -> {{属性名}}
2.ng-show = "true/false" -> 显示内容
3.ng-hide = "true/false" -> 隐藏内容
4.ng-if = "true/false" -> 控制元素是否存在
5.ng-src / href -> 增强图片路径/地址
6.ng-class = "{类名:true/false}"
7.ng-include = "模板路径" -> 引入模板
8.ng-disable = "true/false" -> 表单禁用
9.ng-readOnly = "true/false" -> 只读标签
10.ng-checkbox = "true/false" -> 选中复选框
11.ng-selected = "true/false" -> 默认选中

其中在做数据绑定的时候,我们使用的是{{}},其实是ng-bind的简写
这个符号把controller中的属性传给了view,完成了数据展示,
但是用{{}}绑定数据展示时会有"闪烁"现象
解决办法:




    
    {{name}}{{age}}

也可以自定义指令:

2.双向数据绑定

MVC之间的交互中,V向M传递数据,M向V传递数据
也就是双向数据绑定



    
    
    
    {{msg}}

3.过滤器

过滤器是用来格式化展示数据的,
在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数
本质是一个加工函数

1、currency将数值格式化为货币格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化，可控制小位位数
9、orderBy对数组进行排序，第2个参数可控制方向

看一个简单打印当前日期的例子:


    {{time|date:'yyyy/MM/dd hh:mm:ss'}}

也可以自定义过滤器:



    
    {{info|test}}{{name}}

4.依赖注入

AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用
具体为:
我们通过controller这个函数的第二个参数告诉AngularJS我们需要哪个模块实现功能(所谓"需要"就是一种"依赖"),
然后AngularJS查找该模块交给我们使用,这个过程称为"注入"

4.1行内式注入:

 XXX.controller('Controller1', ['$scope', function ($scope) {
       
    }]);

4.2推断式(猜测式)注入:

 XXX.controller('Controller1',function ($scope) {
       
    });

第二种就是比第一种省略了数组,省略了模块声明,让AngularJS自己根据函数的参数寻找,所以一般不用第二种写法.

5.服务

其实就是AngularJS封装好的对象或者函数,可以帮我们很方便地做一些事情,为我们"服务"
服务使用方式与模块的使用方式相同

5.1 例如$location: AngularJS中一个提供获取地址相关信息的服务

5.2 例如$http: AngularJS中AJAX的使用

5.3 服务也可以自定义


    
        {{now}}

AngularJS笔记(指令,过滤器,服务)

{{name}}对我深情地唱{{song}}