Presentation_muffin_conference_2015

Code Modularity and Dependency
Injection in AngularJS
Lyubomir Vetskov

3
12.09.2015
• Separation of Concerns
• Modular Code
• Dependency Injection
• Angular DI Implementation
• Angular Modules
• Services API
Today’s Agenda:
Code Modularity and Dependency Injection in AngularJS

4
12.09.2015
Why DI?
{…}
{…}

5
12.09.2015
We want a beer.

6
12.09.2015
…and fermentation…

7
12.09.2015
But can’t get a beer without hops…

8
12.09.2015
…and without malt…

9
12.09.2015
…water…

10
12.09.2015
…uhm…

11
12.09.2015
Confused?
All we wanted is beer. Why do we need to
know all those things?

12
12.09.2015
The old time solution
Use 1 HUGE file

13
12.09.2015
The old time solution
Large Apps === Complexity

14
12.09.2015
Solution?
Modular Code
“A Module is a separate, interfaced piece of
code that does stuff you need”
S.Reznik, http://www.hirez.io/

15
12.09.2015
Consequences
Modular Code demands:
SEPARATION
OF
CONCERNS

16
12.09.2015
Consequences
Separation Of Concerns

17
12.09.2015
SoC
“ A program that embodies SoC well is called
a modular program. Modularity, and hence
separation of concerns, is achieved by
encapsulating information inside a section
of code that has a well-defined interface.
Encapsulation is a means of information
hiding.”
~Wikipedia
OBJECT ORIENTED HTML-CSS-JSMVC

18
12.09.2015
More Rules
• Single Responsibility Principle
• Law of Demeter
Dumber Components === Maintainable Code

19
12.09.2015
Conclusion
Being Modular
means having
Dependencies

20
12.09.2015
Conclusion

21
12.09.2015
Modular Code
Writing modular code:
• Divide pieces of code into Objects
• Create a “Builder”
And then we couple them together

22
12.09.2015
Modular Code
function gatherWithFriends(){
var beer = new Beer();
…
beer.isEmpty();
}
• Forces me to know how to create the beer
• Tightly coupled to the Implementation Class
• To test – need to monkey patch Beer and remember to
clean it up

23
12.09.2015
Modular Code
function gatherWithFriends(){
//with service locator
var beer = waiter.get(“beer”);
…
beer.isEmpty();
}
• Everyone in the system needs to know about the
waiter(dependency)
• Dependencies are scattered throughout the code

24
12.09.2015
Modular Code - Solution
function gatherWithFriends(beer){
…
beer.isEmpty();
}
• Inject to the constructor
• Easier testing
• One place to see all of the dependencies

25
12.09.2015
Modular Code - Solution
function main() {
var gather = new Gather(
new Beer(new Fermentation(
new Hops, new Malt, new
Water…)))
}
• To much knowledge is in one place
• Doesn’t scale

26
12.09.2015
Dependency Injection
• Dependencies (services) are injected into
a dependent object (client)
• Separates the creation of client’s
dependencies from it’s behavior
• Allows loose coupling and follow single
responsibility principle
DEPENDENCY INJECTION
DESIGN PATTERN

27
12.09.2015

28
12.09.2015
CLIENT
I WANT BEER!
INJECTOR
SERVICE CREATORS
DO I KNOW HOW
TO CREATE BEER?
GIVE ME BEER
YES, I KNOW!
GIVE ME “BEER CREATOR”
HERE’S YOUR BEER
HERE YOU GO,
MATE
$get()

29
12.09.2015
Dependency Injection in AngularJS

30
12.09.2015
Our app needs objects
1. Someone needs to
instantiate them
2. …and to wire them
up

31
12.09.2015
Injector Service
Components
Specialized Objects:
• CONTROLLERS
• DIRECTIVES
• FILTERS
Services:
• PROVIDER
• FACTORY
• SERVICE
• VALUE
• CONSTANTnon-injectable
injectable
Service
Creators

32
12.09.2015
Code snippet
.controller('myCtrl',
function(beer) {
beer.isEmpty();
});
BEST PRACTICE
.controller('myCtrl',
['com.restaurant.beverages.draughtBeer',
function(beer) {
beer.isEmpty();
}]);

33
12.09.2015
Service
SERVICE, FACTORY
• Injectable – can be injected into other
components
• Singleton – only one instance
• A place to store your state
• Created by a Provider’s $get() method

34
12.09.2015
Provider
INJECTOR
PROVIDER
Now I’ll call $get()
and I’ll be on my way
GIVE ME “BEER PROVIDER” beerProvider
GIVE ME BEER
HERE’S YOUR BEER
ABSOLUTELY
SOBER CLIENT
PROVIDER
• $get()
• Gives you the ability to configure the
service on Angular bootstrap
• An object that provides the creator for a
service

35
12.09.2015
Are you still with me?
PERPLEXED?

36
12.09.2015
Injection
INJECTION PROCESS
• $injector gets an injection request
• Search the service instances cache
• If there isn’t any – lookup for the relevant
Provider
• Call the Provider’s $get() method
• Save the result to the service instances
cache
• Inject the result (Singleton) to the client

37
12.09.2015
Injection
$injector
providersCacheservicesCache
.run(function(beerService){})

38
12.09.2015
Where?
All that is to happen within a
MODULE

39
12.09.2015
Module

40
12.09.2015
angular.module()
angular.module()
• Think of it as a ‘Definition Container’
• … or like package for Classes
• Collection of components definitions

41
12.09.2015
ng-app
• Bootstrap – creates the $injector
• Runs the aggregated .configs
• Runs the aggregated .runs
NG APP LIFE CYCLE

42
12.09.2015
ng-app
• Can only inject Providers & Constants
• It is the place to configure a service before
it gets instantiated
.config()

43
12.09.2015
ng-app
• Invoked after all the .config()s got
executed
• Can inject services
.run()

44
12.09.2015
Snippets - .module
Module Dependencies
• Setter with [dependencies, …]
• Getter without the dependencies array […]

45
12.09.2015
Snippets - .provider()
.provider()

46
12.09.2015
Snippets - .factory()
.factory()

47
12.09.2015
Snippets - .service()
.service()

48
12.09.2015
Snippets - .value()
.value()

49
12.09.2015
Snippets - .constant()
.constant()

50
12.09.2015
lyubomir.vetskov
@musala.com

Presentation_muffin_conference_2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Presentation_muffin_conference_2015

Ähnlich wie Presentation_muffin_conference_2015 (20)

Presentation_muffin_conference_2015