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}})

你可能感兴趣的:(AngularJS)