Dependency Injection pattern in Angular

(DI) is a software design pattern that
deals with how components get hold of their dependencies.
The Angular injector subsystem is in charge
of creating components, their ,
and them to other components as requested.

Angular modules have the opportunity to configure
themselves before the module actually bootstraps and
starts to run.
This phase is the only part
of the Angular flow that can
modify things before the
app starts up.
The only services that can
be injected in this block
are and ;
Executed at begining of the
application;
Similar with the
method in other
programming languages;
Any service can be injected
here.

singleton objects that are instantiated only once per
application;
lazy-loaded (created only when necessary);
provide a way to share data and behavior across
controllers, directives, filters or other services;
How to create a service?
Build your own DI system
.constant();
.value();
.service();
.factory();
.provider();

used for registering a constant service such as string,
number, array, object or function;
doesn't have the ability to use other services (have
dependencies);
angular
.module('myApp', [])
.constant('apiUrl', 'http://localhost:8080')
.config(['apiUrl', function(apiUrl){
//apiUrl can be used here
}])
.run(['$rootScope', function($rootScope){
//apiUrl can be used here
}]);

used for registering a value service such as string,
number, array, object or function;
doesn't have the ability to use other services (have
dependencies);
angular
.value('objectValue', {
foo: 'bar'
})
.run(['$rootScope', 'objectValue',
function($rootScope, objectValue){
$rootScope.foo = objectValue.foo;
}
]);

used for registering a
service factory which will be
to return the
;
ability to use other services
(have dependencies);
service initialization;
delayed/lazy initialization.
angular
.factory('myFactory', function(){
var data; //private variable
return {
fetchData: function(){
//business to populate data
},
getData: function(){
return data;
}
}
})
.run(['$rootScope', 'myFactory',
function($rootScope, myFactory){
myFactory.fetchData();
$rootScope.data = myFactory.getData();
}
]);

used for registering a
service constructor which
will be invoked
with to create the
;
same as factory;
angular
.service('myService', function(){
this.fetchData= function(){
};
this.getData= function(){
return data;
};
});
.factory('myService', function(){
var Service = function(){
this.fetchData= function(){
};
this.getData= function(){
return data;
};
};
return new Service();
});

, whose instance is responsible for
' ' a ;
can have additional methods that allow configuration
of the provider or it's returning service;
must have a :
that returns the factory service;
ability to use other services (have dependencies);

angular
.provider('myFactory', function(){
var configVar = 'value';
//The factory Service - can have any dependency
this.$get = ['$http', function($http){
return{
fetchData: function(){
},
getData: function(){
return data;
}
};
}];
//Config method
this.config = function(config){
configVar = config;
};
})
.config(['myFactoryProvider', function(myFactoryProvider){
myFactoryProvider.config('Overriden value');
}])
.run(['$rootScope', 'myFactory',
function($rootScope, myFactory){
myFactory.fetchData();
$rootScope.data = myFactory.getData()
}
]);

Angular comes with several built-in services like:
$http / $httpProvider;
$compile / $compileProvider;
many more.
The is a convention to point that the service comes
from the framework and it is not custom-made;

All the providers (services) are .
That means that they are all ;
A constant is a value that can be injected everywhere.
The value of a constant can never be changed;
A value is just a simple injectable value;
A service is an injectable constructor;
A factory is an injectable function;
A provider is a configurable factory.

module is a core Angular module for basic routing.
The module provides the directive, in order to render
the appropriate template.
Any time the route is changed the directive will update it's
content:
if there is a template associated with the current route:
link the controller (if specified) with the scope;
link the new scope with the new template;
remove the last view and clean the last scope;
create a new scope - inherited from the parent;

To create routes on a specific module or app,
exposes the .
To add a specific route, has the
method
$routeProvider
.when('path', {
template: '',
templateUrl: '',
controller: '',
controllerAs: ''
//...
})
.otherwise(routeConfigObj);

<html ng-app="myApp">
<head>...</head>
<body>
<header>
<h1>My app</h1>
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/about">About</a></li>
</ul>
</header>
<div class="content">
<div ng-view></div>
</div>
</body>
</html>
angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'home';
}]
})
.when('/about', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'about';
}]
})
.otherwise({redirectTo: '/'});
}]);
Plunker Example

Dependency Injection pattern in Angular

Dependency Injection pattern in Angular

More Related Content

What's hot

Viewers also liked

Similar to Dependency Injection pattern in Angular

More from Alexe Bogdan

Recently uploaded

Dependency Injection pattern in Angular