Angular2.x

Angular版本

 

Angular1和Angular4分別是Angular的兩個版本，也就是Angular1.x和Angular2.x（除了Angular1之外，其他都屬於Angular2.x）。

1.Angular1.x ～ Angular2.x 

2.Angular2.x有什麼變化

 

1.x

安裝Angular CLL

//自從node升級7.x之後，採用@方式進行安裝
npm i -g @angular/cli

 

建立一個新的應用程序

ng new angular-tour-of-heroes

 

啓動應用程序（ng參數使用，請訪問這篇文章）

cd angular-tour-of-heroes
ng serve --open

 

AppComponent組件

app.component.ts - 用TypeScript編寫的組件類代碼。
app.component.html - 用HTML編寫的組件模板。
app.component.css - 組件的私有CSS樣式。

　

2.x

建立heroes組件 

組件生成在src目錄

 

ng generate component heroes

 

執行命令後，會在本app下，生成heroes目錄，且目錄裏存在

heroes.component.html
heroes.component.css
heroes.component.ts

　　

//heroes.component.html

<p>
  heroes works!
</p>

　　

//heroes.component.css

　　

//heroes.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

　　

 

您始終Component從Angular核心庫中導入符號並使用註釋組件類。@Component

@Component 是指定組件的Angular元數據的裝飾器函數。

CLI生成了三個元數據屬性：

1. selector - 組件的CSS元素選擇器
2. templateUrl - 組件模板文件的位置。
3. styleUrls - 組件的私有CSS樣式的位置。

在CSS元素選擇， 'app-heroes'是相匹配的標識父組件模板內此組件的HTML元素的名稱。

這ngOnInit是一個生命週期鉤子 Angular ngOnInit在建立組件後當即調用。這是放置初始化邏輯的地方。

老是export組件類，因此你能夠import在其餘地方...像在AppModule。

 

詳情查詢：

Component

生命週期鉤子

 

 

添加hero屬性到HeroesComponent，而後再用html模板文件再顯示出來。

 

 

 

 顯示HeroesComponent視圖，必須添加到shell（AppComponent）模板中

 

 

 

 

3.x

建立一個heroes類 

Hero在文件src/app夾中的文件中建立一個類。給它id和name屬性。

export class Hero {
    id: number;
    name: string;
  }

 

而後返回到HeroesComponent導入hero.ts

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

 頁面再也不正確顯示，由於您已將heroes從字符串更改成對象。

 

怎麼顯示heroes對象？

//heroes.component.html <h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

 

4.x

格式與 UppercasePipe

瀏覽器刷新，如今heroes的名字以大寫字母顯示。

uppercase插值綁定中的單詞（在管道運算符（|）以後）激活內置函數UppercasePipe。

管道是格式化字符串，貨幣金額，日期和其餘顯示數據的好方法。你能夠建立本身的。

 

5.x 

編輯heroes

用戶應該可以在<input>文本框中編輯英雄名字。

該文本框應顯示英雄的name屬性並更新該屬性的用戶類型。這意味着數據從組件類流出到屏幕，從屏幕返回到類。

要自動執行該數據流，請在<input>表單元素和hero.name屬性之間設置雙向數據綁定。

 

5.1-雙向綁定

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

View Code

 

[（ngModel）]是Angular的雙向數據綁定語法。

在這裏它將hero.name屬性綁定到HTML文本框，以便數據能夠在兩個方向上流動：從hero.name屬性到文本框，從文本框回到hero.name。

 

5.2-FromsModule

請注意，添加應用程序後中止工做。[(ngModel)]

要查看錯誤，請打開瀏覽器開發工具，而後在控制檯中查找相似的消息

 

雖然ngModel是有效的Angular指令，但它默認狀況下不可用。

它屬於可選項FormsModule，您必須選擇使用它。

 

AppModule

Angular須要知道應用程序的各個部分如何組合在一塊兒以及應用程序須要哪些其餘文件和庫。這些信息被稱爲元數據

一些元數據位於您添加到組件類的裝飾器中。其餘關鍵元數據在裝飾器中。@Component@NgModule

最重要的裝飾器註釋頂級AppModule類。@NgModule

Angular CLI AppModule在src/app/app.module.ts建立項目時生成了一個類。這是你選擇進入的地方FormsModule。

 

導入FormsModule

打開AppModule（app.module.ts）並FormsModule從@angular/forms庫中導入符號。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

而後添加FormsModule到元數據的數組中，其中包含應用程序須要的外部模塊列表。@NgModuleimports

imports: [
  BrowserModule,
  FormsModule
],

 

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';


@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

View Code

 

 

 

 

Declare HeroesComponent

每一個組件必須在一個 NgModule中聲明。

你沒有聲明HeroesComponent。那麼爲何應用程序工做？

它的工做緣由是Angular CLI HeroesComponent在AppModule它生成該組件時進行了聲明。

打開src/app/app.module.ts並HeroesComponent在頂部附近找到導入。

import { HeroesComponent } from './heroes/heroes.component';

的HeroesComponent是在中聲明陣列。 @NgModule.declarations


declarations: [
  AppComponent,
  HeroesComponent
],

請注意，AppModule 聲明這兩個應用程序組件，AppComponent和HeroesComponent。