1. Services & Dependency Injection
A great pattern to follow
Angular Development
SoftUni Team
Technical Trainers
Software University

2. Table of Contents Dependency Injection Creating custom services
The core idea behind DI
Creating custom services
Making your own injectables
The built-in HTTP service
Making simple requests

3. Have a Question?
sli.do #angular-js

4. A great pattern to follow
Dependency Injection
A great pattern to follow

5. Dependency Injection
Dependency Injection is an important design pattern
It's usually called DI by everyone
"High-level modules should not depend on low-level modules. Both should depend on abstractions."
"Abstractions should not depend on details. Details should depend on abstractions."
Agile Principles, Patterns, and Practices in C#

6. Dependency Injection What is a dependency: Framework
Third Party Libraries
Database
File System
Random
Web Services / HTTP Requests
System Resources (Clock)
Configuration
The new Keyword
Static methods

7. Dependency Injection Traditional Programming
High level modules use lower lever modules
UI depends on Business Layer
Business layer depends on
Infrastructure
Database
Utilities
Static methods (Façade for example)
Classes instantiated everywhere

8. Dependency Injection How it should be How to do it
Classes should declare what they need
Constructors should require dependencies
Hidden dependencies should be shown
Dependencies should be abstractions
How to do it
Dependency Injection
The Hollywood principle "Don't call us, we'll call you!"

9. Dependency Injection Constructor injection
Dependencies – through constructors
Pros
Classes self document requirements
Works well without container
Always valid state
Cons
Many parameters
Some methods may not need everything

10. Dependency Injection Classic violations How to fix?
Using of the new keyword
Using static methods/properties
How to fix?
Default constructor
Main method/starting point
Inversion of Control container

11. Dependency Injection Consider this code export class Car {
public engine: Engine;
public tires: Tires;
public description = 'No DI';
constructor() {
this.engine = new Engine();
this.tires = new Tires(); }
// Method using the engine and tires
drive() {
return `${this.description} car with ` +
`${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;

12. Dependency Injection Problems in the code
The class is brittle, inflexible, and hard to test
The Car needs an engine and tires and instantiates them
If the Tires or Engine change, the Car class will break
Imagine what will happen if you have hundreds of dependencies
If you write tests – these dependencies may call external server
You have no control over the car's hidden dependencies

13. Dependency Injection How to fix it?
It's easy, add the dependencies to the constructor
Then you can create whatever car you want
constructor(public engine: Engine, public tires: Tires) { }
// Simple car with 4 cylinders and Flintstone tires.
let car = new Car(new Engine(), new Tires());
// Super car with 12 cylinders and Flintstone tires.
let bigCylinders = 12;
let car = new Car(new BigEngine(bigCylinders), new Tires());

14. Creating Custom Services
Suuuuuuper easy!

15. Creating Custom Services
Let's have a data class
import { Article } from './article';
export class HomeData {
getArticles () : Array<Article> {
return [
{ title: 'First Title', description: 'First Description' },
{ title: 'Second Title', description: 'Second Description' },
{ title: 'Third Title', description: 'Third Description' } ]; }

16. Creating Custom Services
And use it in one of our components
export class HomeComponent implements OnInit {
private homeData: HomeData;
articles: Array<Article>;
constructor () {
this.homeData = new HomeData(); }
ngOnInit () {
this.articles = this.homeData.getArticles()

17. Creating Custom Services
Let's use DI!
First mark the data class as Injectable
import { Injectable } from
import { Article } from './article';
@Injectable() // IMPORTANT: Do not forget the parentheses!
export class HomeData {
getArticles () : Array<Article> {
return [
{ title: 'First Title', description: 'First Description' },
{ title: 'Second Title', description: 'Second Description' },
{ title: 'Third Title', description: 'Third Description' } ]; }

18. Creating Custom Services
Then add it in the providers property of the component
It will make the service "injectable" into it and its children
import { HomeData } from './home.data';
@Component({
selector: 'home',
providers: [HomeData],
templateUrl: './home.component.html' })
export class HomeComponent implements OnInit { … }

19. Creating Custom Services
Finally, add a constructor property and "inject" it there
export class HomeComponent implements OnInit {
articles: Array<Article>;
constructor (private homeData: HomeData) { }
ngOnInit () {
this.articles = this.homeData.getArticles() }

20. Creating Custom Services
If you want, you can make the service available globally
Just inject it into the module
import { HomeData } from './home/home.data';
@NgModule({
declarations: [
AppComponent,
HomeComponent ],
imports: [
BrowserModule ],
providers: [HomeData],
bootstrap: [AppComponent] })
export class AppModule { }

21. The Built-in HTTP Service
Making HTTP Requests

22. The Built-in HTTP Service
First import the HttpModule
import { HttpModule } from
@NgModule({
declarations: [
AppComponent,
HomeComponent ],
imports: [
BrowserModule,
HttpModule
providers: [HomeData],
bootstrap: [AppComponent] })
export class AppModule { }

23. The Built-in HTTP Service
Then use it in your data class
import { Injectable } from
import { Http } from
import 'rxjs/add/operator/toPromise';
const url: string = '
@Injectable()
export class HomeData {
constructor (private http: Http) { }
getData () : Promise<Array<MyDataClass>> {
return this.http
.get(url)
.toPromise()
.then(resp => resp.json() as MyDataClass[])
.catch(err => { console.log(err); return []}); }

24. The Built-in HTTP Service
The Http service returns Observable object which we convert to a plain old Promise
Observables are more advanced and powerful ways to deal with streams of data
You can read more here:

25. JavaScript Web – Angular Fundamentals
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

26. License
This course (slides, examples, demos, videos, homework, etc.) is licensed under the "Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International" license
Attribution: this work may contain portions from
"End-to-end JavaScript Applications" course by Telerik Academy under CC-BY-NC-SA license
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.

27. Free Trainings @ Software University
Software University Foundation – softuni.org
Software University – High-Quality Education, Profession and Job for Software Developers
softuni.bg
Software Facebook
facebook.com/SoftwareUniversity
Software YouTube
youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg
© Software University Foundation –
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license.