javascript - Priority and hierarchy of execution of services in angularjs -

javascript - Priority and hierarchy of execution of services in angularjs -

what priority of services in angularjs , order of execution? please explain concepts below examples: service, provider, factory, config, controller, constant, value , run execute first, sec , on.

thanks in advance.

it's easy see hierarchy of execution playing console.log(). can see in this snippet, execution order is:

=> run => factory => service => provider

run gets executed after injector created , used kickstart application. it's closest thing main method in angular.

the illustration contains other angularjs components too, showing order of execution in general. check out console more details. code below same 1 in js bin, maybe you'll find more convenient analyze here.

class="snippet-code-js lang-js prettyprint-override">angular.module('app', []); /* * configuration blocks - executed during provider registrations , configuration phase. providers , constants can injected configuration blocks. prevent accidental instantiation of services before have been configured. */ angular.module('app').config(function(){ console.log('1. config: cannot inject $rootscope here'); }); /* * run blocks - executed after injector created , used kickstart application. instances , constants can injected run blocks. prevent farther scheme configuration during application run time. */ angular.module('app').run(function($rootscope){ console.log('2. run: close "main" method'); $rootscope.counter = 1; $rootscope.components = []; $rootscope.components.push({ 'name': 'run', 'order': $rootscope.counter }); }); /* * controller - scope-augmenting constructor */ angular.module('app').controller('ctrl', function($rootscope, factory, service, provider) { console.log('7. controller: set initial state & add together behavior $scope'); $rootscope.counter ++; $rootscope.components.push({ 'name': 'controller', 'order': $rootscope.counter }); }); /* * directive - used attach specified behavior dom element */ angular.module('app').directive('directive', function($rootscope) { console.log('3. directive: utilize manipulate dom'); $rootscope.counter ++; $rootscope.components.push({ 'name': 'directive', 'order': $rootscope.counter }); homecoming { controller: function() { console.log('* directive controller'); }, compile: function(){ console.log('* directive compile'); homecoming { pre: function(){ console.log('* directive pre link'); }, post: function(){ console.log('* directive post link'); } }; } }; }); /* * filter - formats value of look display user. */ angular.module('app').filter('low', function($rootscope) { homecoming function filteroutput(input) { console.log('8. filter: utilize format value'); $rootscope.counter ++; $rootscope.components.push({ 'name': 'filter', 'order': $rootscope.counter }); homecoming input.tolowercase(); }; }); /* * mill - mill recipe constructs new service using function 0 or more arguments */ angular.module('app').factory('factory', function($rootscope) { console.log('4. mill - before controller'); $rootscope.counter ++; $rootscope.components.push({ 'name': 'factory', 'order': $rootscope.counter }); homecoming 'factory'; }); /* * service - service recipe produces service value or mill recipes, invoking constructor 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 }); homecoming 'service'; }); /* * provider - provider recipe core recipe type , other recipe types 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 }); homecoming 'provider'; }); class="snippet-code-html lang-html prettyprint-override"><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>

javascript angularjs html5 angular-services