Dependency Injection @ AngularJS

Dependency Injection
@ AngularJS
Ran Mizrahi (@ranm8)
Open Source Dpt. Leader @ CodeOasis
Monday, September 9, 13

About CodeOasis
• CodeOasis specializes in cutting-edge web solutions.
• Large variety of customers (from startups to enterprises).
• We LOVE JavaScript (-:
• Technologies we love:
• Symfony2
• AngularJS
• nodeJS
• HTML5
• CSS3
• Our Microsoft department works with C#, WPF, etc.

What is Dependency
Injection???

The Problem
function SessionStore() {}
SessionStore.prototype = {
set: function(name, value) {
window.localStorage.setItem(name, value);
},
get: function(name) {
return window.localStorage.getItem(name);
}
}
function User() {
this.sessionStore = new SessionStore();
}
User.prototype = {
setSession: function(session) {
this.sessionStore.set('session', session);
},
getSession: function() {
return this.sessionStore.get('session');
}
}

The Problem
Everything goes well and the code is working.
But now we have to change the session name...
We can use a global variable:
sessionName = 'newSessionName';
function User() {
this.sessionStore = new SessionStore();
}
// ...
Maybe we should hard-coded pass it to the store:
function User() {
this.sessionStore = new SessionStore('newSessionName');
}
// ...

The Problem
How would you change the entire SessionStore
implementation?
Cookies
Server
...
function User() {
this.sessionStore = registry.get('SessionStore');
}
// ...
Should we use some global registry object??
How would we test the User??

The Problem
All those solutions are bad because:
• Couples code to one implementation.
• Hard to conﬁgure
• Cannot change the implementation without changing the
User prototype.
• Untestable code unless you monkey patch it.

Dependency Injection
Dependency injection is a software
design pattern that allows the
removal of hard-coded
dependencies and makes it possible
to change them.
-- Wikipedia

Dependency Injection To The Rescue!
Instead of instantiating the SessionStore within the User...
function User(sessionStore) {
this.sessionStore = sessionStore;
}
// ...
var user = new User(new SessionStore());
JUST INJECT IT!!!

Advantages Of Using DI
Use diﬀerent session store strategies...
}
// ...
var user = new User(new CookieSessionStore());

Conﬁguration becomes easy...
}
// ...
var user = new User(new SessionStore('mySessionName'));

Now we can easily mock the SessionStore (for testing
purposes)...
}
// ...
var user = new User(new MockSessionStore());

All those things makes our code
MAINTAINABLE
because we’ve..
Less code
Extensible
Testable

But How To Scale It?!!?!?
But what if we have a slightly more complex application..
And we do that in many diﬀerent places around our application:
var user = new User(new SessionStore(new
SomeThirdParty(jQuery), new Http(new Thing())), new
Something());
//....
Something());
//....
Something());

Don’t worry!

DI Container To The
Rescue

DI Container (e.g. Injector, Provider)
• Instantiates objects and their dependencies on demand.
• Allows to conﬁgure objects before instantiation.
• Can instantiate new objects on demand or provide existing
ones from cache.
• The objects must never know they are being managed by the
container.
• A container should be able to manage any object.

AngularJS DI

How The DI Injector Works?!
• Angular inject the requested service by the function argument
names.
• Can also be done with an array.
• Once requested Angular’s injector would instantiate the
requested service and inject it.
angular.module('myModule')
.controller('MyCtrl', MyCtrl);
function MyCtrl($http) {
$http.get('http://google.com').then(getTheMonkey);
}

The Array Notation
• Allows miniﬁers to preserve argument names for the
dependency injection to work with.
• More ﬂexible - Separates dependency declaration from your
unit.
.controller('MyCtrl', ['$http', MyCtrl]);
$http.get('http://google.com').then(getTheMonkey);
}

Changing The Implementation
.controller('MyCtrl', ['myHttp', MyCtrl])
.factory('myHttp', ['$q', myHttp]);
function myHttp($q) {
return {
get: function() {
var defer = $q.defer();
// Do something with XHR and return a promise...
return defer.promise;
}
};
}
$http.get('http://google.com').then(someCallback);
}
• Changes the implementation by changing only the array
notation.
• Angular’s injector instantiates the dependencies of each
dependency.

How Do I Use It?

Service/Factory
A service is the Angular way of exposing objects within the
$injector.
• Can have multiple dependencies that will be injected when
invoked.
.service('myHttp', ['$q', myHttp]);
this.get = function() {
};
}

Factory
Shorthand for registering services without a constructor
function (assigned to $get property directly).
.factory('myHttp', ['$q', myHttp]);
return {
get: function() {
}
};
}

Provider
Registers a provider to a service.
• Allows the save conﬁguration state to the service.
• Only constants can be injected.
• The provider is a constructor function.
• $get is a function that returns the actual service.

Provider
.provider('myHttp', myHttp);
function myHttp() {
var baseUrl;
this.baseUrl = function(value) {
if (!value) {
return baseUrl;
}
baseUrl = value;
};
this.$get = ['$q', function() {
// myHttp service implementation...
}];
}

Configuration Phase vs. Run Phase
Configuration Phase
Run Phase
• Runs before any service was instantiated.
• Only providers can be injected.
• Each provider is injected with the “Provider” suffix (e.g.
$locationProvider)
• Allows to purely configure the services state.
• Services state should be not be changed now (already
configured during run phase).
• Providers now cannot be injected.

Config
Use the service providers to configure the services state
during the config phase to the run phase.
.config(['myHttpProvider', '$locationProvider', appConfig]);
function appConfig(myHttpProvider, $locationProvider) {
// Configure app to use HTML5 History API..
$locationProvider.html5Mode(true);
// Configure my service baseUrl..
myHttpProvider.baseUrl('http://www.example.com');
}

Value
Value is a shorthand to register a simple value as a service.
.value('myHttp', 'some string');

Constant
Constant is the same as value, but unlike value it can be
injected to conﬁguration function
.constant('someConstant', '123');

Angular’s DI In Testing
describe('myHttp', function() {
var mockQ = {
then: function(){}
},
http;
beforeEach(module(function($provide) {
$provide.value('$q', mockQ);
}));
beforeEach(inject(function(myHttp) {
http = myHttp;
}));
describe('#get()', function() {
it('should return a promise', function() {
// test your code here
});
});
});

Questions?
Thank you!

Dependency Injection @ AngularJS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Dependency Injection @ AngularJS

Semelhante a Dependency Injection @ AngularJS (20)

Último

Último (20)

Dependency Injection @ AngularJS