Chapter – VI
Providers that make your life easy (Part III)
Finally we are ready to talk about Angular.js
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
§
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 first part.
[Read about creating an object using factory function in
this link
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,
var app = angular.module('app', []);
app.factory('movieFactory',function() {
return {
movies: [
{ title: "Die Hard", role: "Officer John McClane", released: "1988" },
{ title: "Unbreakable", role: "David Dunn", released: "2000" },
{ title: "The Sixth Sense", role: "Dr. Malcolm Crowe", released: "1999" },
{ title: "Armageddon", role: "Harry Stamper", released: "1998" },
{ title: "Twelve Monkeys", role: "James Cole", released: "1995" }
]
};
});
app.controller('movieController', function ($scope, movieFactory) {
$scope.movies = movieFactory.movies;
});
Up there I’ve got a module named app and we declared a
factory service provider in that. Also we have a controller there. In the above
example I’ve just made a service provider with the help of angular factory
provider. We exposed a movies service with our factory. We simply created a
movies array of object literals and returned it.
Now if any controller wants to use our movies service, it
will have to inject the movieFactory first into the controller [see the
movieController function parameter]. Then we bind the movies acquired from
our movieFactory's movies array into our $scope.movies model. That’s it we are
good to go, if we write our html as follows,
<div ng-controller="movieController">
<h1><em>My Favourite Bruce Willis Movies</em></h1>
<div ng-repeat="movie in movies">
<div>{{movie.title}}</div>
<div>{{movie.role}}</div>
<div>{{movie.released}}</div>
<hr/>
</div>
</div>
We will get an output like,
Service
So factory service provider is a good way of exposing a
service. But you may not want to use the factory pattern as a way of exposing a
service. Rather you may want to take advantage of the constructor function
pattern as a way of creating a service, which is simply called service.
[Read about creating an object with construction function
in this link
If you use constructor function pattern your service
provider will look like,
var app = angular.module('app', []);
app.service('movieService',function() {
this.movies = [
{ title: "Die Hard", role: "Officer John McClane", released: "1988" },
{ title: "Unbreakable", role: "David Dunn", released: "2000" },
{ title: "The Sixth Sense", role: "Dr. Malcolm Crowe", released: "1999" },
{ title: "Armageddon", role: "Harry Stamper", released: "1998" },
{ title: "Twelve Monkeys", role: "James Cole", released: "1995" }
];
});
app.controller('movieController', function ($scope, movieService) {
$scope.movies = movieService.movies;
});
Which is just the syntactical sugar over
var app = angular.module('app', []);
function movieService() {
this.movies = [
{ title: "Die Hard", role: "Officer John McClane", released: "1988" },
{ title: "Unbreakable", role: "David Dunn", released: "2000" },
{ title: "The Sixth Sense", role: "Dr. Malcolm Crowe", released: "1999" },
{ title: "Armageddon", role: "Harry Stamper", released: "1998" },
{ title: "Twelve Monkeys", role: "James Cole", released: "1995" }
];
}
app.factory('movieFatory', function () {
return new movieService();
});
app.controller('movieController', function ($scope, movieFatory) {
$scope.movies = movieFatory.movies;
});
Provider
Then we’ve a skeleton way of creating a service which is
called provider. Angular’s provider exposes a get function by which we can get
a reference of our service. Using provider for building the movies service will
look like,
var app = angular.module('app', []);
function movieService() {
this.movies = [
{ title: "Die Hard", role: "Officer John McClane", released: "1988" },
{ title: "Unbreakable", role: "David Dunn", released: "2000" },
{ title: "The Sixth Sense", role: "Dr. Malcolm Crowe", released: "1999" },
{ title: "Armageddon", role: "Harry Stamper", released: "1998" },
{ title: "Twelve Monkeys", role: "James Cole", released: "1995" }
];
}
app.provider('movieProvider', function() {
this.$get = function getMovieService () {
return new movieService();
};
});
app.controller('movieController', function ($scope, movieProvider) {
$scope.movies = movieProvider.movies;
});
Constant & Value
Finally we’ve our two providers. They are value and constant
providers. They are almost same except for the fact that constants cannot be
changed once it is set and values cannot be injected in any configurations [we
will discuss about how to inject constants in Angular configuration later].
So let me finish by giving you two simple examples of these
two. For declaring a constant service we will write,
app.value('actorName', 'Bruce Willis');
app.controller('movieController', function ($scope, movieProvider, actorName) {
$scope.movies = movieProvider.movies;
$scope.actor = actorName;
});
Here, we’ve created a value service provider which will
provide us an actor name in our controller so that we could use it in our view
like
<div ng-controller="movieController">
<h1><em>My Favourite {{actor}} Movies</em></h1>
<div ng-repeat="movie in movies">
<div>{{movie.title}}</div>
<div>{{movie.role}}</div>
<div>{{movie.released}}</div>
<hr/>
</div>
</div>
And last of all we can create a constant service provider
similarly like the value provider service as
app.constant('actorName', 'Bruce Willis');
app.controller('movieController', function ($scope, movieProvider, actorName) {
$scope.movies = movieProvider.movies;
$scope.actor = actorName;
});
And the html is same as it’s in the value service provider.
Later we will see how we can inject configuration settings in an Angular app
through constant service providers.
I guess now you are clear about this hard to catch topics of
Angular. I tried to manage simple example of them for you. Hope you like them.
See you in the next post with a new topic.
