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>