Logo
30 Apr 2017 | 2 min. (255 words)

angular学习(十四)——Module

为什么使用Module

大多数程序都有一个主方法,其他部分的模块都由这个主方法组织在一起。

AngularJS却没有所谓的main方法,而由module明确的声明app应该如何bootstrap。这样做有几个优点:

  • 声明式的程序更容易理解
  • 你可以打包代码后形成重用module
  • module可以按任意顺序加载,甚至是并行。因为module是延迟执行的。

Module版的helloword

<div ng-app="myApp">来说明app需要从哪个module启动,angular.module('myApp', [])后面的数组可以添加需要依赖的其他module。

<!DOCTYPE html>
<html>
<head>
    <meta charset="uft-8"/>
    <title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="myApp">
<div ng-app="myApp">
    <div>
        {{ 'World' | greet }}
    </div>
</div>
</body>
<script>
    // 定义module
    var myAppModule = angular.module('myApp', []);

    // 配置module.
    // 创建greeting过滤器
    myAppModule.filter('greet', function () {
        return function (name) {
            return 'Hello, ' + name + '!';
        };
    });
</script>
</html>

推荐设置

上面只是一个简单的例子,并不是一个大规模的工程。但实际工作中,最好不要只写一个大模块,而是应该分成不同的小模块,如下:

  • 每个功能一个module
  • 每个可重用的组件作为一个module,特别是directive和filter
  • 一个app级别的module,它依赖于上述模块并且有一些初始化的代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="uft-8"/>
    <title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="xmpl">
<div ng-controller="XmplController">
    {{ greeting }}
</div>
</body>
<script>
    angular.module('xmpl.service', [])

            .value('greeter', {
                salutation: 'Hello',
                localize: function(localization) {
                    this.salutation = localization.salutation;
                },
                greet: function(name) {
                    return this.salutation + ' ' + name + '!';
                }
            })

            .value('user', {
                load: function(name) {
                    this.name = name;
                }
            });

    angular.module('xmpl.directive', []);

    angular.module('xmpl.filter', []);

    angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter'])

            .run(function(greeter, user) {
                //可以看成是做初始化的主方法的一部分
                greeter.localize({
                    salutation: 'Bonjour'
                });
                user.load('World');
            })

            .controller('XmplController', function($scope, greeter, user) {
                $scope.greeting = greeter.greet(user.name);
            });
</script>
</html>

Module的加载和依赖

module是配置块和运行块的集合,这些块被用于引导进程中。

简单的说,就是两个块的集合:

  • 配置块 在provider的注册和配置阶段执行,只有provider和常量可以注入到配置块。这可以防止在service实例未完全初始化前就使用产生的错误。
  • 运行块 在injector创建之后执行,被用于启动app。只有实例和常量可以注入到运行块。这可以放置在app运行阶段进行系统配置
angular.module('myModule', []).
config(function(injectables) { // provider注入
  // 这是一个配置块
  //
  // 仅可以注入provider,不能注入实例
}).
run(function(injectables) { // 实例注入
  // 这是一个运行块
  //
  // 仅可以注入实例不能注入provider
});

配置块

module有一些快捷方法可以等同于module的config块,如下:

angular.module('myModule', []).
  value('a', 123).
  factory('a', function() { return 123; }).
  directive('directiveName', ...).
  filter('filterName', ...);

// 相当于

angular.module('myModule', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.value('a', 123);
    $provide.factory('a', function() { return 123; });
    $compileProvider.directive('directiveName', ...);
    $filterProvider.register('filterName', ...);
  });

当启动时,AngularJS先执行常量定义,然后按注册顺序执行所有配置块。

运行块

运行块非常接近主方法,运行块是app的启动代码。运行块执行于所有的service被配置和injector创建之后。运行块中的代码很难进行单元测试,因此运行块常常有单独的模块执行,以便单元测试可以忽略这些代码。

依赖

module可以罗列其他module作为依赖项,依赖一个module意味着被需要的module先加载,这个module后加载。也就是说被需要的模块的配置块先运行,需要其他module的module的配置块后运行。运行块也一样。每个module只加载一次,不管所少module需要它。

异步加载

module是$injector配置管理的一种方式,和加载脚本到vm无关。有专门的项目来加载脚本到vm中。module与加载无关,它们可以按任意顺序加载。脚本加载器可以利用这一点对module进行并行加载。

创建vs检索

angular.module('myModule', [])将会创建一个名为myModule的模块,如果myModule已存在,那么将会重写,就是说重新创建了个新的。angular.module('myModule')只会检索已存在的模块。

var myModule = angular.module('myModule', []);

// 增加directives和services
myModule.service('myService', ...);
myModule.directive('myDirective', ...);

// 重新创建了module,之前添加的directives和services没有了
var myModule = angular.module('myModule', []);

// myOtherModule还未定义,所以会报错
var myModule = angular.module('myOtherModule');
angular

angular学习(十五)——Provider

每个web应用都是由多个对象协作完成的,这些对象需要初始化并连接在一起为app服务。在AngularJS中,app中的大多数对象通过injector服务初始化和连接在一起。…

angular学习(十三)——Component

在angularjs中,Component是一种特殊的directive,它的配置更简单一些,非常适合组件化的app架构。使用web组件和使用Angular风格的app架构使得编写app更为简便…

© 2009-2017 lastsweetop.com 版权所有 粤ICP备15102984号
Menu
  • 为什么使用Module
  • Module版的helloword
  • 推荐设置
  • Module的加载和依赖
  • 配置块
  • 运行块
  • 依赖
  • 异步加载
  • 创建vs检索