Angular2架構的示例分析

這篇文章給大家分享的是有關Angular2架構的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

核心模塊

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

他們之間的關系：

從圖中可以看出：

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

2、路由是控制組件的創建和銷毀，從而驅使界面切換

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

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

組件

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

一個組件的代碼：

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
 selector: 'my-hero-detail',
 template: `
 <div *ngIf="hero">
  <h3>{{hero.name}} details!</h3>
  <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">
  <h3>{{hero.name}} details!</h3>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name"/>
  </div>
 </div>
})

指令

指令和模板的關系密切，指令可以與DOM進行靈活交互，可以改變樣式也可以修改DOM。一般的指令都作用在已有的DOM元素上

1、修改DOM

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

當canEdit為true時，button會顯示，否則，button隱藏

2、改變元素樣式

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

setStyles()是一個函數，可以通過這個函數修改元素的樣式

服務

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

組件本身不從服務器獲得數據、不進行驗證輸入，也不直接往控制臺寫日志。 它們把這些任務委托給服務。

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

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

依賴注入

通過依賴注入機制，服務等模塊可以被引入到任何一個組件中，而開發者無需關心這些模塊是如何被初始化的。因為Angular已經幫你處理好了，包括本模塊本身依賴的其他模塊也會被初始化

路由

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

感謝各位的閱讀！關于“Angular2架構的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！