W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
本主題會(huì)幫你了解 Angular:什么是 Angular?它有哪些優(yōu)勢(shì)?當(dāng)構(gòu)建應(yīng)用時(shí)它能為你提供什么幫助?
Angular 是一個(gè)基于 TypeScript 構(gòu)建的開發(fā)平臺(tái)。它包括:
借助 Angular,無論單人項(xiàng)目還是企業(yè)級(jí)應(yīng)用,你都能獲得平臺(tái)帶來的優(yōu)勢(shì)。 Angular 的設(shè)計(jì)目標(biāo)之一就是讓更新更容易,因此你可以用最小的成本升級(jí)到最新的 Angular 版本。最重要的是,Angular 的生態(tài)系統(tǒng)由包括 170 萬名開發(fā)人員、庫作者和內(nèi)容創(chuàng)作者在內(nèi)的多元團(tuán)隊(duì)構(gòu)成。
要試用包含本指南中代碼片段的可工作范例,請(qǐng)看現(xiàn)場(chǎng)演練 / 下載范例。
本節(jié)會(huì)解釋 Angular 背后的核心思想。了解這些思想可以幫助你更有效地設(shè)計(jì)和構(gòu)建應(yīng)用。
組件是構(gòu)成應(yīng)用的磚塊。組件包括三個(gè)部分:帶有 ?@Component()
? 裝飾器的 TypeScript 類、HTML 模板和樣式文件。?@Component()
? 裝飾器會(huì)指定如下 Angular 專屬信息:
下面是一個(gè)最小化的 Angular 組件。
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
}
要使用此組件,請(qǐng)?jiān)谀0逯芯帉懸韵聝?nèi)容:
<hello-world></hello-world>
當(dāng) Angular 渲染此組件時(shí),生成的 DOM 如下所示:
<hello-world>
<h2>Hello World</h2>
<p>This is my first component!</p>
</hello-world>
Angular 的組件模型提供了強(qiáng)大的封裝能力和直觀的應(yīng)用結(jié)構(gòu)。組件還能讓你的應(yīng)用更容易進(jìn)行單元測(cè)試,并可以提高代碼的整體可讀性。
每個(gè)組件都有一個(gè) HTML 模板,用于聲明該組件的渲染方式。你可以內(nèi)聯(lián)它或用文件路徑定義此模板。
Angular 使用額外的語法擴(kuò)展了 HTML,使你可以從組件中插入動(dòng)態(tài)值。當(dāng)組件的狀態(tài)更改時(shí),Angular 會(huì)自動(dòng)更新已渲染的 DOM。此功能的應(yīng)用之一是插入動(dòng)態(tài)文本,如下例子所示。
<p>{{ message }}</p>
這里 message 的值來自組件類:
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
message = 'Hello, World!';
}
當(dāng)應(yīng)用加載組件及其模板時(shí),用戶將看到以下內(nèi)容:
<p>Hello, World!</p>
注意這里所用的雙花括號(hào) —— 它們指示 Angular 對(duì)其中的內(nèi)容進(jìn)行插值。
Angular 還支持屬性綁定,以幫助你設(shè)置 HTML 元素的 Property 和 Attribute 的值,并將這些值傳給應(yīng)用的展示邏輯。
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>
注意這里所用的方括號(hào) —— 該語法表明你正在將 Property 或 Attribute 綁定到組件類中的值。
可以聲明事件監(jiān)聽器來監(jiān)聽并響應(yīng)用戶的操作,例如按鍵、鼠標(biāo)移動(dòng)、單擊和觸摸等。你可以通過在圓括號(hào)中指定事件名稱來聲明一個(gè)事件監(jiān)聽器:
<button
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
前面的例子中調(diào)用了一個(gè)方法,該方法是在組件類中定義的:
sayMessage() {
alert(this.message);
}
以下是在 Angular 模板中插值和綁定的例子:
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-bindings',
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
sayMessage() {
alert(this.message);
}
}
<button
[disabled]="canClick"
(click)="sayMessage()">
Trigger alert message
</button>
<p
[id]="sayHelloId"
[style.color]="fontColor">
You can set my color in the component!
</p>
<p>My color is {{ fontColor }}</p>
可以用指令來為模板添加額外功能。 Angular 中最常用的指令是 ?*ngIf
? 和 ?*ngFor
? 。你可以使用指令執(zhí)行各種任務(wù),例如動(dòng)態(tài)修改 DOM 結(jié)構(gòu)。你還可以用自定義指令來創(chuàng)建出色的用戶體驗(yàn)。
以下代碼是 ?*ngIf
? 指令的例子。
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = "I'm read only!";
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = "I'm read only!";
}
}
}
<h2>Hello World: ngIf!</h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>
Angular 的聲明式模板使讓可以將應(yīng)用的邏輯和外觀完全分開。模板基于標(biāo)準(zhǔn) HTML,因此易于構(gòu)建、維護(hù)和更新。
依賴注入讓你可以聲明 TypeScript 類的依賴項(xiàng),而無需操心如何實(shí)例化它們,Angular 會(huì)為你處理這些瑣事。這種設(shè)計(jì)模式能讓你寫出更加可測(cè)試、也更靈活的代碼。盡管了解依賴注入對(duì)于開始用 Angular 并不是至關(guān)重要的事,但我們還是強(qiáng)烈建議你將其作為最佳實(shí)踐,并且 Angular 自身的方方面面都在一定程度上利用了它。
為了說明依賴注入的工作原理,請(qǐng)考慮以下例子。第一個(gè)文件 ?logger.service.ts
? 中定義了一個(gè) ?Logger
?類。它包含一個(gè) ?writeCount
?函數(shù),該函數(shù)將一個(gè)數(shù)字記錄到控制臺(tái)。
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class Logger {
writeCount(count: number) {
console.warn(count);
}
}
接下來,?hello-world-di.component.ts
? 文件中定義了一個(gè) Angular 組件。該組件包含一個(gè)按鈕,它會(huì)使用此 Logger 類的 ?writeCount
?函數(shù)。要訪問此功能,可通過向構(gòu)造函數(shù)中添加 ?private logger: Logger
? 來把 ?Logger
?服務(wù)注入到 ?HelloWorldDI
?類中。
import { Component } from '@angular/core';
import { Logger } from '../logger.service';
@Component({
selector: 'hello-world-di',
templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent {
count = 0;
constructor(private logger: Logger) { }
onLogMe() {
this.logger.writeCount(this.count);
this.count++;
}
}
Angular CLI 是開發(fā) Angular 應(yīng)用的最快、最簡單和推薦的方式。Angular CLI 能簡化許多任務(wù)。
ng build |
把 Angular 應(yīng)用編譯到一個(gè)輸出目錄中。 |
ng serve |
構(gòu)建你的應(yīng)用并啟動(dòng)開發(fā)服務(wù)器,當(dāng)有文件變化時(shí)就重新構(gòu)建。 |
ng generate |
基于原理圖(schematic)生成或修改某些文件。 |
ng test |
在指定的項(xiàng)目上運(yùn)行單元測(cè)試。 |
ng e2e |
構(gòu)建一個(gè) Angular 應(yīng)用并啟動(dòng)開發(fā)服務(wù)器,然后運(yùn)行端到端測(cè)試。 |
你會(huì)發(fā)現(xiàn) Angular CLI 是構(gòu)建應(yīng)用的寶貴工具。
“Angular 應(yīng)用:知識(shí)要點(diǎn)”部分提供了構(gòu)建 Angular 應(yīng)用時(shí)要用到的幾個(gè)關(guān)鍵架構(gòu)元素的簡要描述。但是,當(dāng)你的應(yīng)用不斷成長并且想要添加其他功能(例如站點(diǎn)導(dǎo)航或用戶輸入)時(shí),Angular 的許多優(yōu)勢(shì)才會(huì)真正顯現(xiàn)出來。屆時(shí),你可以通過 Angular 平臺(tái),來引入 Angular 所提供的眾多自帶庫之一。
你可以使用的一些庫包括:
Angular 路由器 |
高級(jí)的客戶側(cè)導(dǎo)航功能與基于 Angular 組件的路由機(jī)制。支持惰性加載、嵌套路由、自定義路徑匹配規(guī)則等。 |
Angular 表單 |
統(tǒng)一的表單填報(bào)與驗(yàn)證體系。 |
Angular HttpClient |
健壯的 HTTP 客戶端庫,它可以支持更高級(jí)的客戶端-服務(wù)器通訊。 |
Angular 動(dòng)畫 |
豐富的動(dòng)畫體系,用于驅(qū)動(dòng)基于應(yīng)用狀態(tài)的動(dòng)畫。 |
Angular PWA |
一些用于構(gòu)建漸進(jìn)式 Web 應(yīng)用(PWA)的工具,包括 Service Worker 和 Web 應(yīng)用清單(Manifest)。 |
Angular 原理圖 |
一些搭建腳手架、重構(gòu)和升級(jí)的自動(dòng)化工具。用于簡化大規(guī)模應(yīng)用的開發(fā)。 |
這些庫在擴(kuò)展應(yīng)用功能的同時(shí),還能讓你將更多精力放在那些令你的應(yīng)用與眾不同的功能上。你可以添加這些庫,并相信它們能與 Angular 框架無縫集成并同步更新。
只有當(dāng)它們可以幫你向應(yīng)用中添加功能或解決特定的問題時(shí),你才需要這些庫。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: