AngularJS $Provide Service

12,858 views

Published on

AngularJS $Provide Service

Published in: Technology, Business

AngularJS $Provide Service

  1. 1. Service Factory Provider
  2. 2. var mi= angular.module('myModule', []); mi.factory('serviceId', function () { var shinyNewServiceInstance; //factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; }); angular.module('myModule', [], function ($provide) { $provide.factory('serviceId', function () { var shinyNewServiceInstance; //factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; }); });
  3. 3. angular.module('myApp', []) .provider('myPro', function() { console.log('myApp => Create provider => retrun object with $get'); return { isTrue: false, $get: function b($log) { var self = this; console.log('myApp => my Provider $get => retrun func'); return function c(msg) { $log.debug(msg + " isTrue: " + self.isTrue); }; } }; }); Step 1: Invoke the function before the config stage. No args. app.config(function (myProProvider) { myProProvider.isTrue = true; console.log('myApp --> config'); }); Step 2: This object will be available in config stage as injectable service. The name is "myProProvider". Step 3: $get func is a factory func for the service, invoke only if needed and only once. Available after the config stage. Step 4: The injectable service.
  4. 4. Angular register your provider ( {..} | f ) Module Config( {..} ) Execute the $get function Decorator stage Module Run( {..} | f )
  5. 5. function provider(name, provider_) { if (isFunction(provider_) || isArray(provider_)) { provider_ = providerInjector.instantiate(provider_); } if (!provider_.$get) { throw Error(...'must define $get factory method.'); } return providerCache[name + providerSuffix] = provider_; } // Register an object provider myApp.provider('awesome', { $get: function () { return 'awesome data'; } }); Step 1: Invoke the function before the config stage. No args. Step 2: This object will be available in config stage as injectable service. The name is "[name + providerSuffix]".
  6. 6. angular.module('myApp', []) .factory('myfac', function ($http) { console.log('myApp -> Create factory'); return function (msg) { console.log(msg); }; }); Step 2: The injectable service. Step 1: factory func for the service, invoke only if needed and only once. Available after the config stage. app.run(function ( myfac ){ console.log('myApp --> run'); myfac("test"); });
  7. 7. function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } // Sample Code angular.module('myApp', []) .factory('myfac', function ($http) { console.log('myApp -> Create factory'); return function (msg) { console.log(msg); }; });
  8. 8. function factory(name, factoryFn) { return provider(name, { $get: factoryFn }); } // Sample Code angular.module('myApp', []) .provider('myfac', { $get : function ($http) { console.log('myApp -> Create factory'); return function (msg) { console.log(msg); }; } } );
  9. 9. function MyService($http) { console.log('Create my Service => retrun object this.'); this.msg = 'NAN'; } MyService.prototype.log = function (val) { console.log(this.msg + val ); }; angular.module('myApp', []).service( 'myService', MyService );  Angular use the new operator to create instance.  The return object (this) is the singleton service.  Everything that uses the service will get the same instance!
  10. 10. function service(name, constructor) { return factory(name, ['$injector', function ($injector) { // instantiated with the new operator return $injector.instantiate(constructor); }]); }  Angular use the new operator to create instance.  The return object (this) is the singleton service.  Everything that uses the service will get the same instance!
  11. 11. function service(name, constructor) { return provider(name, { $get: ['$injector', function ($injector) { // instantiated with the new operator return $injector.instantiate(constructor); }] }); }  Angular use the new operator to create instance.  The return object (this) is the singleton service.  Everything that uses the service will get the same instance!
  12. 12. function value(name, value) { return factory(name, valueFn(value)); } // Sample Code myApp.value('awesome', 'awesome data'); function valueFn(value) {return function() {return value;};}
  13. 13. // Sample Code angular.module('myApp', []) .constant('PI', 3.14) .config(function (PI) { ... }); // AngularJS Constant Code function constant(name, value) { providerCache[name] = value; instanceCache[name] = value; }
  14. 14. Angular register your provider ( {..} | f ) Module Config( {..} ) Execute the $get function Decorator stage Module Run( {..} | f )
  15. 15. // Sample Code $provide.decorator('$log', function ($delegate, $http) { $delegate.warn = $delegate.error; return $delegate; }); $log You can ask any service
  16. 16. function decorator(serviceName, decorFn) { var origProvider = providerInjector.get(serviceName + providerSuffix), orig$get = origProvider.$get; origProvider.$get = function() { var origInstance = instanceInjector.invoke(orig$get, origProvider); return instanceInjector.invoke( decorFn, null, { $delegate: origInstance } ); }; } Override the $get function. Invoke the decoFn with original service instance as argument.
  17. 17. eyalvardi.wordpress.com

×