- Compare services/factories in Angular
- Describe and consider use cases for the Singleton pattern
- Create your own service or factory in an Angular app
- Manage data across controllers with a service.
- Objects that are wired together using dependency injection (DI).
- You can use services to organize and share code across your app.
- Angular only instantiates a service when an application component depends on it.
- Singletons
- Each component dependent on a service gets a reference to the single instance generated by the service factory
- When you hear the word "Singleton", think, an object which can only be instantiated one time.
- Actual definition, "A pattern which ensures a class only has one instance, and provides a global point of access to it.
- If the object's constructor is called again, it just returns the same instance created before.
Q: How do we share data from one controller to another in Angular? (The first thought might be to use $rootScope and pass it to each of our controllers..but there is a better way!)
A: We don't. If two controllers need common data it should live in a service that we then inject into both controllers.
angular
.module("learnServices", [])
.factory('menuFactory', function(){
var dishes = ['Plate', 'Bowl', 'Fork', 'Spoon'];
return {
getAllDishes: function() {
return dishes;
},
getDish: function(i){
return dishes[i];
},
getUtensils: function(){
return dishes.filter((item) => {
return ((item === 'Fork') || (item === 'Spoon'))
})
}
}
}).controller('utensilController', function(menuFactory){
// I now have access to all the methods/properties returned from the personFactory!
}).controller('dinnerwareController', function(menuFactory){
// I now have access to all the methods/properties returned from the personFactory!
}
angular
.module("learnServices", [])
.service('menuService', function(){
this.getAllDishes = function() {
return dishes;
}
this.getDish = function(i){
return dishes[i];
}
this.getUtensils = function(){
return dishes.filter((item) => {
return ((item === 'Fork') || (item === 'Spoon'))
})
}
}).controller('utensilController', function(menuService){
// I now have access to the menuService!
}).controller('dinnerWareController', function(menuService){
// I now have access to the menuService!
})
Use the singleton pattern in plain javascript to create an object that stores a list of instructors. Add Mike, Wes, Robby, and Ben to the list. Get a second instance of the singleton and verify that the four instructors are still in the list.
Many resources and examples will lean towards factories, however, the new ES2015 syntax can make services preferable. Be aware of both of these and the differences between them.
To read more about the differences and why some choose factories over services and vise versa - check out these articles:
ng-newsletter: The short guide to service definitions
Service VS Factory - ONCE AND FOR ALL
AngularJS: Factory vs Service vs Provider
Answer the following questions:
- What is a service? What problem do they solve for us?
- What is a singleton? Why would we use them?
- What is the difference between a factory, service and provider?
- Name at least 3 angular built in services that we have used so far.
Let's try a more robust example. Using both the built-in $http
service and also a custom service, build an app That
Build an Angular app with at least two controllers, two templates, and a service or factory. This app should show the current value of two different crypto currencies. Use a different controller for each template, but calculate the value of the cryptocurrency with a request made from your service. Then inject that service to each controller.
Here is a sample GET request to the cryptonator api.
https://api.cryptonator.com/api/ticker/btc-usd
This will return the following object:
{
"ticker": {
"base":"ETH",
"target":"USD",
"price":"11.99255421",
"volume":"42962.52719390",
"change":"-0.00093119"
},
"timestamp":1476735394,
"success":true,
"error":""
}
Here are a few other cryptocurrency pairs, the full list supported by the API is available here:
https://api.cryptonator.com/api/ticker/eth-usd
https://api.cryptonator.com/api/ticker/trump-usd
https://api.cryptonator.com/api/ticker/nav-usd
https://api.cryptonator.com/api/ticker/rep-usd