Services are singleton objects that provide any functionality that you want to use throughout an application. There are some useful built-in services that come with AngularJS for common tasks such as making HTTP requests. Some key AngularJS are delivered as services, including the $scope and $filter objects that I used in the earlier example. Since this is AngularJS, you can create your own services, a process that I demonstrate briefly here and describe in depth in
Singleton means that only one instance of the object will be created by AngularJS and shared between the parts of the application that need the service. Three of the methods defined by the Module object are used to create services in different ways: service, factory, and provider. All three are closely related. We are going to use the service method to create a basic service to consolidate some of the logic in following example, as shown below.
Creating a Simple Service in the example.html File
<!DOCTYPE html>
AngularJS Demo
<body>
Today is {{day || "(unknown)" | dayName}}
Tomorrow is {{day || "(unknown)" | dayName}}
</body>
</html>
The service method takes two arguments: the name of the service and a factory function that is called to create
the service object. When AngularJS calls the factory function, it assigns a new object that is accessible via the this
keyword, and we had use this object to define today and tomorrow properties. This is a simple service, but it means we can access the today and tomorrow values via my service anywhere in our AngularJS code—something that helps simplify the development process when creating more complex applications.
Notice that we are able to use the server from within the controllers, even though we call the service method after we call the controller method. We can create our component in any order, and AngularJS will ensure that everything is set up correctly before it starts calling factory functions and performing dependency injection.
We can access our service by declaring a dependency for my days service, see example below-
...
myApp.controller("tomorrowCtrl", function ($scope, days) {
...
AngularJS uses dependency injection to locate the days service and pass it as an argument to the factory
function, which means we can then get the value of the today and tomorrow properties and use the $scope service to
pass them to the view.
...
myApp.controller("tomorrowCtrl", function ($scope, days) {
$scope.day = days.tomorrow;
});
...
As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.
Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.