angular的config和run分别是干什么的

1 背景介绍

ANGULARJS模块加载

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

在模块加载阶段 AngularJS会在提供者(provide)注册和配置的过程中对模块进行配置

在整个AngularJS的工作流中 这个阶段是唯一能够在应用启动前对其进行修改的部分

AngularJS的工作流包括了 配置块 config  和 运行块 run  并且在编译期间会执行

2 知识剖析

配置 config

通过config方法实现对模块的配置 AngularJS中的服务多数都对应一个provider

用来执行与对应服务相同的功能或对其配置 比如$log $http $location都是内置服务

相对应的“provider”分别是$logProvider $httpProvider $locationPorvider

//新建了一个模板：这个模板中有一个服务 一个自定义指令

var app = angular module("myApp"  []);

app fatory('myFactory'  function () {//利用工厂生产  创建一个 服务

    var service = {};

    return service;

});

app directive('myDirectiive'  function () {//创建 一个 自定义指令

    return {template: '<div><button>戳我!</button></div>'   }

});

// angularJS编译的流程是这样的：

var app = angular module('myApp'  []);

app config(function ($provide  $compileProvider) {

    $provide factory('myFactory'  function () {

        var service = {};

        return service;

    });

    $compileProvider directive('myDiretive'  function () {

        return {template: '<div><button>click me</button></div>'}

    });

});

// PS:angularJS会根据你定义的函数顺序来执行他们

2 2 运行块 run

和配置块不同 运行块在注入器创建之后被执行 它是所有AngularJS应用中第一个被执行的方法

运行块是AngularJS中与main方法最接近的概念 运行块中的代码块通常很难进行单元测试 它是和应用本身高度耦合的

运行块通常用来注册全局的事件监听器 例如  会在 run()块中设置路由事件的监听器以及过滤未经授权的请求

调用方式1: 服务也是以模块形式存在的 对外提供特定功能 将服务做为依赖注入进去的 然后再进行调用  调用方式2: 直接运行相应的服务模块  AngularJS提供了run方法来实现

run方法还是最先执行的 利用这个特点 可以将一些需要优先执行的功能通过run方法来运行

假设 需要在每次路由发生变化时 都执行一个函数来验证用户的权限 放置这个功能唯一合理的地方就是run方法：

3 常见问题

如何通过 config 配置一个路由模块？

4 解决方案

下面实例使用的是第三方ui-router

5 扩展思考

provider是个啥？

$provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务 服务会被叫做供应商的东西来定义 你可以使用$provide来创建一个供应商 你需要使用$provide中的provider()方法来定义一个供应商 同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务

angularjs中的run 方法使用

用于初始化全局的数据 仅对全局作用域起作用

<script type="text/javascript">

   var app = angular.module('myApp',[]);

   app.run(['$rootScope',function($rootScope){

   $rootScope.name = 'hello';

   }]);

   console.log( app );

</script>

root /home/coding/workspace/html;

angular

英 [ˈæŋgjələ(r)] 美 [ˈæŋɡjəlɚ]

有角的 用角测量的 用弧度测量的

生硬的 笨拙的

人瘦削的

a tall angular woman

又高又瘦的女人

He has a more angular figure than his father.

他的体型比他的父亲更显得有棱角.

根据该教程可知，路由有三种设置。

第一种，设置在 Module 的 Config 阶段，设置 routeProvider，提供简单的 template 模板字符串，当被该路径模式被请求时，将 template 模板字符串渲染在 ng-view 位置。

$routeProvider.when('/',{template:'这是首页页面'}).otherwise({redirectTo:'/'});

第二种，设置 templateUrl，且页面文件中存在 type为text/ng-template 的模板 js 片段，将会搜索 id 等于 templateUrl 的模板 js，并渲染在 ng-view 的位置。

<script type="text/ng-template" id="a.b">...</script>
$routeProvider.when('/',{templateUrl:'a.b'}).otherwise({redirectTo:'/'});

第三种，设置 templateUrl，如果页面文件中不存在与 tempalteUrl 相匹配的 js 模板，则通过相对路径向服务器请求资源，请求完毕再渲染出来。

$routeProvider.when('/',{templateUrl:'view/tamplate.html'}).otherwise({redirectTo:'/'});