一、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
服务/阶段providerfactoryservicevalueconstantconfig阶段YesNoNoNoYesrun 阶段YesYesYesYesYes四、例子
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); } } }]);转载于:https://www.cnblogs.com/shawnhu/p/8462304.html
