1.npm install -g @angular/cli 下载脚手架

2、ng new my-app

3、ng serve --open(加o或者open的作用是可以自动在浏览器打开项目)

 

创建组件：

ng generate component heroes(创建一个heroes组件)

简写为 ng g c heroes

angular2.0以上生成的文件目录

app中有以下几个文件

app/heroes/heroes.component.ts（typescript）

文件内容：

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

其中

selector— 组件的选择器（CSS 元素选择器）

templateUrl— 组件模板文件的位置。

styleUrls— 组件私有 CSS 样式表文件的位置。

app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。

始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

 

OnInit下直接定义的变量值可以在.html中直接使用

 

 

视图的渲染类似vue

 

使用{{hero}}进行视图的渲染（数据绑定）

 

 

双向数据绑定：

[(ngModel)] 是 Angular 的双向数据绑定语法。

<div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"> </label> </div>

 

直接这样是会报错的，我们还需要在app.module.ts中引入

import { FormsModule } from '@angular/forms';

然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。

然后在app.module.ts中引入我们引入的文件

imports: [ BrowserModule, FormsModule ],

这样我们的双向数据绑定就可以实现了

 

 

数据的循环：

我们在app中创建一个文件

src/app/mock-heroes.ts

文件内容如下：

import { Hero } from './hero';（我们通过这个可以把它注册到Hero组件中，然后Heroes组件引入Hero组件，这样我们就可以在Heroes中使用到下面我们使用的数据） export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ];

 

 

实现效果代码如下

添加绑定事件：

heroes.component.html

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

 

 

 

组从组件（即父子组件）

例如子组件为HeroDetailComponent

src/app/hero-detail/hero-detail.component.html

代码如下：

<div *ngIf="hero"> <h2>{{hero.name | uppercase}} Details</h2> <div><span>id: </span>{{hero.id}}</div> <div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"/> </label> </div> </div>

 

在子组件src/app/hero-detail/hero-detail.component.ts中引入

import { Hero } from '../hero/hero.component';

在子组件中导入import { Component, OnInit, Input } from '@angular/core';

添加一个带有 @Input() 装饰器的 hero 属性。

@Input() hero: Hero;

最终代码如下：

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

import { Hero } from '../hero/hero.component';

 

@Component({

selector: 'app-hero-detail',

templateUrl: './hero-detail.component.html',

styleUrls: ['./hero-detail.component.css']

})

export class HeroDetailComponent implements OnInit {

@Input() hero: Hero;

constructor() { }

 

ngOnInit() {

}

 

}

 

 

而父组件为heroes

其模板中引用子组件

heroes.component.html

 

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

其中[hero]="selectedHero" 是 Angular 的属性绑定语法。

类似vue中属性得绑定

<Specifications :item='goods' :shopCar='goodsWay' :showState="chooseFlag" :self='self' v-if="(chooseFlag) && shopCarShow == goods.id" ref='showState'></Specifications>

这是一种单向数据绑定。从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，并映射到了 HeroDetailComponent 的 hero 属性。

 

 

 

最终heroes的代码如下（父组件）

<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <app-hero-detail [hero]="selectedHero"></app-hero-detail>