大致介紹

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

核心模塊

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

他們之間的關系：

從圖中可以看出：

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

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

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

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

組件

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

一個組件的代碼：

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元素上

1、修改DOM

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

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

2、改變元素樣式

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

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

服務

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

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

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

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

依賴注入

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

路由

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論