AngularJS官网种子工程AngularSeed简单分析

一.AngularSeed工程结构

二.AngularSeed工程运行效果

工程默认打开view1。

AngularJS官网种子工程AngularSeed简单分析

点击“view2"的超链接，效果如下：
AngularJS官网种子工程AngularSeed简单分析

三.AngularSeed中的指令、服务、过滤器具体分析

1.指令、服务分析

在index.html中有如下一行代码

<div>Angular seed app: v<span app-version></span></div>

其中，app-version就是自定义的指令，它的具体实现是在directives.js中，而directives.js中的appVersion指令实现很简单，仅仅调用version服务将version设置到指令所在元素上，如下所示。

'use strict';

/* Directives */
angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }]);

于是，我们进一步看services.js

'use strict';

/* Services */

// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
  value('version', '0.1');

此服务将version设置成0.1。

所以我们在页面上（因为写在index.html，所以view1、view2都会显示）看到了“Angular seed app: v0.1”效果。

2.过滤器分析

我们打开partial2.html页面，如下所示：

<p>This is the partial for view 2.</p>
<p>
  Showing of 'interpolate' filter:
  {{ 'Current version is v%VERSION%.' | interpolate }}
</p>

{{ 'Current version is v%VERSION%.' | interpolate }}使用了interpolate过滤器，于是打开filters.js，发现interpolate作用就是将内容中的‘%VERSIN%’替换成0.1（因为version就是version服务返回的“0.1”）。

'use strict';

/* Filters */
angular.module('myApp.filters', []).
  filter('interpolate', ['version', function(version) {
    return function(text) {
      return String(text).replace(/\%VERSION\%/mg, version);
    }
  }]);

这样，{{ 'Current version is v%VERSION%.' | interpolate }}的结果是：Current version is v0.1.

AngularJS官网种子工程AngularSeed简单分析

相关推荐