Angular2 Customers module example
|
<ul> |
|
<li *ngFor="let customer of customersList">{{customer.name}}</li> |
|
</ul> |
|
import { Component, OnInit } from '@angular/core'; |
|
import { Customers } from './shared/customers.model' |
|
import { CustomersService } from './shared/customers.service' |
|
|
|
@Component({ |
|
selector: 'app-root', |
|
templateUrl: './app.component.html', |
|
styleUrls: ['./app.component.css'] |
|
}) |
|
export class AppComponent implements OnInit { |
|
title = 'app works!'; |
|
customersList: Customers[] = [] |
|
|
|
constructor(private _customerService: CustomersService){ } |
|
|
|
ngOnInit(){ |
|
this._customerService.getCustomers().then(customers => this.customersList = customers); |
|
} |
|
} |
|
import { BrowserModule } from '@angular/platform-browser'; |
|
import { NgModule } from '@angular/core'; |
|
import { FormsModule } from '@angular/forms'; |
|
import { HttpModule } from '@angular/http'; |
|
import {CustomersService} from './shared/customers.service' |
|
|
|
import { AppComponent } from './app.component'; |
|
|
|
@NgModule({ |
|
declarations: [ |
|
AppComponent |
|
], |
|
imports: [ |
|
BrowserModule, |
|
FormsModule, |
|
HttpModule |
|
], |
|
providers: [CustomersService], |
|
bootstrap: [AppComponent] |
|
}) |
|
export class AppModule { } |
|
// ng generate class shared/customers.model |
|
|
|
export class Customers { |
|
name:string; |
|
city:string; |
|
} |
|
// ng generate service shared/customers |
|
|
|
import { Injectable } from '@angular/core'; |
|
import { Customers } from './customers.model'; |
|
|
|
@Injectable() |
|
export class CustomersService { |
|
|
|
constructor() { } |
|
|
|
getCustomers(): Promise<Customers[]>{ |
|
return Promise.resolve(CUSTOMERS); |
|
} |
|
} |
|
|
|
const CUSTOMERS: Customers[] = [ |
|
{ city:"London", name:"Riccardo" }, |
|
{ city:"Manchester", name:"Ciccio" } |
|
]; |