Make Your Coding Life Easy With Providers (AngularJS Providers)

Introduction

If you are running wild with AngularJS, then you may know you can implement business logic in your controllers and use them in different parts of your application just by calling them. But as we all know, too much code in one place is never a good idea. And it is considered to be a good habit not to write complete business logic in a controller because you may have to use those same logics again in another controller. So doing the same thing over and over again is an overkill and also error prone.

Background

So in this article, I’m going to show you how AngularJS providers can make your coding life cycle easier by separating these business logic from your controllers and prevent from injecting bugs in your application.

Getting Started

So let’s start by creating a simple object in JavaScript. There are many ways of creating an object in JavaScript but I’m going to show you the easiest and most granted way. And that is known as creating an object by object literals. Firstly, I want to create an arnoldSchwarzenegger (A Hollywood Actor) object. The object will have a property for holding the first name of the actor, a property for the last name, a property for the catch phrase and lastly a property which will make a string with all those previous properties and show it to the application users.

Using the Code

Creating an object literal is as easy as pie. It is just some key value pairs. All you have to do is to define a key [a string representing the property name] and a value associated with it. So from that concept, our Arnold Schwarzenegger object literal will look like the following code snippet:

Now if you call the sayCatchPhrase property like this:
You will get the string given below.

"Arnold Schwarzenegger says Hasta la vista, baby"

Remember to add those first brackets when you call sayCatchPhrase. Since JavaScript don’t have methods for an object, you can bypass this rule by encapsulating a function within a property.

Now it’s time to create the clintEastwood object. All is same as before.
"Clint Eastwood says Go ahead. Make my day”

Factory Pattern

Now let’s create another one. Wait a second!!! You may ask yourself why am I doing the same thing over and over again. Why don’t I just define a class and declare those properties in that class. Then when the time comes, I just instantiate an object of that class and use those properties. Well you are right about the fact that we are doing the same thing over and over again but to our utter luck we don’t have the concept of class in JavaScript.

But don’t worry because where there is a will there is a way. Functions are like the first class citizen in JavaScript language. We can do almost anything with functions. And we can also create an object within a function and return that object. Functions like these are called factory functions.

So creating and returning an actor object with a factory function looks like this:
"Clint Eastwood says Go ahead. Make my day”

I hope you like the way I create an object with factory function to restrict myself from doing the same thing again and again. There is another way we can create an object.

Constructor Pattern

Okay, I've shown you how to create an object using JavaScript factory functions. So far so good. Now let me show you another way of creating an object in JavaScript. This workaround includes creating an object using constructor functions. Following this pattern, you would create an object like below:
Except for some minor changes, everything is almost the same as before. As you can see, when we create an object using the constructor function, we always keep the variables [variable to which the constructor function holds its reference] first letter capitalized. Also we have used this and then the property name of the object. Rather than using a colon ( : ) to assign a property value to one of the passed in parameters, here we simply assign it using an equal ( = ) sign. Last but not the least, we called that constructor function by creating a new instance of it.
The output is same as before:

"Clint Eastwood says Go ahead. Make my day”

So what is the main difference between these two patterns for creating a JavaScript object? If we create an object with constructor function, the object is born with a type. Means our clint is an Actor type. You can check it in browsers developer console by simply writing clint instanceof Actor which will return true. But creating an object with a factory function doesn't have a type. Also you would use the constructor function pattern when creating an object of a type is too frequent.

AngularJS Providers

Finally, we are ready to talk about AngularJS providers. To be precise, there are five types of providers by which you can provide services or information as data [don’t mix up services with Angular’s own service provider] throughout your application. All you have to do is to define a service type in your application once and use that for lifetime anywhere in your app. Service Types are the following:

• Factory
• Service
• Provider
• Value
• Constant

Objects are main delivery vehicles to ride through different parts of your application and deliver information or services. Angular service providers are ways of creating service objects in some different ways.

Factory

First in the list is the factory. As its’ name goes, creating services with it follows factory function pattern. We discussed about factory function as a way of creating an object in Factory Pattern section.

Nothing new here except for some syntactical sugar on top of the factory function. So if you have an Angular module defined in your app, creating a service using the factory service in that module is something like this: