AngularJS

一、简介

1.AngularJS是一个基于MVC处理模式，实现了数据双向绑定的JavaScript框架。

2.ng-app:AngularJS入口，从标签上带有ng-app的地方开始解析。一般放在根元素附近，或标签内。

3.ng-model：把元素值(专门用于表单)绑定到应用程序。

4.ng-init:初始化AngularJS应用程序变量。

二、表达式

AngularJS 表达式写在双大括号内：{{ }}。

三、应用

(1)AngularJS 模块（Module） 定义了 AngularJS 应用。

eg：varmyApp= angular.module("myApp",[]);

(2)AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

eg:myApp.controller("myCon",function ($scope) {

});

(3)ng-app指令定义了应用, ng-controller 定义了控制器。

eg:

(4)$scope.$apply(function(){

//重绘数据

})

(5)$scope.$watch(“检测变量”,function(newV,oldV){},参数3)

参数3：默认为false，当值为true时，表示检测的是数组或对象里的每一个元素。

四、内置指令

(1)节点指令

ng-style：允许在HTML元素上条件化设置CSS样式。

ng-class：允许动态设置HTML元素的CSS类，通过绑定到一个包含要添加的所有类的表达式。

ng-class-odd和ng-class-even:工作方法类似ng-class, 只是它们只能配合ng-repeat进行工作来改变奇数（偶数）行的效果。指令只在ng-repeat的域内有效。

ng-if:如果赋给ng-if的表达式计算结果为假，元素会从DOM移除，其它情况会复制一份元素插入到DOM中。

注意：ng-if不同于ng-show和ng-hide，ng-if是在DOM中完全移除或重建元素，而不是通过displaycss 属性改变可见。

ng-switch:元素内使用ng-switch而非ng-switch-when或ng-switch-default指令的地方会保留在模板中的位置。when属性用于告诉ngSwitch当表达式计算时显示哪个元素。如果匹配的表达式没在when属性中找到，会显示default属性对应的元素。

ng-src:  eg:

ng-href:  eg:超级链接

ng-show:根据ngShow属性上表达式来显示或隐藏给定的HTML元素。页面里看不见了,节点还在,加了样式 display:none。

当ng-show表达式计算结果为假时，ng-hide CSS 类会被加到元素的class属性中，从而让它变为隐藏。当为真时，ng-hide CSS 类会从元素移除，这样元素就不会被隐藏。

(2)渲染指令

ng-bind:该属性告诉Angular使用所给表达式的值替换指定HTML元素的文本内容，并且在表达式的值改变时更新文本内容。

ng-repeat:为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。

注意：angularjs按照值来遍历，如果值都相等就无法遍历解决方案：在ng-repeat里加track by $index，通过索引号来遍历(ng-repeat="track by $index")

ng-include:可以引入外部html文件。

第一种写法：

第二种写法：

第三种写法：

(3)事件指令

ng-click：允许为元素的点击时指定一个自定义动作。

ng-dbclick：为双击(dblclick)事件指定一个自定义行为。

ng-change：当用户改变输入时计算给出的表达式。表达式会被立即计算，不像 JavaScript的onchange事件只会在最后一次改变时触发(通常，当用户离开表单元素或按回车键时)。当值的变化来自于模型时，不会对表达式进行计算。

ng-cloak:用来防止应用程序加载时Angular HTML模板的原始形式（未编译的）被浏览器显示为简要形式。使用这个指令，避免由HTML模板显示造成不舒服的闪烁效果。

五、过滤

currency：格式化数字为货币形式。

eg:{{123456|number}}  =====>123,456

date：格式化date到字符串

{{myDate | date}}y:{{myDate | date : "y"}}====>一位数字的年份

(eg：1==>1,199==>199)yy:{{myDate | date : "yy"}}====>两位数字的年份

(eg：2001==>01,2010==>10)yyyy:{{myDate | date : "yyyy"}}===>四位数字的年份

(eg：1==>0001,2010==>2010)M:{{myDate | date : "M"}}===>月份(1-12)MM:{{myDate | date : "MM"}}====>月份(01-12)

MMM:{{myDate | date : "MMM"}}====>月份(Jan-Dec)MMMM:{{myDate | date : "MMMM"}}

===>月份(January-December)d:{{myDate | date : "d"}}===>日(1-31)dd:{{myDate | date : "dd"}}===>日(01-31)EEE:{{myDate | date : "EEE"}}===>星期(Sun-Sat)EEEE:{{myDate | date : "EEEE"}}

===>星期(Sunday-Satuary)h:{{myDate | date : "h"}}===>am/pm的形式(1-12)hh:{{myDate | date : "hh"}}===>am/pm的形式(01-12)

H:{{myDate | date : "H"}} ====>小时(0-23)

HH:{{myDate | date : "H"}} ====>小时(00-23)m:{{myDate | date : "m"}}====>分钟(0-59)mm:{{myDate | date : "mm"}}===>分钟(00-59)s：{{myDate | date : "s"}}===>秒(0-59)ss：{{myDate | date : "ss"}}===>秒(00-59)sss：{{myDate | date : "sss"}}===>毫秒(000-999)

filter:过滤是通过值来过滤的，从array中选择一个条目子集，并作为一个新数组返回。

$filter("过滤的类型")(转换的参数,规则)

eg:$filter("number")(123456)

eg:$filter("filter")($scope.books,"100")

json:允许转换一个JavaScript对象到JSON字符串。

limitTo:(格式limitTo:数字)数字为正，从开始位置截取；数字为负，从终点处截取，即倒着截取。

lowercase(uppercase):转换字符串为小写(大写)形式。

number:格式化数字，如果输入不是一个数字，返回空字符串。

{{123456|number}}显示为123,456；

{{123456|number：2}}保留几位小数。

orderBy:字符串按字母顺序排序，数字按大小排序。

六、自定义指令

自定义指令，实现方式有两种，第一种就是在module方法的第三个参数中实现。

angular.module("myApp",[],function ($compileProvider) {$compileProvider.directive("myDirect",function () {return{restrict:"ECMA",template:"

这是自定义指令",replace:true//true表示替换在页面的标签名称，只显示template中的内容}})})  .controller("myCon",function ($scope) {})

第二种写法，基于directive的指令：

angular.module("myApp",[]).controller("myCon",function ($scope) {}).directive("myDirect",function () {return {restrict:"AE",//           template:`

第二个自定义指令`,templateUrl:"demo.html",replace:true}})