How to use Service, Factory, Value, Constant, Decorator, Provider in AngularJS?

There are many parts in AngularJS framework that developers need to understand properly in order to make most of the framework to write well crafted web apps. In this post, I’ll tell you how to use Service, Factory, Value, Constant, Decorator, Provider in AngularJS.

What is a provider?

AngularJS uses $provide to register new providers. The providers basically create new instances, but only once for each provider. The $provide has six methods to create custom providers. Use $provider to create the following in your application.

  • Service
  • Factory
  • Value
  • Constant
  • Decorator
  • Provider – all the other providers above uses Provider internally.

How to use a service?

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

Angular services are:

  • Lazily instantiated – Angular only instantiate 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.

Note: Like other core Angular identifiers, built-in services always start with $ (e.g. $http).

How to use a Factory Service?

One of the type of service that can be created using AngularJS is a Factory service. To define a factory service, two parameters need to be given, a service name and a JavaScript function like the snippet below. This function can return an object or value, etc. The same will be available anytime when requested.

How to use a Service Service?

One of the type of service that can be created using AngularJS is a Service service. To define a factory service, two parameters need to be given, a service name and a JavaScript function like the snippet below. The only difference between this and Factory service is that Angular will try to new up the associated JavaScript function.

How to use a Value & Constant Service?

We often need some data that is globally available but at the same time we do not want to pollute the global (window) namespace with the definition for this data. Angular provides us the value and constant services which can do exactly this. Values and constants declared in this way can be injected into any controller or service like any other dependency (e.g. $scope, $http, etc.).

Use constant service to define constants for your application that will not change. Example, App title, description, url, etc. A constant can be injected everywhere. A constant can not be intercepted by a decorator, that means that the value of a constant can never be changed.

Use value service to define values or object that can be changed in the life-time of the application. Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.

How to use a Decorator Service?

A decorator can modify or encapsulate other providers. There is one exception and that a constant cannot be decorated. Modify an existing service like snippet below:

How to use a Provider Service?

A provider allows you to have a complex creation function and configuration options. A provider is actually a configurable factory. The provider accepts an object or a constructor. Example, use this if you would like to make a service that needs user input. A provider allows you to add configuration and $get, a factory method which gets instantiated using the configuration in the provider. Look at the snippet below:

How to use any service in a controller?

In order to use angularJS dependency injection, the names of your custom services must be unique as the module loader will look for one in the registered services to give back to the caller. The built-in services can be just called anywhere in the same manner as a custom service. The built-in services starts with a ‘$’ like $http, $log, etc.

If you would like to learn more about how to integrate AngularJS and TypeScript, refer to my AngularJS posts. If you want to learn something specific then get in touch and I’ll write a post about it.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger