AngularJs 模块

模块

我们可以把angular中的模块(module)想象成应用组件的容器,这些组件包括控制器,服务,过滤器,指令等.

 通过“Hello World”实例来理解模块的工作原理。

 

<div ng-app="myApp">  
  <div>  
    {{ 'World' | greet }}  
  </div>  
</div>  

 

// 声明一个模块 
var myAppModule = angular.module('myApp', []);  
  
// 配置模块。  
// 我们将创建一个问候语  
myAppModule.filter('greet', function() {  
 return function(name) {  
    return 'Hello, ' + name + '!';  
  };  
});  

 

it('should add Hello to the name', function() {  
  expect(element(by.binding("'World' | greet")).getText()).toEqual('Hello, World!');  
});  

在js中我们通过dulemoAPI中的module定义一个模块，并在其中添加greet过滤器。

 

 module方法的第二个参数为一个数组，用来声明myApp模块所依赖的其他模块，这里angular.module('myApp', [])的第二个参数为空数组，及myApp不依赖任何模块。

在HTML模板中通过<div ng-app="myApp">来启动myApp.

在构造复杂的应用时我们要按照下面的方法将应用切割成相对独立的多个模块：

按feature划分模块

把可重用的组件，特别是指令，过滤器之类的封装到模块中

 应用级别的模块依赖上面两类模块，并且包含了应用的初始化代码

  

<div ng-controller="XmplController">  
  {{ greeting }}  
</div>  

ngular.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);  
  }); 

  模块得载入和依赖

angular.module('myModule', []).  
config(function(injectables) { // provider-injector  
  // 这是一个配置块的例子.  
  // 你可以拥有你想要的那些数量。 
  //将Providers（而不是实例）注入到配置块中。 
}).  
run(function(injectables) { // instance-injector  
  
});  

 创建并获取模块

我们用angular.module('myModule', [])创建了myModule模块或者重写myModule如果该模块已经存在。可以通过angular.module('myModule')来获取myNodule模块。

var myModule = angular.module('myModule', []);  
  
// 添加一些指令和服务
myModule.service('myService', ...);  
myModule.directive('myDirective', ...);  
  
// 通过创建一个新的模块来覆盖myService和myDirective
var myModule = angular.module('myModule', []);  
  
//抛出一个错误，因为myOtherModule尚未被定义
var myModule = angular.module('myOtherModule');