angular2-chapter04 -- Create Services

作者 Guanghui Wang 日期 2017-04-22
Angular2

Create Services

Check code at: https://github.com/wghglory/angular2-fundamental

Services and Dependency Injection

1) create shared/event.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//include this in module.ts providers
import { Injectable } from '@angular/core'

@Injectable()
export class EventService {
    getEvents() {
        return EVENTS
    }
}

const EVENTS = [
    {
        id: 1,
        name: 'Angular Connect',
        date: '9/26/2036',
        time: '10:00 am',
        price: 599.99,
        imageUrl: '/app/assets/images/angularconnect-shield.png',
        location: {
            address: '1057 DT',
            city: 'London',
            country: 'England'
        }
    },
    ...
]

2) events-list.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//OnInit is like interface which class must implements ngOnInit method
import { Component, OnInit } from '@angular/core'
// import service
import {EventService} from './shared/event.service'

@Component({
    selector: 'events-list',
    templateUrl: 'app/events/events-list.component.html'   //relative to index.html
})
export class EventsListComponent implements OnInit {
    events: any[]

    //DI
    constructor(private eventService: EventService) {
    }

    ngOnInit() {
        this.events = this.eventService.getEvents()
    }
}

3) bind service to providers in module

1
2
3
4
5
6
7
import { EventService } from './events/shared/event.service'

@NgModule({
    declarations: [AppComponent, EventsListComponent, EventThumbnailComponent, NavBarComponent],
    providers: [EventService],
})
export class AppModule { }

Wrapping Third Party Services

Feature: Clicking each thumbnail will toastr event name

We’re going to use toastr as 3rd party library. After installation, include toastr js and css into index.html

1
npm install toastr --save

1) create common/toastr.service.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Injectable } from '@angular/core'

//I guess this local variable was assigned the global toastr variable
declare let toastr: any

@Injectable()
export class ToastrService {

    success(message: string, title?: string) {
        toastr.success(message, title);
    }
    info(message: string, title?: string) {
        toastr.info(message, title);
    }
    error(message: string, title?: string) {
        toastr.error(message, title);
    }
    warning(message: string, title?: string) {
        toastr.warning(message, title);
    }
}

2) events-list.component.ts inject toastr service, and create toastrName function passing event name

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//OnInit is like interface which class must implements ngOnInit method
import { Component, OnInit } from '@angular/core'
import {EventService} from './shared/event.service'
import {ToastrService} from '../common/toastr.service'

@Component({
    selector: 'events-list',
    templateUrl: 'app/events/events-list.component.html'   //relative to index.html
})
export class EventsListComponent implements OnInit {
    events: any[]

    constructor(private eventService: EventService, private toastrService: ToastrService) {}

    ngOnInit() {
        this.events = this.eventService.getEvents()
    }

    toastrName(data){
        this.toastrService.success(data);
    }
}

wire toastrName function in events-list.component template:

1
2
3
4
5
6
7
8
<div>
    <h1>Upcoming Angular 2 Events</h1>
    <div class="row">
        <div class="col-md-5" *ngFor="let e of events">
            <event-thumbnail [event]="e" (click)="toastrName(e.name)"></event-thumbnail>
        </div>
    </div>
</div>

3) include ToastrService in module

1
2
3
4
5
6
7
8
import { EventService } from './events/shared/event.service'
import { ToastrService } from './common/toastr.service'

@NgModule({
    declarations: [AppComponent, EventsListComponent, EventThumbnailComponent, NavBarComponent],
    providers: [EventService, ToastrService],
})
export class AppModule { }
FEATURED TAGS
Angular2