1.模块
大部分的应用都有一个主要的方法来实例化,链接,引导。angular应用没有这个方法,而是用模块声明来替代。
这种方式的优点:
*程序的声明越详细越容易理解
*单元测试不需要加载所有的模块,有助于模块书写
*
*第三方的代码可以打包作为复用的代码
*模块可以以任何顺序加载(由于模块延迟执行的特性)
2.基本示例
1 <doc:example module='myApp'> 2 <doc:source> 3 <script> 4 // declare a module 5 var myAppModule = angular.module('myApp', []); 6 7 // configure the module. 8 // in this example we will create a greeting filter 9 myAppModule.filter('greet', function() { 10 return function(name) { 11 return 'Hello, ' + name + '!'; 12 }; 13 }); 14 15 </script> 16 <div> 17 {{ 'World' | greet }} 18 </div> 19 </doc:source> 20 </doc:example>
3.推荐的模块划分
*服务模块,服务的声明
*管理模块,声明管理相关
*过滤器模块
*依赖于上述模块的应用级模块(包含初始化代码)
这样划分的原因是在测试时,常常需要忽略初始化代码(很难测试)。把它放在单独的模块,可以只用加载相关测试模块。
<doc:example module='xmpl'> <doc:source> <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) { // This is effectively part of the main method initialization code greeter.localize({ salutation: 'Bonjour' }); user.load('World'); }) // A Controller for your app var XmplController = function($scope, greeter, user) { $scope.greeting = greeter.greet(user.name); } </script> <div ng-controller="XmplController"> {{ greeting }}! </div> </doc:source> </doc:example>
4.模块加载和依赖
最简单的模块包含配置块和运行块,在应用的引导流程提供依赖。
(1)配置块:在注册和配置阶段执行。只有供应者和常量能够添加到配置块。这是为了防止在服务被完全配置之前意外的实例化。
(2)运行块:在注入被创建后执行,被用来安装应用。只有实例和常量能够注入运行块。这是为了阻止应用运行期间系统进一步
配置。
angular.module('myModule', []). config(function(injectables) { // provider-injector // This is an example of config block. // You can have as many of these as you want. // You can only inject Providers (not instances) // into the config blocks. }). run(function(injectables) { // instance-injector // This is an example of a run block. // You can have as many of these as you want. // You can only inject instances (not Providers) // into the run blocks });
4.1配置块
模块中一些简便的方法相当于配置块
angular.module('myModule', []). value('a', 123). factory('a', function() { return 123; }). directive('directiveName', ...). filter('filterName', ...); // is same as angular.module('myModule', []). config(function($provide, $compileProvider, $filterProvider) { $provide.value('a', 123); $provide.factory('a', function() { return 123; }); $compileProvider.directive('directiveName', ...); $filterProvider.register('filterName', ...); });
配置块应用的顺序取决于它们注册的顺序,常量例外(常量在所有配置项之前)
4.2运行块
运行块类似主方法,用于安装应用。在所有的服务的配置和注入被创建后执行。换句话说,配置块在运行块之前引入。每个模块只加载一次,即使有多个其它模块依赖它。
4.3异步加载