AngularJS Training

- Day #7
By
George

Agenda
Services
Injecting dependencies in services
Examples

Factory
Injecting dependencies in services
Examples

Provider
Injecting dependencies in services
Examples

Services
Services are singletons, which are objects that are
instantiated only once per app by the $injector
They provide an interface to keep together methods that
relate to a specific function.
Angular comes with several built-in services with which
well interact consistently.
It will also be useful to make our own services for any
complex application.
AngularJS makes it very easy to create our own services,
simply by registering the service. Once a service is
registered, the Angular compiler can reference it and load it
as a dependency for runtime use.

Why Services ?

Consider above diagram. Here we divide our application in two controllers: 1. Profile and 2. Dashboard.

Each of these controllers require certain user data from server.

Thus instead of repeating the logic to fetch data from server in each controller, we create a User
service which hides the complexity.

AngularJS automatically inject User service in both Profile and Dashboard controller.

Thus our application becomes for modular and testable.

Injecting dependencies in services

Dependency injection mainly reduces the tight coupling of code and create
modular code that is more maintainable and testable.

You can define a service which does certain tasks and inject it wherever you
want.

In that way you are sure your tested service code works without any glitch.

Services
AngularJS services are created using the
service() function on a module.
Here is an example:

http://jsfiddle.net/thomporter/zjFp4/1/

service simple calculator

javascript function object

Service is that that its instantiated with the new keyword.

Constructor:

This is a typical JavaScript constructor function. Now whenever we invoke the Person function
using the new keyword, this will be bound to the newly created object.

Now lets add a method onto our Persons prototype so it will be available on every instance of
our Person class.

javascript function object

Now that we have our Person constructor function and our sayName function on its
prototype, lets actually create an instance of Person then call the sayName function.

What will happen next ?

services

This should look very familiar since we did the exact same thing with our factory

services ...

Now, well attach all of our methods that will

be available in our controller to this.

Now just like in our factory, setArtist,

getArtist, and callItunes will be available in
whichever controller we pass myService
into.

Factory

When youre using a Factory you create an object, add properties to it, then
return that same object.

When you pass this service into your controller, those properties on the
object will now be available in that controller through your factory.

Examples

Now lets add some private variables to our callback function.

These wont be directly accessible from the controller, but we will eventually set up
some getter/setter methods on service to be able to alter these private variables
when needed.

Examples ...

Providers

Providers are the only service you can pass into your .config() function

Use a provider when you want to provide module-wide configuration for your service object
before making it available.

Provider

Providers as having three sections.

The first section is the private variables/functions that will be modified/set later

The second section is the variables/functions that will be available in your app.config
function

Its important to note that those variables need to be attached to the this keyword. In our example,
only thingFromConfig will be available to alter in the app.config

The third section is all the variables/functions that will be available in your controller when
you pass in the myProvider service into that specific controller.

Providers ...

The only properties/methods that available

in your controller are those properties /
methods which are returned from the $get()
function

Full Provider code looks like this

Providers ...

Now just like in our factory and Service, setArtist, getArtist, and callItunes will be
available in whichever controller we pass myProvider into. Heres the myProvider
controller (which is almost exactly the same as our factory/Service controller).

provider @ app.config

Alter some variables through the app.config function before the final object is passed
to the rest of the application.

Now you can see how thingFromConfig is as empty string in our provider, but when
that shows up in the DOM, it will be This sentence was set.

When should i use them?

Factory is mostly preferable in all cases. It
can be used when you have constructor
function which needs to be instantiated in
different controllers.
Service is a kind of Singleton Object. The
Object return from Service will be same for
all controller. It can be used when you
want to have single object for entire
application. Eg: Authenticated user details.

Provider / Factory / Service