AngularJS模块加载

第9章 模块加载

AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。

【AngularJS执行流程】

• 启动阶段（startup）
• 开始 --> 浏览器解析DOM树 --> 遇到angular.js停止解析，开始执行脚本 --> Angular监听到DOMContentLoaded事件 --> 启动Angular应用
• 初始化阶段（initial）
• 启动Angular应用 --> 查找模块依赖 --> 寻找ng-app指令 --> 初始化必要组件($injector/$compile/$rootScope) --> 配置和运行 --> 开始解析DOM树
• 编译、链接（compile/link）
• 开始解析DOM树 --> $compile遍历DOM树，搜集指令 --> 执行每个指令的compile函数 --> 处理DOM转换，编译模板 --> 调用链接函数，生成实时视图
• 运行阶段（running）
• 调用链接函数，生成实时视图 --> 等待事件触发，执行$digest循环 --> 检测到变化，调用$watch函数 --> 再次执行$digest循环，直到没有变化 --> 结束

9.1 配置块

通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。

比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。

• 以$log为例进行演示，修改配置
  ```javascript
  //对$log服务进行配置
  App.config(['$logProvider', function ($log) {
  //关闭debug级别信息提示
  $log.debugEnabled(false);
  }]);
  App.controller('DemoController', ['$scope', '$log', function ($scope, $log) {
  $scope.showLog = function () {
  $log.log('日志');
  $log.warn('警告');
  //已被关闭，将不再生效
  $log.log('调试');
  }
  }]);

- 以$filter为例进行演示，实现相同功能

//对$filter服务进行配置，实现相同的功能
App.config(['$filterProvider', function ($filterProvider) {
//注册一个名叫myFilter的过滤器
$filterProvider.register('myFilter', function () {
return function (input, arg) {
return input + ' study at myFilter' + arg;
}
});
}]);
```

9.2 运行块

• 服务也是模块形式存在的且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。

//运行$http、$rootScope服务
App.run(['$http', '$rootScope', function ($http, $rootScope) {
    $http({
        method: 'post',
        url: 'example.php'
    }).success(function (data) {
        $rootScope.name = data;
    });
}]);

• 不但如此，run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。

• 注：此知识点意在了解AngularJS的加载机制。