一、简介
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:"
第二种写法,基于directive的指令:
angular.module("myApp",[]).controller("myCon",function ($scope) {}).directive("myDirect",function () {return {restrict:"AE",// template:`