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" } | |
]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment