angularjs $provide service
DESCRIPTION
AngularJS $Provide ServiceTRANSCRIPT
![Page 1: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/1.jpg)
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual
C#blog: www.eVardi.com
$provide Services
![Page 2: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/2.jpg)
Agenda
AngularJS Service Overview
$provide functions:
Provider
Factory
Service
Value & Constant
Decorator
![Page 3: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/3.jpg)
Angular Services Angular services are singletons
that carry out specific tasks.
All services in Angular are instantiated lazily.
There are three functions for creating generic services, with different levels of complexity and ability:
Service
Factory
Provider
![Page 4: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/4.jpg)
Registering Services You can register the service with the module either via the
Module api or by using the $provide service in the module configuration function.
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; });});
Option I
Option II
![Page 5: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/5.jpg)
$provide functions for creating generic services
service(name, constructor) you will be provided the actual function
reference passed to module.service.
factory(name, $getFn) you will be provided the value that is returned by invoking
the function reference passed to module.factory.
provider(name, provider) you will be provided the value that is returned by invoking
the $get method of the function reference passed to module.provider.
![Page 6: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/6.jpg)
Provider Functionangular.module('myApp', [])
.provider('myPro', function() {
console.log('myApp => Create provider => retrun object with $get
');
return {
isTrue: false,
$get: function b($http) {
var self = this;
console.log('myApp => my Provider $get => retrun func');
return function c(msg) {
console.log(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.
![Page 8: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/8.jpg)
Angular Provider Function Codefunction 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 providermyApp.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]".
![Page 9: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/9.jpg)
Factory Function
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"); });
![Page 10: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/10.jpg)
Angular Factory Function Codefunction 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);
};
});
![Page 11: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/11.jpg)
Angular Factory Is Provider
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);
};
}
}
);
![Page 12: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/12.jpg)
Service Function
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!
![Page 13: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/13.jpg)
Angular Service Function Codefunction 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!
![Page 14: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/14.jpg)
Angular Service Is Provider
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!
![Page 15: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/15.jpg)
Value Function
function value(name, value) { return factory(name, valueFn(value));}
// Sample CodemyApp.value('awesome', 'awesome data');
function valueFn(value) {return function() {return value;};}
![Page 16: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/16.jpg)
// Sample Code
angular.module('myApp', [])
.constant('PI', 3.14)
.config(function (PI)
{ ... });
Constant Function Constant differs from value in that it's
accessible during config.
Constant cannot be overridden by an Angular decorator.
// AngularJS Constant Codefunction constant(name, value) { providerCache[name] = value; instanceCache[name] = value;}
![Page 17: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/17.jpg)
Angular $provide (Custom Service)
![Page 18: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/18.jpg)
Decorator Function A service decorator intercepts the
creation of a service, allowing it to override or modify the behavior of the service.
Here we decorate the $log service to convert warnings to errors by intercepting calls to $log.warn(). $provider.decorator('$log', ['$delegate', function ($delegate) {
$delegate.warn = $delegate.error;
return $delegate;
}]);
$log
![Page 19: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/19.jpg)
Angular Decorator Code
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.
![Page 21: AngularJS $Provide Service](https://reader036.vdocument.in/reader036/viewer/2022081519/554f4f0ab4c905b9508b4c17/html5/thumbnails/21.jpg)
Thankseyalvardi.wordpress.com
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual C#blog: www.e4d.co.il