![](https://img-blog.csdnimg.cn/direct/2766b94886a74f26a515ad151b2a1b6e.png)
![](https://img-blog.csdnimg.cn/direct/3edc414b38124a45a236ad61cc459670.png)
jquery和AngularJS 数据绑定和获取对比:
jquery,要操作DOM:
![](https://img-blog.csdnimg.cn/direct/d6cbdd0892624e6d80e252d9140f10fe.png)
angularJS,无需操作DOM就可以进行动态数据变化:
![](https://img-blog.csdnimg.cn/direct/990a618eeb6d4809a2b31bd62a5d02df.png)
要使用Angularjs就需要在html页面先引入:
![](https://img-blog.csdnimg.cn/direct/05fe60470fdd42ee81c0a72307e8024d.png)
ng-app:
html页面中,需要给标签绑定ng-app指令标记当前页面,注意ng-app通常绑定给body标签。
如果ng-app="" ,可以默认写为ng-app
![](https://img-blog.csdnimg.cn/direct/4d43f13cdae14e1191ee0f08fa186e21.png)
只有给html绑定了ng-app,才会产生$rootScope。
![](https://img-blog.csdnimg.cn/direct/641d97e327c448629c2bf75d8be75bcb.png)
如果不给页面body绑定ng-app指令,那么在view视图中{{}}就无法生效,页面直接显示为{{}}字符。
ng-model:
语句和表达式的区别:
![](https://img-blog.csdnimg.cn/direct/ae411e799f194c08a8655d2582cc0567.png)
ng-init:
用来初始化当前作用域变量
ng-init是单向数据绑定,由页面view->模型model;
ng-model是双向数据绑定,页面view->模型model ,也可以从模型model->页面view
![](https://img-blog.csdnimg.cn/direct/1cacbedd8cff40218fd3794826860c10.png)
双向数据绑定:
![](https://img-blog.csdnimg.cn/direct/21ac70a24eb542eebc24142581272391.png)
![](https://img-blog.csdnimg.cn/direct/ee880cf257b2495882e35c5c3db93d85.png)
作用域对象和控制器对象:
![](https://img-blog.csdnimg.cn/direct/d62ee54986e846bd83334290a795b0c3.png)
给html绑定ng-app指令,会生成最顶层的$rootScope作用域对象。
![](https://img-blog.csdnimg.cn/direct/4f4087868cfa4b1a91cc29739ab85e8d.png)
给单独的标签添加ng-controller绑定一个函数,ng-controller指令会自动new此函数。这个函数会接收一个形参必须是scope,在这个函数中就可以对ng-controller定义区域内的变量进行变量初始化和创建方法,产生一个单独的作用域空间。注意必须使用scope初始化变量和创建方法。
![](https://img-blog.csdnimg.cn/direct/89a8390731e54c5bb0ffc0bdd611b4fd.png)
![](https://img-blog.csdnimg.cn/direct/37c5511b46da4fa685867e60058b2356.png)
![](https://img-blog.csdnimg.cn/direct/f2a2b28ecb4f41e4a354d393e830f790.png)
![](https://img-blog.csdnimg.cn/direct/34a911654b634ab093e5f4f41cdc2bf1.png)
所以控制器函数的形参一定是$scope。
总结:
ng-app会创建一个根作用域对象$rootScope,通过ng-init初始化全局变量。
ng-controller会创建控制器对象例如MyController,生成一个单独的作用域空间scope,scope是在$rootScope下的,在ng-controller控制的view视图内,可以直接调用ng-init初始化的变量。
例如:在$rootScope全局作用域下初始化age变量:
![](https://img-blog.csdnimg.cn/direct/4618866b88204df5a7fee62ecd66c12a.png)
在控制器对象MyController区域view视图内直接调用age
![](https://img-blog.csdnimg.cn/direct/b3646a52aa2642ec9b42f4b525cc9130.png)
![](https://img-blog.csdnimg.cn/direct/e0091ee788b14e40b2c437675af05b3a.png)
ng-app和ng-controller也可以写在一个标签上
依赖注入:
依赖注入分为声明式依赖注入和命令式依赖注入,首先理解一下声明式和命令式的区别:
![](https://img-blog.csdnimg.cn/direct/acd4c92e94ef4c0cb1ae4d80dc32c317.png)
![](https://img-blog.csdnimg.cn/direct/dc464ca5550649e1bbb491b1be4467f8.png)
声明式依赖注入:
event就是依赖,同理控制器中的$scope也是依赖;
这种以形参的形式被注入使用的方式就是声明式依赖注入
![](https://img-blog.csdnimg.cn/direct/4490710905a74326ad394d3400cf5d8c.png)
命令式依赖注入:
AngularJS的模块对象
在angular中,像下面这种生成MyController生成控制器对象这种方式不多,更多的是使用Angular的模块对象angular.module.controller()更方便。
![](https://img-blog.csdnimg.cn/direct/30c1432a3d034cc0ba959874cf43bb4e.png)
angular.module模块可在全局位置创建、注册、获取Angular模块。所有模块(angular核心或第三方)都必须使用这个机制注册才能在应用中生效。
一个模块式服务、指令、控制器、过滤器和配置信息的集合。angular.module用于配置injector。
首先想使用angular,就需要先引入:
![](https://img-blog.csdnimg.cn/direct/1c562872872148a19c0dc1dd5ed7d0e9.png)
书写视图:
![](https://img-blog.csdnimg.cn/direct/7bc799c53b764aeb9fcf266dcee1c0b8.png)
![](https://img-blog.csdnimg.cn/direct/02dc1d258d0e47bb83c867eb446b0365.png)
JS:
视图中的ng-app绑定的名称就是模块的名字
![](https://img-blog.csdnimg.cn/direct/880cc7aa90b94004abbf1ca3eeb5ec1e.png)
![](https://img-blog.csdnimg.cn/direct/986252f9fa564d9c94285cf023ca6c57.png)
生成作用域对象代码优化:
链式调用:
![](https://img-blog.csdnimg.cn/direct/0725912d62694e7aa03ddb3d029a4de7.png)
再次优化:
![](https://img-blog.csdnimg.cn/direct/c0870020b9cb4776acf048d45f07af6c.png)
注意:
![](https://img-blog.csdnimg.cn/direct/e25fd9fe63394aa581620c71f61eecb3.png)
![](https://img-blog.csdnimg.cn/direct/903f525d91ef4c6a8d5b3b6be14df837.png)
表达式:
![](https://img-blog.csdnimg.cn/direct/161ca6a4ebb34626a47c0877d5ff8e81.png)
![](https://img-blog.csdnimg.cn/direct/0affc03989124db19af3df6fa3de13f8.png)
![](https://img-blog.csdnimg.cn/direct/ffdd83ea53684541a75afe90a3ab9bc7.png)
常用指令:
![](https://img-blog.csdnimg.cn/direct/29a982955985431db8663e8ea26c9022.png)
![](https://img-blog.csdnimg.cn/direct/43d9d3c56cd84e44b0b86af6c203f981.png)
ng-repeat:
![](https://img-blog.csdnimg.cn/direct/669f926656da496eaa375a2e5aaab4e3.png)
ng-repeat的$index输出数组的下标;
ng-repeat的$first输出当前元素是否是第一项,输出布尔值;
ng-repeat的$last输出当前元素是否是最后一项,输出布尔值;
ng-repeat的$middle输出当前元素是否属于中间项,输出布尔值;
ng-repeat的$odd输出当前元素下标是否属于奇数,输出布尔值;
ng-repeat的$even输出当前元素下标是否属于偶数,输出布尔值;
![](https://img-blog.csdnimg.cn/direct/ea6a2ee6b13d45988d9de8fb536a0619.png)
遍历数组显示数据,数组有几个元素就会产生几个新的作用域,见下图验证:
![](https://img-blog.csdnimg.cn/direct/259a9b3050a9423d8c3fbf4fc1b45f4a.png)
ng-bind:
![](https://img-blog.csdnimg.cn/direct/164505b197bd46209ee2441dbdd3de95.png)
ng-show、ng-hide:
![](https://img-blog.csdnimg.cn/direct/4450f3b830ee4ce9a4f2408d28168138.png)
![](https://img-blog.csdnimg.cn/direct/38e8f693c5c24f37bcfa3170e546891a.png)
ng-style:
![](https://img-blog.csdnimg.cn/direct/3d13b73a68d44033a8befafcd2e2a5be.png)
ng-mouseenter、ng-mouseleave:
![](https://img-blog.csdnimg.cn/direct/de59e65a08914f1696818c9c270de5bf.png)
![](https://img-blog.csdnimg.cn/direct/954772cf72e846678f1ff35bca03d15e.png)
ng-class:
需求:循环ul标签,各行变色
![](https://img-blog.csdnimg.cn/direct/48e4eaeb6c7f4c8eb68e231fe235f630.png)
![](https://img-blog.csdnimg.cn/direct/b1535d3050f6495e809c987e1b73d163.png)
![](https://img-blog.csdnimg.cn/direct/cde0d78bee0d4840a3e6619d32c2dc9c.png)
![](https://img-blog.csdnimg.cn/direct/c3a549c7ddd94cf1a90625ebb340770f.png)
![](https://img-blog.csdnimg.cn/direct/1fe334457f2249efb8b61ff4920b595b.png)
AngularJS内置服务 $http:
![](https://img-blog.csdnimg.cn/direct/731a707216e44a5886e65e832852cc48.png)
![](https://img-blog.csdnimg.cn/direct/f6731227fb104e6280eb65462b3fa2d3.png)
遍历动态生成表格:
![](https://img-blog.csdnimg.cn/direct/065483575ca94836a48f969e9ded0ce2.png)
![](https://img-blog.csdnimg.cn/direct/5d466d43b57a4008b97d854bd962324e.png)
angular的过滤器filter
参考:AngularJS 过滤器 (详解)_angularjs过滤器-CSDN博客
过滤器作用:将数据转换成自己想要的形式后输出,格式化数据;
过滤器写法:待处理数据 | 过滤器名称:参数
angular内置过滤器:
![](https://img-blog.csdnimg.cn/direct/774c724120f74da9b1568ad4bfe8cf54.png)
currency :"货币"
例如:
date : "日期格式字符串"
![](https://img-blog.csdnimg.cn/direct/cbf56d7c1bb54c8ca5b31e65ba47363e.png)
例如:
![](https://img-blog.csdnimg.cn/direct/8420b26e901a4bc882a1a5357969106a.png)
![](https://img-blog.csdnimg.cn/direct/fa7b091b68714414966cd1c105338478.png)
tip: 过滤器可以链式调用
![](https://img-blog.csdnimg.cn/direct/5c919be583d041e3947961c0804508d7.png)
uppercase
将字符串text大写输出
filter
filter第一个参数可以是下列三种类型,第二个参数为true的时候顺序反转。
![](https://img-blog.csdnimg.cn/direct/36fee558067849f9abec9036816217a3.png)
![](https://img-blog.csdnimg.cn/direct/2113376f83a6424da21a2a4196831f04.png)
![](https://img-blog.csdnimg.cn/direct/95b6cbb9f10f40018dabc7bc6f9a81d7.png)
等等......
详细可以看上面的参考链接,博主很详细。
自定义过滤器:
如果内置的过滤器无法满足自己的需求,就可以自定义过滤器。
需求:将手机号码中间4位用型号表示:
![](https://img-blog.csdnimg.cn/direct/629d7e397fb646e78db19b9028bb7b86.png)
js:
自定义过滤器写法:
angular.moudule('ng-app绑定的名称',[]).filter("过滤器名称",回调(return回调))
![](https://img-blog.csdnimg.cn/direct/9286359ea759428bb4040ee75de05376.png)
view:
![](https://img-blog.csdnimg.cn/direct/f032be318364402b99ef8874c01d8970.png)
![](https://img-blog.csdnimg.cn/direct/7cbd5032f975440fbae4db18da3c6e89.png)
![](https://img-blog.csdnimg.cn/direct/bf88ba08788b45eda1084df1ff10c9dd.png)
优化:
无论号码多长,只保留前三位和后四位,中间使用*隐藏
![](https://img-blog.csdnimg.cn/direct/7b1d00427ec145609d0019a08b242736.png)
angularJS的指令:
上面的地址涵盖了angularJS的所有内置指令
ng-src:
![](https://img-blog.csdnimg.cn/direct/ee2bbc550da94fa5af0859ecacdbe251.png)
如果直接给src绑定{{a}},后台会报错
如果使用ng-src就不会报错 。<img ng-src="{{a}}"
ng-cloak:
没加载之前先隐藏,在网速慢的时候,变量还未渲染时,不会显示{{}}空的字符串,而是这个div直接不显示
![](https://img-blog.csdnimg.cn/direct/c4c9497133ed44b08b3dd1afbfa337be.png)
ng-href:
为防止页面还没有加载完毕时,客户五点了a标签却没有任何响应的问题
![](https://img-blog.csdnimg.cn/direct/898c26e3bedc422dad7a5c7b8b36dbb1.png)
![](https://img-blog.csdnimg.cn/direct/412fdcad493e49dc9e1375cf0fb4bb6c.png)
![](https://img-blog.csdnimg.cn/direct/a4cb5cab4b714fc9ae0cf7513b77cbe0.png)
ng-switch
![](https://img-blog.csdnimg.cn/direct/626a82033b944de881c124b01f31e3ea.png)
ng-bind-html 和 ng-bind的区别:
![](https://img-blog.csdnimg.cn/direct/2581a4b2263d43d0a980042c963a4a73.png)
ng-bind 和 ng-bind-template:
![](https://img-blog.csdnimg.cn/direct/f53ace37e2b34caca322442505534726.png)
使用ng-bind-template就可以输出
![](https://img-blog.csdnimg.cn/direct/746001ced58743fba559c3fd71e1b999.png)
![](https://img-blog.csdnimg.cn/direct/0fea5333098a4b5587df231be1c7a55b.png)
ng-include:
![](https://img-blog.csdnimg.cn/direct/c441175e7bb44c10871ccbea6f4dc71d.png)
ng-options
先来看使用普通方法ng-repeat渲染下拉:
![](https://img-blog.csdnimg.cn/direct/541761123e234fe4ae24a9d1b8365397.png)
再通过使用ng-options渲染下拉:
ng-options替你组织options
1、必须有ng-model
2、值 as 文字 for item in arr
![](https://img-blog.csdnimg.cn/direct/5abbdbc2c4a5481fb77ddb21109e67ab.png)
ng-options使用升级:
select下拉分组,group by xxx
![](https://img-blog.csdnimg.cn/direct/839e26acf35e481ab1312b6669998e56.png)
![](https://img-blog.csdnimg.cn/direct/481967aca3714850add3c5fe301c27f4.png)