最近项目里用的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。

引用方法很简单，如下所示：

如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的"所有者"，在它里面的指令也就会被Angular编译器所编译、解析了。

指令：ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。

AngularJS表达式

    AngularJS框架的核心功能之一 —— 数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似Javascript代码片段，可以包含文字、运算符和变量，通常在绑定数据中用到，表达式可以绑定数字、字符串、对象、数组，写在双大括号内：{{ expression }}。

指令：ng-model

在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。

指令：ng-bind

指令ng-bind和AngularJS表达式{{}}有异曲同工之妙，但不同之处就在于ng-bind是在angular解析渲染完毕后才将数据显示出来的。

指令：ng-click

AngularJS也有自己的HTML事件指令,比如说通过ng-click定义一个AngularJS单击事件。

控制器

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。

所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。

每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。

用ng-controller指令来创建一个简单的控制器定义，如下所示：

</div> 

<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模块作为入口点，它依赖其它所有模块

完整的项目框架：

四、何时用Controller、Directive、Service

    AngularJS是一款非常强大的前端MVC框架。同时，它也引入了相当多的概念， Directive（指令），Controller（控制器），Service （服务）。

那我们该何时使用这些呢？

    1、Service（服务）

          Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西（指单例对象）会被经常传来传去，保证你每次访问到的都是同一个实例，这一点和工厂模式不同。基于这种思想，单例对象让我们可以 实现一些相当酷的功能，它可以让很多controller和directive访问内部的数值。

简单来说，如果你需要对一个数据做增删改查，那么我们会用Service做持久化，让不同Controller共享Service数据做处理，如果你还是不理解请看下面代码：

         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里面添加一本书籍。

        <script>

五、 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中即可， 代码如下：

在模板中使用{{num}}就可以直接输出$123,534.00了！在服务中使用filter也是同样的道理。

六、Route(路由)

   AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。

推荐公众号：前端达人专注分享当下最实用的的前端技术！
长按二维码点选（识别图中二维码）