即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

AngularJS知识点整理

微信 华清创客在线 12℃ 0评论

一、AngularJS


 一个构建动态Web应用程序的结构化框架。基于JavaScriptMVC框架。


1.1.1、主要作用:


1)简化复杂Web应用的开发难度。

a)MVC程序架构、解耦应用逻辑、数据模型和视图。

b)数据绑定。

c)依赖注入。

d)Ajax服务。

2)提高应用程序的可测试性、可维护性。


1.1.2、擅长领域:


1)单页面应用程序Single Page ApplicationSPA[QQ邮箱、百度地图、OAERP…]

2)以数据为中心的CRUD程序。(不擅长游戏、图形、频繁操作程序)

下载和使用:

官网:https://angularjs.org/(火了以后,被谷歌收购了)

中文网:http://www.angularjs.cn/

文档:http://docs.angularjs.cn/api

核心:angular.js(基于angular-1.5.5)

建模版:File -> new…-> Edit..

影响范围:ng-app(演示)作用域!


1.2、第一个AngularJS应用(列子)


1.3、模块:Module

创建方式:使用angular.module()方法,创建应用程序模块

angular.module(‘myApp’,[]):一个参数是模块名称;第二个参数是依赖参数。

使用模块的好处:

1)保持全局命名空间的清洁;

2)编写测试代码更容易;

3)易于在不同的应用程序之间复用代码。


1.4、控制器和作用域:


控制器:在angularjs中控制器是一个函数,用来向视图的作用域添加额外的功能。

用来设置作用域的初始状态并添加自定义行为。

控制器的声明:

app.controller(‘controllerName’,function($scope){})

控制器的使用:

在需要的地方(html某个标签上)添加能够ng-controller

使用控制器注意事项:

1)尽可能精简控制器,制作和$scope相关的操作。

2)不适合在控制器中执行DOM操作、格式化和数据操作。

控制器的嵌套:


二、数据绑定和表达式:


angularjs模板引擎的重要内容,也是视图View的必要组成部分,用来将模型动态转换可视DOM元素。


2.1.1、表达式的形式:


1)常量:{{‘hello,world’}},{{123}},{{true}},{{[1,2,3,’aaa’,’bbb’]}}

注意:使用常量的形式,不能使用对象{{{a:’aaa’}}}

2)变量(重点):{{num}},{{aaa}}


2.1.2、模型声明的几种形式:


1$scope.a=’hello,world’

2ng-init=””

3) ng-model

3) 函数(重点):{{fn()}}

4) 表达式:{{a+b}}

注意:条件语句不能再表达式中使用(如:if(){}else{};switch;while(){}


2.2、数据绑定


将模型Model和视图View关联起来,双方的改变都能影响对方。

数据绑定类型:

1)单向数据绑定:模型能影响视图,反之这不行。

a)简写形式:{{‘abc’}}

b)指令形式:

 ng-bind:是简写形式的代替,最佳实践是在首页使用ng-bind,其他页面使用简写形式。

 ng-checked:绑定radiocheckbox这种类型表单元素选中状态。

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

 ng-hide/ng-show:是否显示、隐藏HTML元素。

 ng-if:也能控制元素隐藏和显示,但是时删除和添加DOM而非隐藏。

 ng-readonly=”xx”:是否只读。

 ng-select:是否选择,主要用于select下拉列表。

 ng-src:用于设置img元素图片URL

 ng-value:设置输入框的值。

 ng-style:动态设置样式。

2) 双向数据绑定:模型影响视图,视图影响模型。可以双向影响。

 ng-model

三、过滤器与指令:


1、过滤器:

按照指定的方案进行处理后在输出的函数。

1)货币过滤器currency{{ currency_expression | currency : symbol}}

2) 格式化date到字符串,基于format的要求。 {{date_expression | date : format}}

3)number: {{ number_expression | number : fractionSize}}

4limitTo:创建只包含指定数量元素的新数组或字符串。

元素可从源数组或字符串的起点或终点开始取,

通过limit来指定值和符号(正或负)

5)Filter:从array中选择一个条目子集,并作为一个新数组返回。

{{filter_expression | filter : expression : comparator}}

注意: ng-repeat:用来经数据集合,按照指令的形式渲染出来。

6orderBy

通过expression来排序指定的array  字符串按字母顺序排序,数字按大小排序。

注意:如果你发现数字没被正确排序,请确认它们保存的是数字而不是字符串。

{{orderBy_expression | orderBy : expression : reverse}}

使用js调用过滤器。

$filter(‘orderBy’)(array,expression, reverse)

注意事项:

1)需要依赖注入$filter

2)排序执行以后并不改变原数组,而是返回排序后的新数组。


2.自定义过滤器:


过滤器属于服务(service)的一种,类似controller,可以自定义实现所需的过滤功能,称为自定义过滤器。

语法:angular.module(‘myFilter’,[]).filter(‘capitalize’, function () {}})

未完待续~

戳阅读原文:现在报名就送500万红包,来华清助你成就高薪梦!

【一周热文推荐

1.盘点理科生易就业的十大专业,计算机稳居第一!

2.计算机应届生应该选择公司还是行业?

3.给学习编程的新手四点建议

4.应届生面试的那点事儿

5.面试感悟:3 年工作经验程序员应有的技能

6.采访嵌入式驱动工程师:面试是有技巧的 

关注华清创客在线公众号,

获取更多智能硬件开发信息。

微信ID:maker-edu


长按二维码关注我

转载请注明:CodingBlog » AngularJS知识点整理

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情