Angular2入門-架構總覽

▓▓▓▓▓▓ 大體介紹

　　在3月23日，Angular4正式發佈（沒有3）。彷佛如今學Angular2又晚了，又晚一步-_-||。Angular2在Angular1的基礎上有了較大的改變。以前向一個同窗（以前學過Angular1）問一個Angular2的問題，他反問到這是Angular代碼? 可見Angular1->Angular2的變化有多大。先來看看Angular2的架構

 

▓▓▓▓▓▓ 核心模塊

　　一個完整的Angular應用主要由六個重要部分組成：組件、模板、指令、服務、依賴注入和路由

　　他們之間的關係：

　　從圖中能夠看出：

　　　　一、與用戶交互的是模板視圖，模板和組件類共同組成組件

　　　　二、路由是控制組件的建立和銷燬，從而驅使界面切換

　　　　三、指令和模板相關聯，擴展了模板的語法

　　　　四、服務是封裝若干個功能邏輯的單元，經過依賴注入引入組件內部

 

▓▓▓▓▓▓ 組件

　　Angular框架是基於組件設計，組件負責控制屏幕上的一小塊區域，例如網頁的導航欄就是一個組件

　　一個組件的代碼：

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
    selector: 'my-hero-detail',
    template: `
        <div *ngIf="hero">
          <h2>{{hero.name}} details!</h2>
          <div><label>id: </label>{{hero.id}}</div>
          <div>
            <label>name: </label>
            <input [(ngModel)]="hero.name" placeholder="name"/>
          </div>
        </div>
    `
})

export class HeroDetailComponent {
    @Input()
    hero: Hero;
}

 

 

 

▓▓▓▓▓▓ 模板

　　咱們經過組件的自帶的模板來定義組件視圖。模板以 HTML 形式存在，告訴 Angular 如何渲染組件。

　　例如上面組件中的@Component中就是模板

@Component({
    selector: 'my-hero-detail',
    template: `
        <div *ngIf="hero">
          <h2>{{hero.name}} details!</h2>
          <div><label>id: </label>{{hero.id}}</div>
          <div>
            <label>name: </label>
            <input [(ngModel)]="hero.name" placeholder="name"/>
          </div>
        </div>
    `
})

 

▓▓▓▓▓▓ 指令

　　指令和模板的關係密切，指令能夠與DOM進行靈活交互，能夠改變樣式也能夠修改DOM。通常的指令都做用在已有的DOM元素上

　　一、修改DOM

<button *ngIf="canEdit">編輯</button>

　　當canEdit爲true時，button會顯示，不然，button隱藏

 

　　二、改變元素樣式

<button [ngStyle]="setStyles()">編輯</button>

　　setStyles()是一個函數，能夠經過這個函數修改元素的樣式

 

▓▓▓▓▓▓ 服務

　　服務是封裝單一功能的單元，常被引用於組件內部，做爲組件的功能擴展。它能夠是一個簡單的字符串或是JSON數據，也能夠是一個函數甚至是一個類

　　組件自己不從服務器得到數據、不進行驗證輸入，也不直接往控制檯寫日誌。 它們把這些任務委託給服務。

　　一個簡單的服務（包含一個類）：

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

 

▓▓▓▓▓▓ 依賴注入

　　經過依賴注入機制，服務等模塊能夠被引入到任何一個組件中，而開發者無需關心這些模塊是如何被初始化的。由於Angular已經幫你處理好了，包括本模塊自己依賴的其餘模塊也會被初始化

 

▓▓▓▓▓▓ 路由

　　路由它把瀏覽器中的URL看作一個操做指南， 據此導航到一個由客戶端生成的視圖，並能夠把參數傳給支撐視圖的相應組件，幫它決定具體該展示哪些內容。 咱們能夠爲頁面中的連接綁定一個路由，這樣，當用戶點擊連接時，就會導航到應用中相應的視圖。 當用戶點擊按鈕、從下拉框中選取，或響應來自任何地方的事件時，咱們也能夠在代碼控制下進行導航。 路由器還在瀏覽器的歷史日誌中記錄下這些活動，這樣瀏覽器的前進和後退按鈕也能照常工做。

 

參考資料:

　　　揭祕Angular2第3章　

　　　TypeScript Handbook（中文版）