Angular 运行机制
2018-11-09 本文已影响0人
direwolf_
Angular 模块
模块是用来组合相关组件、指令、服务等的一个功能块。可以理解为就是对一个应用所要用到的各个部分按照一定的规律进行归类，从而组成一个完整的应用。
Angular 模块可以通过 angular.module(name, requires) 方法生成：
-
name: 模块的名字; -
requires: 模块的依赖列表（可以被注入到模块中的对象列表），因为angular.module(name)为获取此模块，所以，若该模块没有需要依赖的模块，此参数需设置为空数组[]。
angular.module(name)相当于 AngularJS 模块的getter方法，用了获取对模块的引用。
使用模块的好处：
- 保持全局命名空间的清洁；
- 编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
- 易于在不同应用间复用代码；
- 使应用能够以任意顺序加载代码的各个部分。
Angular 模块包含什么?
结构化 Angular 模块
建议把应用程序分解成多个模块:
- 服务模块：用于服务声明
- 指令模块：用于指令声明
- 过滤器模块：用于过滤器声明
- 应用层模块：该模块依赖于上述模块
这样分解的原因是，在测试中经常需要忽略初始化代码，这往往很难测试。通过把它放到一个单独的模块中在测试中很容易被忽略。通过只加载模块，测试也可以更加集中。
Module 的加载和依赖
加载
Module 的加载分为两个阶段：config 和 run。
-
config：在模块加载阶段，AngularJS 会在provider注册和配置的过程中对模块进行配置。在整个 AngularJS 的工作流中，这个阶段是唯一能够在应用启动前进行修改的部分。只有providers和constants，可以注入到config中。
AngularJS 会以这些函数的书写和注册顺序来执行它们，也就是说我们无法注入一个尚未注册的
provider（唯一例外的是constant()方法，这个方法总会在所有配置块之前被执行）。
angular.module('myApp', [])
.config(function ($provide) {
})
.config() 函数接收一个参数：configFunction， AngularJS在模块加载时会执行这个函数。
-
run：在注入器创建之后被执行，它是所有 AngularJS 应用中第一个被执行的方法(与main方法概念最接近)。只有instances和constants，可以注入到run中。通常用来注册全局的事件监听器。
angular.module('myApp', [])
.run(function ($rootScope， AuthService) {
$rootScope.$on('$routeChangeStart', function (evt, next, current) {
// 如果用户未登录
if (!AuthService.userLoggedIn()) {
if (next.templateUrl === 'login.html') {
// 已经转向登录路由因此无需重定向
} else {
$loction.path('./login');
}
}
});
});
.run() 函数接收一个参数：initializeFn， AngularJS在注入器创建后会执行这个函数。
依赖
一个模块可以列出它所要依赖的模块的列表，这些被依赖的模块需要在该模块加载前加载，也就是说，被依赖的模块的配置块要在该模块的配置块之前执行。每个模块只能加载一次，即使多个模块依赖它。
执行顺序
order.html
<div ng-controller="Ctrl">
{{title}}
<p>{{type | filter}}</p>
<directive>{{text}}</directive>
<p>{{type | filter}}</p>
</div>
order.js
(function () {
angular.module('order', [])
.controller('Ctrl', ['$scope', 'factory', 'service', function ($scope, factory, service) {
$scope.title = '顺序检测';
$scope.text = 'text';
$scope.con = function () {
console.log('click')
};
console.log('controller-------8');
factory();
service.service();
}])
.factory('factory', function () {
console.log('factory-------6');
return function () {
console.log('factory-fn-------9');
}
})
.service('service', function () {
console.log('service-------7');
this.service = function () {
console.log('service-fn-------10');
}
}).filter('filter', function () {
console.log('filter-------3');
return function () {
console.log('filter-fn-------13');
}
}).config(function () {
console.log('config-------1');
}).run(function () {
console.log('run-------2');
}).directive('directive', function () {
console.log('directive-------4')
return {
restrict: 'E',
compile: function () {
console.log('directive-compile-------5');
return {
pre: function preLink () {
console.log('compile-preLink-------11')
},
post: function postLink() {
console.log('compile-postLink-------12')
}
}
},
link: function () {
console.log('directive-link');//有compile时不执行
}
}
})
})();
