Priority and hierarchy of service execution in angularjs

Question

What is the priority of services in AngularJS and what is the order of their execution? Please explain the examples below with examples: service, provider, factory, config, controller, constant, value and start
What will be executed first, then second, etc.

Thanks in advance.

Answer 1

It is easy to see the hierarchy of performance by playing with console.log(). As you can see in this snippet , the order of execution:

• => Run
• => Factory
• => Service
• => Provider

Run . main Angular.

AngularJS, . . console. , JS Bin, , .

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

<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>