angularjs中服务执行的优先级和层次结构

Question

AngularJS中服务的优先级是什么，执行顺序是什么？ 请通过示例解释下面的概念： 服务，提供商，工厂，配置，控制器，常数，价值和运行
先执行什么，然后再执行第二步等等。

提前致谢。

Answer 1

通过玩console.log()很容易看出执行的层次结构。正如您在this snippet中看到的那样，执行顺序为：

1. 的 =＆GT;运行
2. 的 =＆GT;工厂
3. 的 =＆GT;服务
4. 的 =＆GT;提供商

Run在创建注入器后执行，并用于启动应用程序。它与Angular中的main方法最接近。

该示例还包含其他AngularJS组件，一般显示执行顺序。查看console了解更多详情。 下面的代码与JS Bin中的代码相同，也许你会发现在这里分析它更方便。

＆＃13;
＆＃13;
angular.module('App', []);

/*
 * Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
 */
angular.module('App').config(function(){
  console.log('1. Config: You cannot inject $rootScope here');
});

/*
 * Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
 */
angular.module('App').run(function($rootScope){
  console.log('2. Run: Close to a "main" method');
  $rootScope.counter = 1;
  $rootScope.components = [];
  $rootScope.components.push({
    'name': 'Run',
    'order': $rootScope.counter
  });
});

/*
 * Controller - the scope-augmenting constructor
 */
angular.module('App').controller('Ctrl', function($rootScope, Factory, Service, Provider) {
  console.log('7. Controller: Set up the initial state & add behavior to $scope');
  $rootScope.counter ++;
  $rootScope.components.push({
    'name': 'Controller',
    'order': $rootScope.counter
  });
});

/*
 * Directive - used to attach a specified behavior to a DOM element
 */
angular.module('App').directive('directive', function($rootScope) {
  console.log('3. Directive: Use to manipulate the DOM');
  $rootScope.counter ++;
  $rootScope.components.push({
    'name': 'Directive',
    'order': $rootScope.counter
  });
  
  return {
    controller: function() {
      console.log('* Directive controller');
    },
    compile: function(){
      console.log('* Directive compile');
      return {
        pre: function(){
          console.log('* Directive pre link');
        },
        post: function(){
          console.log('* Directive post link');
        }
       };
     }
   };  
});

/*
 * Filter - formats the value of an expression for display to the user.
 */
angular.module('App').filter('low', function($rootScope) {
  return function filterOutput(input) {
    console.log('8. Filter: Use to format a value');
    $rootScope.counter ++;
    $rootScope.components.push({
      'name': 'Filter',
      'order': $rootScope.counter
    });
    
    return input.toLowerCase();
  };
});

/*
 * Factory - the Factory recipe constructs a new service using a function with zero or more arguments
 */
angular.module('App').factory('Factory', function($rootScope) {
  console.log('4. Factory - before controller');
  $rootScope.counter ++;
  $rootScope.components.push({
    'name': 'Factory',
    'order': $rootScope.counter
  });
  return 'Factory';
});

/*
 * Service - the Service recipe produces a service just like the Value or Factory recipes, but it does so by invoking a constructor with the new operator.
 */
angular.module('App').factory('Service', function($rootScope) {
  console.log('5. Service - before controller');
  $rootScope.counter ++;
  $rootScope.components.push({
    'name': 'Service',
    'order': $rootScope.counter
  });
  return 'Service';
});

/*
 * Provider - the Provider recipe is the core recipe type and all the other recipe types are just syntactic sugar on top of it.
 */
angular.module('App').factory('Provider', function($rootScope) {
  console.log('6. Provider - before controller');
  $rootScope.counter ++;
  $rootScope.components.push({
    'name': 'Provider',
    'order': $rootScope.counter
  });
  return 'Provider';
});
＆＃13;
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>

<section ng-app="App" ng-controller="Ctrl" class="jumbotron">
  <ul directive>
     <li ng-repeat="item in components | orderBy:'order'">
       <b>{{item.order}}</b> => {{item.name}}
     </li>
  </ul>

  <p>A quick overview of {{'ANGULAR FLOW' | low}}.</p>
</section>
＆＃13;
＆＃13;
＆＃13;