最近项目里用的AngularJs，把angular再复习一遍
简介
AngularJS是一个前端JavaScript框架，背后有Google支持。这个框架最早是09年发布的，随后发展迅速，尤其是最近，流行度很高。和其他框架不同，AngularJS有很多独特的特性，使得其非常与众不同。最吸引人的两个特性是双向绑定以及依赖注入。前者免去了开发时显示的刷新DOM，能让开发者更专注在逻辑上，而后者则使得测试以及集成变得非常方便。
AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。
AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。
AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。
当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。
Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
指令：ng-app
ng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单，如下所示：
<
div
ng-app
=
""
ng-init
=
"name='Hello World'"
>
</
div
>
如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的"所有者"，在它里面的指令也就会被Angular编译器所编译、解析了。
指令：ng-init
ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。
<
div
ng-app
=
""
ng-init
=
"name='Hello World'"
>
</
div
>
AngularJS表达式
AngularJS框架的核心功能之一 —— 数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内：{{ expression }}。
<
div
ng-app
=
""
ng-init
=
"name='Hello World'"
>
{{ name }}
</
div
>
指令：ng-model
在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。
<
div
ng-app
=
""
>
请输入任意值：<
input
type
=
"text"
ng-model
=
"name"
/>
你输入的为： {{ name }}
</
div
>
指令：ng-bind
指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。
指令：ng-click
AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。
<
div
ng-app
=
""
ng-init
=
"click=false"
>
<
button
ng-click
=
"click= !click"
>隐藏/显示</
button
>
<
div
ng-hide
=
"click"
>
请输入一个名字：<
input
type
=
"text"
ng-model
=
"name"
/>
Hello <
span
ng-bind
=
"name"
></
span
>
</
div
>
</
div
>
控制器
AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。
用ng-controller指令来创建一个简单的控制器定义，如下所示：
<
div
ng-app
=
""
ng-controller
=
"MyController"
>
请输入一个名字：<
input
type
=
"text"
ng-model
=
"person.name"
>
Hello <
span
ng-bind
=
"person.name"
></
span
>
</div>
<script>
function
MyController($scope) {
$scope.person = {
name:
"World"
};
}
</script>
特性
1、MVC(MVVM)模式：
MVC顾名思义：Model-view-Controll设计模式，其实这个有点类似于Java的思想，模型、视图、控制器的分离。但是Angular又有点不同于传统的MVC，严格意义上说它是MVVM（model-view-viewModel）。Model是简单的javascript对象；ViewModel是$scope对象，Angular依靠$scope检测状态变化；Controller负责设置初始状态和参数化$scope方法用以控制行为；View是Angular解析渲染后生成的HTML。
MVC的核心是$scope：
$scope是一个POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表达式的执行环境（或者叫作用域）
$scope是一个树型结构，与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个Angular应用只有一个根$scope对象（一般位于ng-app上）
$scope可以传播事件，类似DOM事件，可以向上也可以向下
$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试
2、数据双向绑定：
这应该算Angular比较特有的属性，概括来说，Angular通过监听变量的变化来实现双向数据绑定。传统技术上，当model改变时，开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中，程序员可以轻轻松松解决这种问题，省掉了很多的代码。
{{}}与ng-bind指令：
3、指令：
指令比较有意思，可以帮助我们做很多的DOM操作，比如增删改查都可以用指令完成。指令自带的link方法有三个参数：scope、element、attrs。通过这三个参数我们可以完成很多功能，如：获取对象，改变CSS，变量传递等，这也是我用的比较多的方法。
4、模板：
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
» HTML模板将会被浏览器解析到DOM中。
» DOM然后成为AngularJS编译器的输入。
» AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。
» 所有的指令都负责针对view来设置数据绑定。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：
5、服务和依赖注入：
Angular服务的作用就是对外提供某个特定的功能。Angular拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易开发，理解和测试应用。
比如，很多时候我们会引入第三方指令，这时候需要在module中加入模块依赖，比如项目上我想用ng-bind-html，引入$sce，这时候需要在module写：
javascript 代码片段
Angular的依赖注入实现：
每一个Angular应用都有一个injector
injector负责自动处理依赖关系、实例化对象
对用户代码来说，injector是透明的
injector会自动分析函数签名，注入所需要的对象
inJector注入有三种方式：http://www.cnblogs.com/lodingzone/p/4895275.html
依赖可以被使用者自己创建,通过 new 操作符.
依赖可以通过全局变量(如 window)来查找并引用
依赖可以在需要的地方被传入
DI可以用在各种不同的地方，主要用在controller和factory中
三、ng官方推荐的模块切分方式
App：controllers ,directives,services,routes,fiters
用一个总的app模块作为入口点，它依赖其它所有模块
function
HelloAngular($scope){
$scope.greeting = {
text:
'Hello'
};
}
/******* ↓ ********/
var
helloModule = angular.module(
'HelloAngualr'
,[]);
helloModule.controller(
'helloNgCtrl'
,[
'$scope'
,
function
($scope){
$scope.greeting = {
text:
'Hello'
};
}]);
完整的项目框架：
四、何时用Controller、Directive、Service
AngularJS是一款非常强大的前端MVC框架。同时，它也引入了相当多的概念， Directive（指令），Controller（控制器），Service （服务）。
那我们该何时使用这些呢？
1、Service（服务）
Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以 实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。
简单来说，如果你需要对一个数据做增删改查，那么我们会用Service做持久化，让不同Controller共享Service数据做处理，如果你还是不理解请看下面代码：
Service例子:
module.service(
'Book'
,[
'$rootScope'
,
function
($rootScope){
var
service = {
books:[
{title:
'标题q'
,author:
'作者a'
},
{title:
'标题p'
,author:
'作者b'
}
],
addBook:
function
(book){
service.books.push(book);
$rootScope.$broadcast(
'books.update'
);
//事件派发，用于不同controller之间的信息传递
}
}
return
service;
}])
2、 Controller（ 控制器）
Controller应该纯粹地用来把service、 依赖关系、 以及其它对象串联到一起， 然后通过scope把它们关联到view上。 如果在你的 视图里面需要处理复杂的业务逻辑， 那么把它们放到controller里面也是一个非常不错的选择。
如果我要add一本书籍应该怎么办呢？ 我应该在controller上面新增一个方法来处理这件事情吗？ 不， 原因在下面解释。 因为它是DOM交互 / 操作的一部分。
Controller（ 控制器） - 注意点：
不要试图去复用Controller， 一个控制器一般只负责一小块视图
不要在Controller中操作DOM， 这不是控制器的职责
不要在Controller里面做数据格式化， ng有很好用的表单控件
不要在Controller里面做数据过滤操作， ng有$filter服务
一般来说， Controller是不会互相调用的， 控制器之间的交互会通过事件进行
3、 Directive(指令)
到目前为止， 在我所编写的大量AngularJS应用中， 应用中最主要的复杂部分都在directive（ 指令） 中。 有一个强大的工具可以用来操 作和修改DOM， 它也是我们这里需要讨论的内容。 我们来提供一个按钮， 用户通过它可以向service里面添加一本图书。
Angular对directive的定义是一段代码片段， 你 可以用它来操作DOM， 但是我觉得directive也是进行用户交互的很好选择。 我们来扩展前面的例子， 为用户提供一个按钮， 通过这个按钮可以向 service里面添加一本书籍。
<
html
ng-app>
<
head
>
<
script
type
=
"text/javascript"
src
=
"http://code.angularjs.org/angular-1.0.1.min.js"
></
script
>
<script>
module.directive(
"addBookButton"
,[
'book'
,
function
(book){
return
{
restrict:
"A"
,
link:
function
(scope,elem,attrs){
elem.bind(
'click'
,
function
(){
Book.addBook({title:
"jquery高级编程"
,author:
"aaa"
});
});
}
}
}]);
</
script
>
</
head
>
<
body
>
<
button
add-book-button>增加书籍</
button
>
<!--由于没有service，这里不做代码运行，只需了解directive基本用法-->
</
body
>
</
html
>
五、 Filter（ 过滤器）
过滤器（ filter） 正如其名， 作用就是接收一个输入， 通过某个规则进行处理， 然后返回处理后的结果。 主要用在数据的格式化上， 例如获取一个数组中的子集， 对数组中的元素进行排序等。 ng内置了一些过滤器， 它们是： currency(货币)、 date(日期)、 filter(子串匹配)、 json(格式化json对象)、 limitTo(限制个数)、 lowercase(小写)、 uppercase(大写)、 number(数字)、 orderBy(排序)。 总共九种。 除此之外还可以自定义过滤器， 这个就强大了， 可以满足任何要求的数据处理。
过滤器有两种用法：
1、 模板中使用Filter；
2、 Controller和Serivce中使用Filter
1、 模板中使用Filter
< 1 > 、我们可以直接在 {{} }中使用filter， 跟在表达式后面用 | 分割， 语法如下： {{ expression | filter } } < 2 > 、也可以多个filter连用， 上一个filter的输出将作为下一个filter的输入 {{ expression | filter1 | filter2 | ... } } < 3 > 、filter可以接收参数， 参数用: 进行分割， 如下： { { expression | filter: argument1: argument2: ... } }
2、 Controller和Serivce中使用Filter
我们的js代码中也可以使用过滤器， 方式就是我们熟悉的依赖注入， 例如我要在controller中使用currency过滤器， 只需将它注入到该controller中即可， 代码如下：
app.controller(
'test'
,
function
($scope, currencyFilter) {
$scope.num = currencyFilter(123534);
});
在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。
六、Route(路由)
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
长按二维码点选（识别图中二维码）
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
