Aug 3, 2015

Services In Angular Js

A service is a reusable singleton object which is used to organize and share code across your app. A service can be injected into controllers, filters, directives. AngularJS offers several built-in services (like $http, $provide, $resource, $window, $parse) which always start with $ sign.
Methods to create a Service

    Service

    Factory

    Provider

    Value

    Constant

Factory

A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.
Syntax

    app.factory('serviceName',function(){ return serviceObj;})

Creating service using factory method

     <script>
    //creating module
     var app = angular.module('app', []);
    
     //define a factory using factory() function
    app.factory('MyFactory', function () {
    
     var serviceObj = {};
     serviceObj.function1 = function () {
     //TO DO:
     };
    
     serviceObj.function2 = function () {
     //TO DO:
     };
    
     return serviceObj;
    });
     </script>

When to use

It is just a collection of functions like a class. Hence, it can be instantiated in different controllers when you are using it with constructor function.
Service
A service is a constructor function which creates the object using new keyword. You can add properties and functions to a service object by using this keyword. Unlike factory, it doesn’t return anything.
Syntax

    app.service('serviceName',function(){})

Creating service using service method

     <script>
    //creating module
    var app = angular.module('app', []);
    
    //define a service using service() function
    app.service('MyService', function () {
     this.function1 = function () {
     //TO DO:
     };
    
     this.function2 = function () {
     //TO DO:
     };
     });
     </script>

When to use

It is a singleton object. Use it when you need to share a single object across the application. For example, authenticated user details.


Provider

A provider is used to create a configurable service object. It returns value by using $get() function.
Syntax

    //creating a service
    app.provider('serviceName',function(){});
    
    //configuring the service
    app.config(function(serviceNameProvider){});

Creating service using provider method

     <script>
    //define a provider using provider() function
    app.provider('configurableService', function () {
     var name = '';
     this.setName = function (newName) {
     name = newName;
     };
     this.$get = function () {
     return name;
     };
    });
    
    //configuring provider using config() function
    app.config(function (configurableService) {
     configurableService.setName('www.dotnet-tricks.com');
    });
     </script>

When to use

When you need to provide module-wise configuration for your service object before making it available.


Value
A value can be a number, string, date-time, array or object. You can also register a function as a value. Values are typically used as configuration which is injected into factories, services or controllers.

    <script>
    //define module
    var app = angular.module('app', []);
    
    //define value
    app.value("numberValue", 100);
    app.value("stringValue", "dotnet-tricks.com");
    app.value("objectValue", { name: "dotnet-tricks.com", totalUsers: 120000 });
    </script>

Constant

A constant is like as value. The difference between a value and a constant service is that constant service can be injected into a module configuration function i.e. config() but value service cannot be.

    <script>
    //define module
    var app = angular.module('app', []);
    
    //define constant
    app.constant("mynumberValue", 200);
    app.constant("mystringValue", "webgeekschool.com");
    
    //module configuration function
    app.config(function (mynumberValue) { //here value objects can't be injected
     console.log("Before:" + mynumberValue);
     mynumberValue = "New Angular Constant Service";
     console.log("After:" + mynumberValue);
    });
    </script>

No comments:

Post a Comment