• Like
  • Save
AngularJS $Provide Service
Upcoming SlideShare
Loading in...5
×
 

AngularJS $Provide Service

on

  • 5,198 views

AngularJS $Provide Service

AngularJS $Provide Service

Statistics

Views

Total Views
5,198
Views on SlideShare
2,433
Embed Views
2,765

Actions

Likes
3
Downloads
47
Comments
0

9 Embeds 2,765

http://www.scoop.it 1981
http://eyalvardi.wordpress.com 766
https://eyalvardi.wordpress.com 9
https://mail.google.com 3
http://tech.d8p.it 2
https://www.google.co.kr 1
http://translate.googleusercontent.com 1
https://twitter.com 1
https://www.google.co.in 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AngularJS $Provide Service AngularJS $Provide Service Presentation Transcript

    • Service Factory Provider
    • var myModule = angular.module('myModule', []); myModule.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; }); });
    • Step 1: Invoke the function before the config stage. No args. angular.module('myApp', []) .provider('myPro', function() { console.log('myApp => Create provider => retrun object with $get'); return { isTrue: false, $get: function b($http) { Step 2: This object will be available in config stage as injectable service. The name is "myProProvider". var self = this; Step 3: $get func is a factory func for the service, invoke only if needed and only once. Available after the config stage. console.log('myApp => my Provider $get => retrun func'); return function c(msg) { console.log(msg + " isTrue: " + self.isTrue); }; Step 4: The injectable service. } }; }); app.config(function (myProProvider) { myProProvider.isTrue = true; console.log('myApp --> config'); });
    • function provider(name, provider_) { Step 1: Invoke the function before the config stage. No args. 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 2: This object will be available in config stage as injectable service. The name is "[name + providerSuffix]".
    • Step 1: factory func for the service, invoke only if needed and only once. Available after the config stage. angular.module('myApp', []) .factory('myfac', function ($http) { console.log('myApp -> Create factory'); return function (msg) { console.log(msg); Step 2: The injectable service. }; }); app.run(function ( myfac ){ console.log('myApp --> run'); myfac("test"); });
    • 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); }; });
    • 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); }; } } );
    • 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!
    • 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!
    • 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!
    • function value(name, value) { return factory(name, valueFn(value)); } function valueFn(value) {return function() {return value;};} // Sample Code myApp.value('awesome', 'awesome data');
    • // AngularJS Constant Code function constant(name, value) { providerCache[name] = value; instanceCache[name] = value; } // Sample Code angular.module('myApp', []) .constant('PI', 3.14) .config(function (PI) { ... });
    • $provider.decorator('$log', ['$delegate', function ($delegate) { $delegate.warn = $delegate.error; return $delegate; }]); $log
    • function decorator(serviceName, decorFn) { var origProvider = providerInjector.get(serviceName + providerSuffix), orig$get = origProvider.$get; Override the $get function. origProvider.$get = function() { var origInstance = instanceInjector.invoke(orig$get, origProvider); return instanceInjector.invoke( decorFn, null, { $delegate: origInstance } ); }; } Invoke the decoFn with original service instance as argument.
    • eyalvardi.wordpress.com