{"id":14359,"date":"2014-06-29T21:21:45","date_gmt":"2014-06-29T15:51:45","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=14359"},"modified":"2017-08-03T16:00:41","modified_gmt":"2017-08-03T10:30:41","slug":"service-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/service-in-angularjs\/","title":{"rendered":"Service in AngularJS"},"content":{"rendered":"

When we are working on MVC<\/strong> (or MVVM<\/strong> for AngularJS<\/strong>) Design-Patterns<\/strong>, our application is loosely coupled because of different independent components defined for e.g. Controller<\/strong>, View<\/strong>, Services<\/strong>, Modal\/Data<\/strong> etc. All the components have their own work\/role but today we will discuss only Services<\/strong>.<\/p>\n

Services<\/strong> are that part of application where we write our business logic and load data (if it is frond-end framework Service e.g. AngularJS Service<\/a> then it loads data from Web Server and if it is back-end framework Service e.g. NodeJS<\/strong> Service<\/strong> then it loads data from Database Server or other Web Server). AngularJS<\/strong> also provides many built-in services<\/strong> e.g. $http<\/strong>, $q<\/strong> etc. $http<\/strong> is very commonly used service<\/strong> which helps us to load data from Web Server, we can hit Ajax request with the help of $http <\/strong>service<\/strong>, which internally hits XMLHTTPRequest<\/strong>.<\/p>\n

Generally, instead of writing Services<\/strong> we do data loading from Web-Server in Controllers<\/strong>, which is obviously a bad practice. So lets try a basic program, where we will load data from Web-Server with the help of Service<\/strong> instead of writing the code into Controller<\/strong>.<\/p>\n

[js]
\nvar serviceTestApp = angular.module(‘serviceTest’, []);<\/p>\n

\/*
\n * Defining TestService, Which will load User list Asynchronously(From Web-Server).
\n * for demo purpose we are using setTimeout().
\n *
\n * $q is built-in Angular Service which helps us to implement Promise-Defer Design Pattern and
\n * will be injected to TestService by AngularJS via DI(Dependency Injection) Design Pattern.
\n * *\/
\nserviceTestApp.service(‘TestService’, function ($q) {
\n \/\/ Defining Service function: getUsers which will load user list
\n this.getUsers = function () {
\n var deferred = $q.defer();
\n setTimeout(function () {
\n var users = [
\n {name: "Amit Thakkar", age: 25},
\n {name: "Namita", age: 36},
\n {name: "Kanika", age: 43}
\n ];
\n deferred.resolve(users);
\n }, 2000);
\n return deferred.promise;
\n };
\n});
\n[\/js]<\/p>\n

Also, Services<\/strong> must be registered with module<\/strong>(Same as directives<\/strong>) via module.service<\/strong> API, in which first argument is the name of the Service<\/strong> and second argument is the function. Second argument function is just a constructor function that will be called with ‘new’<\/strong> keyword by AngularJS<\/strong> itself. And this Service<\/strong> will be injected to Controllers<\/strong> or other Services<\/strong> (AngularJS<\/strong> also implement Dependency Injection<\/strong> Design Pattern to inject services<\/strong> to Controllers<\/strong> and Services<\/strong>).<\/p>\n

[js]
\n\/*
\n * Defining TestController, who will use TestService to get User List.
\n * *\/
\nfunction TestController($scope, TestService) {
\n \/\/ Calling getUsers function on TestService.
\n TestService.getUsers().
\n then(function (users) {
\n $scope.users = users;
\n });
\n}
\n[\/js]<\/p>\n

AngularJS<\/strong> Services<\/strong> implement Singleton Design Pattern<\/strong> so only one object is created for an application.<\/p>\n

NOTE:<\/strong> You can checkout full working source code from this link<\/a>.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n