Dot Net Stuff

Defining Services in AngularJS


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.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and Module.run methods.

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.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus