AngularJS——第9章 模块加载

第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为例进行演示，修改配置

//对$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的加载机制。