AngularJS基础知识

AngularJS 基础知识1. AngularJS 是什么？
Angular
官网：https:///
，
API: http://docs.angularjs-org/api
AngularJS 是一个MV*( Model-View-Whatever, 不管是MVC 或者MWM，统称为MDV (Model Drive View ))的
JavaScript 框架，是Google 推出的SPA
(sin gle-p age-a pp licati on, 单页面应用)，即协助搭建单页面工程的开源前端框架。

通过
AngularJS可以使得开发与测试变得更容易。

AngularJS试图成为Web应用中的一种端对端的解决方案。

它由2009年发布第一个
版本，由Google进行维护。

AngularJS的核心思想就是将视图与业务逻辑解耦，而实现方法则是通过数据和视图的
双向数据绑定实现。

解耦的代码更有利于进行测试。

A咿M自硼进
双向更新
『％
图1.双向数据绑定实现解耦
An gularJS依然遵循MVC模式开发，鼓励视图（View ）、数据（Model ）、逻辑（Con troller）组件间的松耦合。

图2.控制器通过依赖注入各项所需要的服务，实现解耦
AngularJS将测试与应用程序编写看得同等重要，在编写模块的同时即可编写测试代码。

而且由于实现了各组件的松耦合，因此使得这种测试更容易实现。

AngularJS在编写一个单页面应用时的通常顺序如下: 服务A 服务B 服务C 服务D
L耳
L
H'TMIL
制器.利用眼务务，例如数抠过第三步:漏写服
(1)
编写HTML 代码，如下:
■: body
=ThoneListCtri'>
cinput
-"querV>
ng-mMel- 'sortType'^
^option value =
按名字排痒* on>
^option value =
按毎縮排序</opti on>
<ul> <li
如a)所示,
ng-app:它是 二 Ip hone irt phones
I fnter:quer |
orderB/:sortTy|>e* > ([phone, snippet}} > <p>((phone age)}</p> <P> <imQ </p>
L </ui> ^L</body >
-'((phorte.irTisrc)}7> a)
AngularJS 的程序入口，表示 body 标签内的所有元素都在该 app 的范围内;
图3. AngularJS 构建单页面应用时的顺序
第一步是根据设计好的页面布局，进行 HTML 代码的编写，在编写的过程中，为相应
的控件和元素设置与 AngularJS 对应的指令(如 ng-app, ng-controller, ng-click, ng-model 等);
第二步是在控制器 Controller 中根据业务逻辑，编写代码改变模型的值，由于数据和视 图双向绑定，因此视图中的值会相应改变;
第三步是编写控制器中所需要依赖的各项服务的代码。

这些服务可能是 已经自带的服务(如$htt P, $timeout, $q, $filter 等)，也可以是根据业务实际需要编写的自 定义service 。

这些服务最终通过注入的方式，传递给
Controller 进行使用。

如下是一个简单的例子示例以上步骤:
AngularJS 中
ng-controller:表示在当前元素范围内的元素都在controller的控制范围内;
ng-model:指定当前元素（例子中是select元素）与数据模型（$scope）中的sortType进行了双
向数据绑定，如果数据模型中没有定义这个属性，会自动新建一个；
ng-repeat:循环$scope中的数据模型中的属性（例子中是phones），这样会将phones数组
内的所有元素都列在视图中；
{{xxx}}:花括号表示读取某一属性值，这里是读取$scope.phone.snippet/age/imsrc 这三个属性；
filter, orderBy:由”符号后跟的是过滤器filter，如oderBy是排序过滤器，过滤器既可以是
内置的，也可以使根据业务自定义的。

=[*$scope\ *
function($5cope, $http> {
-getC../json/test-1-j son)
.succGss(functionidata) {
1)：
,sortType - age';
b)
如b）所示是控制器的声明方法: 控制器的声明方法是:
var con troller = [,service1?, ,service2?, function( servicel, service2)];
Filter类似Unix里面的”管道概念。

指令-directive
指令是AngularJS 中用来扩展浏览器能力的技术之一。

在
DOM 编译期间，和HTML
关联着的指令会被检测到， 并且被执行。

这使得指令可以为 DOM 指定行为，或者改变DOM 的结构。

controller 是控制器的名称（如 PhoneListCtrl ）， 务，这两个服务以声明的方式注入到了控制器中。

装了 ajax 的服务）。

这两个服务都是
angularJS
servicel 和service2是该控制器所依赖的服
例子中将$scope （数据模型服务）,$http （封 的内置服务，当然也可以自定义服务再注入
controller 中。

$scope.phones = data ，是当前台向后台发起请求 test-1.json 后， data 赋值给
$scope 的phones 属性，这样前台的 <li ng- repeat= ” 历phones 数组，并全部列表显示出来。

当成功后将后台返回的
phone in phones 就会遍
$sco pe.sortT ype = ,age?，是为过滤器赋值，这样最后排列时会按年龄 age 进行。

2. AngularJS 的特点
模块化-module
在AngularJS 中，模块负责组织、启动和实例化应用。

a ng Ula i: ITIIO <{U Ie(" m o dy t P ria me' (x 1,x2})//1 f
+x 1. 轡宁 .d' 'directiveName" , function^ J 」..f A functionC {retiii n 123 创浬冃》弓 T 'mb fMctim (川逹u 疔器 」jjMw 训逹亠蚤…討盘feN 庐齐
-.•「化324”炉1汰学冕已辻后厂可『貳
图4.模块的简单写法
在AngularJS 进行单页面构造时， Controller 和Service 在大部分情况下都不应该直接
引用DOM ，而只有Directive 是负责进行 DOM 生成或操作的。

angularJS 为开发者带来了大量的内置指令，如已经知道的 ng-app, ng-controller, ng-click, ng-model, ng-repeat （ 注 angularJS 的内置指令都是以
ng 开头的）。

“ngepeat 会为集合中的每一项（如之前的
ng-repeat phone is phones ），创建一个
新的模板，然后添加到界面中的相应部分。

指令（directive ）是angularJS 中最复杂的点。

Directive 需要一个object 的返回对象，在
ServiceId 为自定义服务的名称，之后注入实现该服务所需要的其他服务
（例子中如ser1），
函数体写实现该服务的逻辑代码。

不过这里我们定义的其实并不是服务本身， 而是定义的服 务的
工厂。

编写指令时可以定义一些需要关注的属性，如返回一个 link 的链接函数（link 函数主要作为
directive 的行为绑定），如果需要，也可以替换
HTML 中的模板。

服务-service
AngularJS 应用中的服务是一些用依赖注入捆绑在一起的、 以提供一
些封装好的逻辑操作，以供调用。

可替换的对象。

这些对象可
AngularJS 本身已经内置了很多有用的服务，例如 $http, $timeout, $q 等，使用内置的
服务既可以完成大部分业务逻辑。

但有时也需要自定义一些服务，写法如下：
angularmodulefmodulename*, (xl,x2]) .fartory(^sreviceld\[*serr,function
(serl){
return functionOf
〃服
H);。