正文
AngularJS config run 及区别和例子
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、config方法
在模块加载阶段，对模块进行自定义配置
config可以注入$stateProvider, $urlRouterProvider, $controllerProvider, $provide, $httpProvider等等provider,
config的工作流程：
新建一个模块，这个模块中有一个服务，一个自定义指令
var app = angular.module("myApp", []); app.fatory('myFactory',function(){//利用工厂生产 创建一个 服务var service = {}；return service；});app.directive('myDirectiive',function(){//创建 一个 自定义指令return {template：'<div><button>click me</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>'
}
});
});
在模块上添加的服务，指定等，实际上都是在config阶段配置的。
二、run方法
是应用中最先执行的方法，类似于main方法，run方法只会在angular启动的时候运行一次，定义全局的数据或逻辑，对全局作用域起作用，$rootScope上内容在多个控制器之间可以共享。例如，注册一个全局的事件监听器。每次路由发生变化时候，都执行一个函数来验证用户的权限。
angular.module('myApp', ['ngRoute']).run(function($rootScope, AuthService) { $rootScope.$on('$routeChangeStart', function(evt, next, current) { // 如果用户未登录if (!AuthService.userLoggedIn()) { if (next.templateUrl === "login.html") {// 已经转向登录路由因此无需重定向} else {$location.path('/login');}}});});
三、区别
1、执行顺序不同
config先执行，run后执行。另外，ng启动阶段是 config-->run-->compile/link
2、注入服务类型不同
config里允许注入的是provider和constance(常量)，run里允许注入的是provider和constant,还可以是factory，service，value
| 服务/阶段 | provider | factory | service | value | constant |
|---|---|---|---|---|---|
| config阶段 | Yes | No | No | No | Yes |
| run 阶段 | Yes | Yes | Yes | Yes | Yes |
四、例子
1、config方法例子
(1)、改变表达式符号
对$interpolateProvider的服务进行了初始化的配置
var app = angular.module('myApp',[]);app .config(['$interpolateProvider',function($interpolateProvider){ //要想初始配置，我们首先要做模块下面添加config方法，插入一个数组引入相应的供应商，以及相关的回调并注入//改变表达式头部的符号$interpolateProvider.startSymbol('@@');//改变表达式尾部的符号$interpolateProvider.endSymbol('@@');}]);
使用时双@显示而不是{{}}形式了：
<p>@@showText@@</p>
(2)、定义路由
var activityModule = angular.module('app.activity', [])
.run(['$log', function ($log) {
$log.debug('app.activity.run()...');
}])
.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', 'scriptDependencyProvider', '$stateProvider',
function ($controllerProvider, $compileProvider, $filterProvider, $provide, scriptDependencyProvider, $stateProvider) {
'use strict';
activityModule.controller = $controllerProvider.register;
activityModule.directive = $compileProvider.directive;
activityModule.filter = $filterProvider.register;
activityModule.factory = $provide.factory;
activityModule.service = $provide.service; $stateProvider.state('activity', {
name: 'activity',
url: '/activity',
controller: ['$scope', '$stateParams', function ($scope, $stateParams) {}],
template: '<div ui-view></div>',
resolve: scriptDependencyProvider.createDependenciesMap(scriptDependencyProvider.activity),
deepStateRedirect: false,
sticky: false
}).state('activity.activityList', {
url: '/activity/ActivityList',
template: '<activity-list-view></activity-list-view>'
});
}
]);
(3)、项目中实际配置
app.config([
'$logProvider', '$httpProvider', '$provide', '$stateProvider', '$urlRouterProvider', '$locationProvider', '$sceDelegateProvider',
function ($logProvider, $httpProvider, $provide, $stateProvider, $urlRouterProvider, $locationProvider, $sceDelegateProvider) {
// enable output $log.debug by default
var isDebug = true;
if (Global&& Global.isDebugEnabled) {
isDebug = Global.isDebugEnabled();
}
$logProvider.debugEnabled(isDebug); $httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.useXDomain = true;
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache'; // configurate app root state
var configurateRoute = function () {
$urlRouterProvider.otherwise("/default");
$locationProvider.html5Mode(false);
}; configurateRoute(); $sceDelegateProvider.resourceUrlWhitelist(['**']); //$routeProvider
// .when('/error', { templateUrl: '/app/myframework/views/error-view.html' })
// .when('/about', { templateUrl: '/app/myframework/views/about-view.html' })
// .otherwise({
// redirectTo: '/'
// }); }
]);
2、run方法例子
（1）、浏览器判断
定义一个全局逻辑，供应用的不同部分使用
.run(['$rootScope', '$route', '$window', '$location', 'Position', '$cookies', 'Request', '$cookieStore',
function($rootScope, $route, $window, $location, position, $cookies, request, $cookieStore) {
//非微信的登陆
$rootScope.isWeiXinLogin = function() {
//判断是否微信登陆
var ua = window.navigator.userAgent.toLowerCase();
//console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko) version/9.0 mobile/13b143 safari/601.1
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
console.log(" 是来自微信内置浏览器");
return true;
} else {
console.log("不是来自微信内置浏览器");
return false;
}
};
]);
控制器中使用：
angular.module('autumnswind').controller('OrderCtrl', ['$rootScope', '$scope', 'Request', '$cookies', '$window', '$routeParams', '$location', 'Tool',
function($rootScope, $scope, request, $cookies, $window, $routeParams, $location, tool) {
if ($rootScope.isWeiXinLogin()) {
...
}
}
]);
（2）、定义全局数据
var app = angular.module('myApp',[]);
app.run(['$rootScope',function($rootScope){
$rootScope.name = 'hello';
}]);
(3)、项目中例子
run中代码，最先执行，类似main方法
.run(['$log', '$templateCache', function ($log, $templateCache) {
$log.debug('app.run()...');
window.$templateCache = $templateCache;
if (GlobalObj.templateCache) {
for (var i = 0; i < GlobalObj.templateCache.templates.length; i++) {
var template = GlobalObj.templateCache.templates[i];
$templateCache.put(template.key, template.value);
}
}
}]);
