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);
            }
        }
    }]);

转载于:https://www.cnblogs.com/shawnhu/p/8462304.html