angular 使用概术

框架技术细节说明 `must`

该文档详细说明了基于Angular的机制及关键技术。

目录： - 路由机制 - 通过路由来切分页面模块 - Lazyload机制 - 指令 - 程序bootstrap - 数据绑定 - filters - 何时编写自定义指令 - controller之间的通信 - 依赖注入 - 统一的http请求拦截器 - 根据不同的页面，显示不一样的头部菜单选中 - 如何进行国际化 - 如何进行表单校验 - 动画 - 测试

路由机制

路由机制是指页面是如何根据url跳转的。如，访问#/home,该加载哪个页面模板，这个页面模板该哪个控制器来控制。

在SPA中，路由由前端控制，整个工程只有一个真正的页面。如，我们这只有一个index.html页面或者index.jsp页面。

<body ng-controller="CtrlApp" class="{{lang}}">

    <div class="wrap">

      <div ui-view="header" class="app-header"></div>

      <div ui-view="body" class="app-body"></div>

    </div>

    <div ui-view="footer"></div>

  </body>

在我们的工程中，前端路由交由ui-router组件控制。ui-router控制的路由其实是一个状态机，可以由一个状态跳转到另一个状态。每一个状态有url的映射,有views的映射。

// Home

      $stateProvider.state('home', {

        url: '/home',

        views: {

          'body': {

            templateUrl: baseUrl + 'home/home.tpl.html',

          },

          header: headerConfig,

          footer: footerConfig

        }

      });

上图，我们定义了一个状态home，对应的url是/home,加载的views有body、header、footer。再参照index.html，我们可以知道home.tpl模板会append到

中，header、footer也做相应的事情。也就是说，当我们流转到home这个状态时，我们得到的是这样的页面。

<body>

        <div class="wrap">

          <div ui-view="header" class="app-header">

              <!-- header content -->

          </div>

          <div ui-view="body" class="app-body">

              <!-- home content -->

          </div>

        </div>

        <div ui-view="footer">

            <!-- footer content -->

        </div>

      </body>

如果需要Controller来控制页面，状态中还可以加上Controller依赖，如下

// Home

      $stateProvider.state('home', {

        url: '/home',

        views: {

          'body': {

            templateUrl: baseUrl + 'home/home.tpl.html',

            controller: 'CtrlHome',

            resolve: {

              ctrl: $couchPotatoProvider.resolveDependencies(['home/CtrlHome'])

            }

          },

          header: headerConfig,

          footer: footerConfig

        }

      });

为什么要加上controller: 'CtrlHome'还要加上$couchPotatoProvider.resolveDependencies(['home/CtrlHome'])这句呢，详见 Lazyload机制。

通过路由来切分页面模块

有时候页面会比较复杂，我们希望将页面拆分。考虑下如下页面结构

可以看到这个页面看似简单，但其实包含了很多内容：头部、轮播、数字统计、推荐创意、最热创意五个部分。内容很多，但相关性却没有。好，那我们不希望一团糟，所以我们做出改变。我们希望把每一块的模板和业务逻辑拆分开来，这里我们用路由帮我们做这件事。看下下面代码

// Home

      $stateProvider.state('home', {

        url: '/home',

        abstract: true,

        views: {

          body: {

            templateUrl: baseUrl + 'home/home.tpl.html',

            controller: 'CtrlHome',

            resolve: {

              ctrl: $couchPotatoProvider.resolveDependencies(['home/CtrlHome'])

            }

          },

          header: headerConfig,

          footer: footerConfig

        }

      })

        .state('home.facade', {

          url: '',

          views: {

            'homeBanner': {

              templateUrl: baseUrl + 'home/banner/homeBanner.tpl.html',

              controller: 'CtrlHomeBanner',

              resolve: {

                ctrl: $couchPotatoProvider.resolveDependencies(['home/banner/CtrlHomeBanner'])

              }

            },

            'homeCount': {

              templateUrl: baseUrl + 'home/count/homeCount.tpl.html',

              controller: 'CtrlHomeCount',

              resolve: {

                ctrl: $couchPotatoProvider.resolveDependencies(['home/count/CtrlHomeCount'])

              }

            }

        });

我们可以看到，我们将home这个状态定义为一个抽象的状态abstract,然后定义一个home的子状态叫home.facade，url为''，这样访问#/home这样的url，就会触发home的路由，以及home.facade路由。注意到home.facade路由里定义了homeBanner及homeCount,在home.tpl.html这样定义

<div>

    <div ui-view="homeBanner"></div>

    <div ui-view="homeCount"></div>

  </div>

这样，就能把页面拆分成子模块。如果在别的页面也需要引入这些模块，只需要在路由里面定义，然后在父级模板里面声明需要的ui-view，就能够复用了。

Lazyload机制

Lazyload机制可以使状态流转的时候去按需加载页面所需的资源，而不是在一开始就加载。AngularJS本身没有实现lazyload，这样的话就导致了webapp的性能受影响，在首次加载的时候就要加载全部的依赖。

//定义angular模块

  var app = angular.module('app', ['scs.couch-potato', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'chieffancypants.loadingBar']);

上述代码片段展示了Angular module的加载机制。而在实际应用中，特别是业务系统，一般是业务比较繁杂，功能模块比较多，在这种情况下，angular module的默认机制就不符合我们要求了。

因此，我们采用requirejs + angular-couch-patato来实现Lazyload。angular-couch-patato负责托管angular的各种注册，包括controller,directive,filter,service等。平时我们写

angular.module('app').controller(function () {

    //ctrl code here

    });

为了使用lazyload，现在我们要这样写

angular.module('app').registerController(function () {

    //ctrl code here

    });

将部件注册，这样所有的部件都交给couch-patato来管理，在需要的时候（下文会提到如何使用）。加上使用requirejs，app是统一管理的angular module，我们就这样写：

define(['app'], function(app) {

    app.registerController(function () {

    //ctrl code here

    });

 })

首先加载依赖app，app是之前定义好的angular module，如var app = angular.module('app', ['scs.couch-potato', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls', 'chieffancypants.loadingBar']);。然后在app上注册controller等。

上文路由机制部分提到，在注册路由的时候需要调用$couchPotatoProvider.resolveDependencies来实现lazyload。这里设计到couchPatato实现的一个关键，就是利用angular在路由里面的resolve机制，这里的resolve是指，路由在触发之前，必须拿到resolve里面定义的所有值。这样couchPatato就有机会去获取定义的依赖，而在每个依赖里面，会将controller注册到app，然后在路由触发后，定义的controller才得以调用。

指令

Directive。angular的一大特性，他可以定义一个标签，或者说赋予dom一定的功能，他也是angular程序里面唯一操作dom的地方。一处定义多处使用，是组件化的一个利器！

如何定义指令？ javascript app.registerDirective('dragable', function() { return { link: function(scope, element, attrs) { //code make it dragable } } }); 上述代码定义了一个指令，这个指令有赋予拖动功能的能力。

如果在模板里面声明，说，需要这个能力，他就有了这个能力 html <div dragable></div> 这个div可以拖动了！

没错就是这么神奇，当你还在等待html5规范出来，当你还在等各个浏览器厂商都实现这个规范的时候，angular帮你做了这件事，在技术上解决了这问题。

angular的zen之一，声明式优于命令式！当你声明了，你就拥有了，这是多么的nice。具体的directive教程请到https://docs.angularjs.org/guide/directive。

常用的angular的内置指令 - ng-repeat 迭代 - ng-if 控制显示 - ng-model 数据模型绑定

程序bootstrap

angular是如何解析指令的，是如何获得控制权的？（因为什么还有入口，相信很多后端选手都没有这个概念，他们从来不需要关心main函数的东西。但web不一样，web是先去加载html，渲染完成之后加载js，然后js才能托管整个app）

angular的bootstrap分两种，手动初始化和自动初始化。

自动初始化方法,在html标签定义 ng-app指令，在angular.js加载完成之后，会compile整个html，将ng-app所在的dom作为根来生成动态的html。 html <html ng-app>

</html>

手动初始化 javascript angular.element(document).ready(function() { angular.bootstrap(document, ['myApp']); });

我们是选择在main.js里面手动初始化angular的，这样我们可以做更多的事情，比如在初始化加载一些我们需要的东西，比如权限，用户。

数据绑定

在angular里，数据绑定是指双向绑定。双向绑定是指视图改变的时候，对应的数据发生改变；反之亦然。数据绑定在很多mvc框架里面都有，但是angular里的数据绑定是好用的一种。看下我们需要写什么：

<div ng-controller="Ctrl">{{name}}</div>

function Ctrl($scope) {

  $scope.name = '炸油条';

}

一旦name这个数据发生变化，就直接在视图上反映出来了，中间的过程全部交给angular来处理。

filters

filter用来format展现的数据，这样用

<div class="date">{{date | dateFilter}}</div>

dateFilter就是日期的过滤器，这样数据源就不用变，我们考虑的只是怎么展现，下面是个自定义filter的写法

app.registerFilter('PortionFilter', function () {

    return function ( input ) {

      if ( input <= 1 ) {

        return ( input * 100 ).toFixed( 2 ) + '%';

      }

      return input;

    };

  });

何时编写自定义指令

指令其实可以理解为组件化的思想，当有多个场景需要相同的功能时，应该编写一个指令。
当不得不进行dom操作时，编写指令
当需要扩展dom功能时，编写指令
如果开源的社区有更好的相同功能的指令，使用或者参考之

controller之间的通信

有时候，ctrl之间需要通信。我们根据ctrl的不同关系做不同的处理。当ctrl具有父子或者祖宗关系时，我们采用$broadcast,$emit来进行通信。$broadcast往下传播，$emit反之。当不具有直接层级关系的时候，我们通过他们共同的父级ctrl来进行交互，因为无论ctrl如何分布，他们最终都有一个共同的root。具体的做法是在父级ctrl定义一个他们共同维护的变量，然后监听这一变量的变化，最终通过$broadcast,$emit来进行通信。父级ctrl等于做了个中间人。

使用. 来进行通信 https://egghead.io/lessons/angularjs-the-dot

依赖注入

angular最好用的特性之一。依赖注入也是声明式优于命令式的一个体现。看下面代码

function Ctrl($scope, $http) {

  $scope.doSth();

  $http.doSth();

}

我们可以看到，我们在想使用$http服务的时候，仅仅需要声明一下，我们就可以获得该引用。编写angular的service非常简单

app.registerService('util', function(){

    return {

      compress: function A(),

      sthElse: function(){

        console.log(1);

      }

    };

  });

有了这个能力，我们就可以精简ctrl里面的代码，把可重用的或者冗长的业务代码抽离出来，使ctrl更多的关注业务流程，具体的业务代码维护在service里面。

统一的http请求拦截器

angular允许你注册http请求拦截器。有什么用么？有，在想统一对某类请求做统一处理的时候非常有用。如希望后端返回404的情况下，跳转到404页面。这样，就不用在每一个http请求的处理函数都加上这段。还可以针对ie做防缓存处理，及判断，如果是ie低版本浏览器，在每个get请求都加上时间戳，nice！

play ground：youtube的顶部加载效果！

根据不同的页面，显示不一样的头部菜单选中

比如说在首页，命中的是首页，当到列表页的时候，头部命中的应该是列表。如何实现？ 1. 得在相应的controller里面定义一套命中规则，规则规定了哪个路由应该高亮哪个item 2. 定义一个service来管理头部选中，在每个路由级的控制器中调用service来改变高亮

如何进行国际化

什么是国际化，国际化是根据不同的语种，来显示不同的文案。思路，我们根据不同的语种来加载不同的资源文件。如,当是中文的时候我们使用zh-cn.json，英文的时候我们使用us-en.json。

在angular中，filter负责显示。所以我们在filter上做文章。对于静态的文本，我们用一个key来代替如 '语言'，我们用 'lang'来替换，在html我们这样写 {{'lang' | translate}}, translate的filter的作用就是从我们之前加载的语言包找到'lang'这个key所对应的文本。

{

  "lang": "中文哦"

}

那对于动态的数据应该怎么做呢，这个就需要跟后端做一定的约定。 - 值列表，我们直接去翻译好的i18n数据 - 枚举型，约定返回具有意义的字符串，如'success','failed'。然后我们在前端做一定的拼接，如{{'type' + type | translate}},然后我们在资源文件里加入typesuccess和type_failed的key，就ok了～ - 这里我们鼓励rd返回具有意义的字符串，而不是0,1,2这种

另外，国际化不仅仅影响了文本，还可能影响布局，就是说不同的语言环境，页面长得不一样，这种情况下，我们的处理类似换肤，我们在body上绑定一个语言环境的class，针对特殊的需求，我们做不同的处理。

如果国际化影响了业务逻辑，那建议对模块进行语言环境的逻辑判断。

如何进行表单校验

表单校验是个世纪难题，同学们可能都用过各种jquery表单校验的插件，是不是没几个好用的。。

表单校验为什么难，是因为你不仅仅需要校验，而且你需要不同的校验的展示方式。所以往往会根据具体情况来进行处理，下面说一种比较常见的校验处理方法。

<div class="material-url form-group">

    <label class="control-label col-md-2">

      url：

    </label>

    <div ng-class="{'has-error':e.materialValidator && formAd.materialUrl.$error.required}">

      <div class="col-md-3">

        <input placeholder="" type="url" class="form-control" name="materialUrl"

        ng-model="e.adSolutionContent.materialUrl" />

      </div>

      <div class="col-md-3 help-block" ng-show="formAd.materialUrl.$error.url">

        {{'AD_CONTENT_NO_URL' | translate}}

      </div>

    </div>

  </div>

input需要输入合法的url，url不合法的会马上在右侧显示错误提示。这点angular非常轻松的就做到了。。。然后我们可以让提交按钮无效

<button ng-show="form.$valid" />

但是变态的需求又来了，按钮永远可以点。。。好，那我们在提交的时候做判断。我们同样通过form.$valid很容易的判断form有没有ok，如果ok，那ok，否则我们要focus到第一个出错的input。那我们就只能悲催的挨个判断input是否合法，然后写个指令控制下focus动作。

综上表单校验，根据不同的需求做不同的处理。

动画

angular推荐的是用css3来进行动画处理，因为angular可以很方便的操纵数据，也就能方便的切换css，再经由css3来动起来。https://docs.angularjs.org/guide/animations ，通过angular的教程可以搭建list的简单动画。

测试

angular程序是可以做测试的，这非常神奇，原因是angular将所有的dom操作代码都限制在了指令上，而dom操作代码是很难进行测试的。前面提到的尽量将逻辑处理的代码封装到service，这样就可以对service进行测试，保证代码的质量。

angular的测试还得力于他的依赖注入，因为这正是跑测试的关键。测试用例会首先创建一个angular-mock，假的壳，然后利用里面的$injector.get()来加载想要测试的service，这个时候已经能获得service的实例了，就可以进行测试。 angular推荐的是jasmine。