建站
咨詢
售后
建站咨詢
新聞中心
本主題會幫你了解 Angular：什么是 Angular？它有哪些優(yōu)勢？當(dāng)構(gòu)建應(yīng)用時它能為你提供什么幫助？
創(chuàng)新互聯(lián)建站主營新吳網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,新吳h5成都微信小程序搭建,新吳網(wǎng)站營銷推廣歡迎新吳等地區(qū)企業(yè)咨詢
Angular 是一個基于 TypeScript 構(gòu)建的開發(fā)平臺。它包括：
- 一個基于組件的框架，用于構(gòu)建可伸縮的 Web 應(yīng)用
- 一組完美集成的庫，涵蓋各種功能，包括路由、表單管理、客戶端-服務(wù)器通信等
- 一套開發(fā)工具，可幫助你開發(fā)、構(gòu)建、測試和更新代碼
借助 Angular，無論單人項目還是企業(yè)級應(yīng)用，你都能獲得平臺帶來的優(yōu)勢。 Angular 的設(shè)計目標(biāo)之一就是讓更新更容易，因此你可以用最小的成本升級到最新的 Angular 版本。最重要的是，Angular 的生態(tài)系統(tǒng)由包括 170 萬名開發(fā)人員、庫作者和內(nèi)容創(chuàng)作者在內(nèi)的多元團隊構(gòu)成。
要試用包含本指南中代碼片段的可工作范例，請看現(xiàn)場演練 / 下載范例。
Angular 應(yīng)用：知識要點
本節(jié)會解釋 Angular 背后的核心思想。了解這些思想可以幫助你更有效地設(shè)計和構(gòu)建應(yīng)用。
組件
組件是構(gòu)成應(yīng)用的磚塊。組件包括三個部分：帶有 ?@Component()? 裝飾器的 TypeScript 類、HTML 模板和樣式文件。?@Component()? 裝飾器會指定如下 Angular 專屬信息：
- 一個 CSS 選擇器，用于定義如何在模板中使用組件。模板中與此選擇器匹配的 HTML 元素將成為該組件的實例。
- 一個 HTML 模板，用于指示 Angular 如何渲染此組件。
- 一組可選的 CSS 樣式，用于定義模板中 HTML 元素的外觀。
下面是一個最小化的 Angular 組件。
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
Hello World
This is my first component!
`
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
}要使用此組件，請在模板中編寫以下內(nèi)容：
當(dāng) Angular 渲染此組件時，生成的 DOM 如下所示：
Hello World
This is my first component!
Angular 的組件模型提供了強大的封裝能力和直觀的應(yīng)用結(jié)構(gòu)。組件還能讓你的應(yīng)用更容易進(jìn)行單元測試，并可以提高代碼的整體可讀性。
模板
每個組件都有一個 HTML 模板，用于聲明該組件的渲染方式。你可以內(nèi)聯(lián)它或用文件路徑定義此模板。
Angular 使用額外的語法擴展了 HTML，使你可以從組件中插入動態(tài)值。當(dāng)組件的狀態(tài)更改時，Angular 會自動更新已渲染的 DOM。此功能的應(yīng)用之一是插入動態(tài)文本，如下例子所示。
{{ message }}
這里 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)用加載組件及其模板時，用戶將看到以下內(nèi)容：
Hello, World!
注意這里所用的雙花括號 —— 它們指示 Angular 對其中的內(nèi)容進(jìn)行插值。
Angular 還支持屬性綁定，以幫助你設(shè)置 HTML 元素的 Property 和 Attribute 的值，并將這些值傳給應(yīng)用的展示邏輯。
You can set my color in the component!
注意這里所用的方括號 —— 該語法表明你正在將 Property 或 Attribute 綁定到組件類中的值。
可以聲明事件監(jiān)聽器來監(jiān)聽并響應(yīng)用戶的操作，例如按鍵、鼠標(biāo)移動、單擊和觸摸等。你可以通過在圓括號中指定事件名稱來聲明一個事件監(jiān)聽器：
前面的例子中調(diào)用了一個方法，該方法是在組件類中定義的：
sayMessage() {
alert(this.message);
}以下是在 Angular 模板中插值和綁定的例子：
- hello-world-bindings.component.ts
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);
}
}
You can set my color in the component!
My color is {{ fontColor }}
可以用指令來為模板添加額外功能。 Angular 中最常用的指令是 ?*ngIf? 和 ?*ngFor? 。你可以使用指令執(zhí)行各種任務(wù)，例如動態(tài)修改 DOM 結(jié)構(gòu)。你還可以用自定義指令來創(chuàng)建出色的用戶體驗。
以下代碼是 ?*ngIf? 指令的例子。
- hello-world-ngif.component.ts
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!";
}
}
}Hello World: ngIf!
You can edit the following paragraph.
The following paragraph is read only. Try clicking the button!
{{ message }}
Angular 的聲明式模板使讓可以將應(yīng)用的邏輯和外觀完全分開。模板基于標(biāo)準(zhǔn) HTML，因此易于構(gòu)建、維護和更新。
依賴注入
依賴注入讓你可以聲明 TypeScript 類的依賴項，而無需操心如何實例化它們，Angular 會為你處理這些瑣事。這種設(shè)計模式能讓你寫出更加可測試、也更靈活的代碼。盡管了解依賴注入對于開始用 Angular 并不是至關(guān)重要的事，但我們還是強烈建議你將其作為最佳實踐，并且 Angular 自身的方方面面都在一定程度上利用了它。
為了說明依賴注入的工作原理，請考慮以下例子。第一個文件 ?logger.service.ts? 中定義了一個 ?Logger ?類。它包含一個 ?writeCount ?函數(shù)，該函數(shù)將一個數(shù)字記錄到控制臺。
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class Logger {
writeCount(count: number) {
console.warn(count);
}
}接下來，?hello-world-di.component.ts? 文件中定義了一個 Angular 組件。該組件包含一個按鈕，它會使用此 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
Angular CLI 是開發(fā) Angular 應(yīng)用的最快、最簡單和推薦的方式。Angular CLI 能簡化許多任務(wù)。
| ng build |
把 Angular 應(yīng)用編譯到一個輸出目錄中。 |
| ng serve |
構(gòu)建你的應(yīng)用并啟動開發(fā)服務(wù)器，當(dāng)有文件變化時就重新構(gòu)建。 |
| ng generate |
基于原理圖（schematic）生成或修改某些文件。 |
| ng test |
在指定的項目上運行單元測試。 |
| ng e2e |
構(gòu)建一個 Angular 應(yīng)用并啟動開發(fā)服務(wù)器，然后運行端到端測試。 |
你會發(fā)現(xiàn) Angular CLI 是構(gòu)建應(yīng)用的寶貴工具。
自帶庫
“Angular 應(yīng)用：知識要點”部分提供了構(gòu)建 Angular 應(yīng)用時要用到的幾個關(guān)鍵架構(gòu)元素的簡要描述。但是，當(dāng)你的應(yīng)用不斷成長并且想要添加其他功能（例如站點導(dǎo)航或用戶輸入）時，Angular 的許多優(yōu)勢才會真正顯現(xiàn)出來。屆時，你可以通過 Angular 平臺，來引入 Angular 所提供的眾多自帶庫之一。
你可以使用的一些庫包括：
|
Angular 路由器 |
高級的客戶側(cè)導(dǎo)航功能與基于 Angular 組件的路由機制。支持惰性加載、嵌套路由、自定義路徑匹配規(guī)則等。 |
|
Angular 表單 |
統(tǒng)一的表單填報與驗證體系。 |
| Angular HttpClient |
健壯的 HTTP 客戶端庫，它可以支持更高級的客戶端-服務(wù)器通訊。 |
|
Angular 動畫 |
豐富的動畫體系，用于驅(qū)動基于應(yīng)用狀態(tài)的動畫。 |
| Angular PWA |
一些用于構(gòu)建漸進(jìn)式 Web 應(yīng)用（PWA）的工具，包括 Service Worker 和 Web 應(yīng)用清單（Manifest）。 |
|
Angular 原理圖 |
一些搭建腳手架、重構(gòu)和升級的自動化工具。用于簡化大規(guī)模應(yīng)用的開發(fā)。 |
這些庫在擴展應(yīng)用功能的同時，還能讓你將更多精力放在那些令你的應(yīng)用與眾不同的功能上。你可以添加這些庫，并相信它們能與 Angular 框架無縫集成并同步更新。
只有當(dāng)它們可以幫你向應(yīng)用中添加功能或解決特定的問題時，你才需要這些庫。
分享標(biāo)題：創(chuàng)新互聯(lián)Angular教程：Angular是什么?
瀏覽地址：http://www.dlmjj.cn/article/cdididc.html
