大致介紹

在3月23日，Angular4正式發(fā)布（沒有3）。似乎現(xiàn)在學(xué)Angular2又晚了，又晚一步-_-||。Angular2在Angular1的基礎(chǔ)上有了較大的改變。之前向一個(gè)同學(xué)（之前學(xué)過Angular1）問一個(gè)Angular2的問題，他反問到這是Angular代碼? 可見Angular1->Angular2的變化有多大。先來看看Angular2的架構(gòu)

核心模塊

一個(gè)完整的Angular應(yīng)用主要由六個(gè)重要部分組成：組件、模板、指令、服務(wù)、依賴注入和路由

他們之間的關(guān)系：

從圖中可以看出：

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

2、路由是控制組件的創(chuàng)建和銷毀，從而驅(qū)使界面切換

3、指令和模板相關(guān)聯(lián)，擴(kuò)展了模板的語法

4、服務(wù)是封裝若干個(gè)功能邏輯的單元，通過依賴注入引入組件內(nèi)部

組件

Angular框架是基于組件設(shè)計(jì)，組件負(fù)責(zé)控制屏幕上的一小塊區(qū)域，例如網(wǎng)頁的導(dǎo)航欄就是一個(gè)組件

一個(gè)組件的代碼：

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>
})

指令

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

1、修改DOM

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

當(dāng)canEdit為true時(shí)，button會顯示，否則，button隱藏

2、改變元素樣式

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

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

服務(wù)

服務(wù)是封裝單一功能的單元，常被引用于組件內(nèi)部，作為組件的功能擴(kuò)展。它可以是一個(gè)簡單的字符串或是JSON數(shù)據(jù)，也可以是一個(gè)函數(shù)甚至是一個(gè)類

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

一個(gè)簡單的服務(wù)（包含一個(gè)類）：

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

依賴注入

通過依賴注入機(jī)制，服務(wù)等模塊可以被引入到任何一個(gè)組件中，而開發(fā)者無需關(guān)心這些模塊是如何被初始化的。因?yàn)锳ngular已經(jīng)幫你處理好了，包括本模塊本身依賴的其他模塊也會被初始化

路由

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評論