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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容