Providers that make your life easy (Part I)

Chapter – VI

Providers that make your life easy (Part I)

In the previous post I've shown you how you can implement business logics 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 a whole amount of business logics in a controller cause 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.

So in this chapter I’m going to show you how Angular.js providers can make your coding life cycle easier by separating these business logics from your controllers and prevent from injecting bugs in your application.

Ok sounds fine, but there is a catch! Before I make your head spin with those topics of Angular, let’s take a step back to some object oriented JavaScript. You may ask yourself why? The answer is be patient my friend!

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. First of all 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 last of all a property which will make a string with all of those previous properties and show it to the application users.

Creating an object literal is as easy as pie. It is just some key value pair. 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 this,

var arnoldSchwarzenegger = {

            firstName: "Arnold",

            lastName: "Schwarzenegger",

            catchPhrase: "Hasta la vista, baby",

            sayCatchPhrase: function () {

                return this.firstName + " " + this.lastName + " says " + this.catchPhrase;

            }

};

Now if you call the sayCatchPhrase property like this

arnoldSchwarzenegger.sayCatchPhrase();

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.

var clintEastwood = {

            firstName: "Clint",

            lastName: "Eastwood",

            catchPhrase: "Go ahead. Make my day",

            sayCatchPhrase: function () {

                return this.firstName + " " + this.lastName + " says " + this.catchPhrase;

            }

};

clintEastwood.sayCatchPhrase();

"Clint Eastwood says Go ahead. Make my day”

Now let’s create another one. Wait a sec!!! 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,

var actor = function (firstName, lastName, catchPhrase) {

            return {

                firstName: firstName,

                lastName: lastName,

                catchPhrase: catchPhrase,

                sayCatchPhrase: function () {

                    return this.firstName + " " + this.lastName + " says " + this.catchPhrase;

                }

            };

};

var clint = actor("Client", "Eastwood", "Go ahead. Make my day");

clint.sayCatchPhrase();

"Clint Eastwood says Go ahead. Make my day”

As you can see I've declared a function with some parameters. In that function we set the passed in parameters in an object literal and then return that to hold the reference into actor variable. Then all we did is called the actor function with some parameters.

I hope you liked the way I create an object with factory function to restrict myself from doing the same thing again and again. There is another way by which we can create an object. But that will be discussed in the next part.