Creating Angular Services
Services are Great
- Share code, functions, and data across modules
- Gives us flexibility the same way "require" does
- Helps us with the single responsibility principle and separation of concerns
"Service"
A service is a "singleton". A single object shared anywhere it is injected.
"Factory"
Even though they are called Factories, these are still just singletons.
Two Flavors Same Taste
Service
Instance
Controllers
Factory
Instance
Controllers
Why Use One?
- Best when you need to share one copy of data across multiple locations. "Shopping Cart"
- Double Plus Good for sharing a set of functions which don't need any persistent data. "$http"
Make a Service
mainApp.service('CalcService', function(){
this.square = function(a) {
return a * a;
}
});
- Use 'this' keyword to define what will be a public member of the service.
- The 'service constructor' doesn't return anything.
- Essentially, the function is a constructor function, invoked with the new keyword
Make a Factory
mainApp.factory('MathService', function() {
var factory = {};
factory.square = function(a) {
return a * a;
}
return factory;
});
- Instead of acting like a constructor, factories instantiate an object, then return that object.
- This returned object is *STILL A SINGLETON* which will be created once per app, not once per injection.
Why Two?
Frankly, it's unclear to the community why there are two.
Most people have agreed that the best practice is to use factories, because we get slightly more flexibility.
All Together Now
var application = angular.module('app',[]);
.controller("MainController",
function($scope, MathService, CalcService){
console.log(MathService.square(2));
console.log(CalcService.square(2));
}
}
application.service('CalcService', function(){
this.square = function(a) {
return a * a;
}
});
application.factory('MathService', function() {
var factory = {};
factory.square = function(a) {
return a * a;
}
return factory;
});
Questions?
Creating Angular Services
By Tyler Bettilyon
Creating Angular Services
- 1,414