Angular 6 学习二：第一个component和service

1. 在angular目录下创建项目blueprj：

>ng new blueprj

 

Index.html->app.component.ts

2. 创建一个angular component： blue，

>ng g component blue

blue.component.ts

import { Component, OnInit } from '@angular/core'; @Component({   selector: 'app-blue',   templateUrl: './blue.component.html',   styleUrls: ['./blue.component.css'] }) export class BlueComponent implements OnInit {   constructor() { }   ngOnInit() {   } }

a. selector：标识这个组件， angular在创建时会在前面加上app-.

b.  BlueComponent: 代表这个组件，并提供组件方法

c. import { Component, OnInit } from '@angular/core';

从@angular/core 引入组件

3.从app.component页面引入blue页面

从colors.js里引入oColorList对象

export const oColorList = [   {     oName:'blue',     oType:'user',     oStatus:'normal'   },   {      oName:'red',      oType:'user',      oStatus:'block'   },   {      oName:'yellow',      oType:'user',      oStatus:'normal'   } ];

 在blue.component.html里用表格显示数据

<table class="table table-condensed"> <thead> <tr> <th>&nbsp;</th> <th>color Name</th> <th>color Type</th> <th>Status</th> </tr> </thead> <tbody> <tr *ngFor="let color of oColorList; index as productId"> <td>*</td> <td>{{ color.oName }}</td> <td>{{ color.oType }}</td> <td>{{ color.oStatus }}</td> </tr> </tbody></table>

4. 运行项目，

>ng serve

5. 查看页面，

浏览器数据http://localhost:4200/， 首页显示数据

 

6.创建一个service

>ng g service PaintService

6.1 在_services目录下创建service

>ng g service _services/PaintService