為什么使用 Angular7
使用 Angular 做項(xiàng)目讓我有一種興奮感。特別適合程序人員兼做前端,最主要的優(yōu)點(diǎn):
一套框架,多種平臺(tái)移動(dòng)端 & 桌面端
橫跨所有平臺(tái)
學(xué)會(huì)用Angular構(gòu)建應(yīng)用,然后把這些代碼和能力復(fù)用在多種多種不同平臺(tái)的應(yīng)用上 —— Web、移動(dòng) Web、移動(dòng)應(yīng)用、原生應(yīng)用和桌面原生應(yīng)用。
速度與性能
通過(guò)Web Worker和服務(wù)端渲染,達(dá)到在如今(以及未來(lái))的Web平臺(tái)上所能達(dá)到的最高速度。
Angular讓你有效掌控可伸縮性。基于RxJS、Immutable.js和其它推送模型,能適應(yīng)海量數(shù)據(jù)需求。
美妙的工具
使用簡(jiǎn)單的聲明式模板,快速實(shí)現(xiàn)各種特性。使用自定義組件和大量現(xiàn)有組件,擴(kuò)展模板語(yǔ)言。在幾乎所有的IDE中獲得針對(duì)Angular的即時(shí)幫助和反饋。所有這一切,都是為了幫助你編寫(xiě)漂亮的應(yīng)用,而不是絞盡腦汁的讓代碼“能用”。
特點(diǎn):
1、前端組件化,一個(gè)組件由.css樣式文件,.html模板,.ts組件及其模板共同定義了一個(gè)視圖。
2、配置靈活,環(huán)境建好后,通過(guò)ng serve 啟動(dòng)web 服務(wù),打開(kāi)瀏覽器可以瀏覽。
3、響應(yīng)式表單 (reactive forms)
動(dòng)態(tài)表單非常強(qiáng)大、靈活,它在復(fù)雜數(shù)據(jù)輸入的場(chǎng)景下尤其好用,例如動(dòng)態(tài)的生成表單控制器。
4、路由器 (router)link
一種工具,用來(lái)配置和實(shí)現(xiàn) Angular 應(yīng)用中各個(gè)狀態(tài)和視圖之間的導(dǎo)航。這種設(shè)計(jì)對(duì)防止sql注入和腳本跨站攻擊也很有用。
5、服務(wù) (service)
在 Angular 中,服務(wù)就是一個(gè)帶有 @Injectable 裝飾器的類(lèi),它封裝了可以在應(yīng)用程序中復(fù)用的非 UI 邏輯和代碼。 Angular 把組件和服務(wù)分開(kāi),是為了增進(jìn)模塊化程度和可復(fù)用性。 寫(xiě)過(guò)ajax啟用服務(wù)端返回?cái)?shù)據(jù)的同學(xué),在這里你有全新的期待已久的變化。
以下操作30 分鐘即可完成
先決條件
在開(kāi)始之前,請(qǐng)確保你的開(kāi)發(fā)環(huán)境已經(jīng)包含了 Node.js® 和 npm 包管理器。
Node.js
Angular 需要 Node.js 的 8.x 或 10.x 版本。
- 要想檢查你的版本,請(qǐng)?jiān)诮K端/控制臺(tái)窗口中運(yùn)行 node -v 命令。
目前最新版是:v11.2.0
npm 包管理器
Angular、Angular CLI 和 Angular 應(yīng)用都依賴(lài)于由一些庫(kù)所提供的特性和功能,它們主要是 npm 包。要下載和安裝 npm 包,你必須擁有一個(gè) npm 包管理器。
本 "快速上手" 中使用的是 npm 客戶端命令行界面,它已經(jīng)在安裝 Node.js 時(shí)默認(rèn)安裝上了。
要想檢查你是否已經(jīng)安裝了 npm 客戶端,請(qǐng)?jiān)诮K端/控制臺(tái)窗口中運(yùn)行 npm -v 命令。
最新版是:6.4.1
第一步:安裝 Angular CLI
你要用 Angular CLI 來(lái)創(chuàng)建項(xiàng)目、創(chuàng)建應(yīng)用和庫(kù)代碼,并執(zhí)行多種開(kāi)發(fā)任務(wù),比如測(cè)試、打包和發(fā)布。
全局安裝 Angular CLI。
要想使用 npm 來(lái)安裝 CLI,請(qǐng)打開(kāi)終端/控制臺(tái)窗口,并輸入下列命令:
npm install -g @angular/cli
第二部:創(chuàng)建工作空間和初始應(yīng)用
Angular 工作空間就是你開(kāi)發(fā)應(yīng)用的上下文環(huán)境。 每個(gè)工作空間包含一些供一個(gè)或多個(gè)項(xiàng)目使用的文件。 每個(gè)項(xiàng)目都是一組由應(yīng)用、庫(kù)或端到端(e2e)測(cè)試構(gòu)成的文件。
要想創(chuàng)建工作空間和初始應(yīng)用項(xiàng)目:
- 運(yùn)行 CLI 命令 ng new,并提供一個(gè)名字 my-app,如下所示:
ng new my-app
- ng new 會(huì)提示你要把哪些特性包含在初始的應(yīng)用項(xiàng)目中。請(qǐng)按 Enter 或 Return 鍵接受默認(rèn)值。
Angular CLI 會(huì)安裝必要的 Angular npm 包及其它依賴(lài)。這可能要花幾分鐘。
還將創(chuàng)建下列工作空間和初始項(xiàng)目文件:
- 一個(gè)新的工作空間,根目錄名叫 my-app
- 一個(gè)初始的骨架應(yīng)用項(xiàng)目,也叫 my-app(但位于 src 子目錄下)
- 一個(gè)端到端測(cè)試項(xiàng)目(位于 e2e 子目錄下)
- 相關(guān)的配置文件
初始的應(yīng)用項(xiàng)目是一個(gè)簡(jiǎn)單的 "歡迎" 應(yīng)用,隨時(shí)可以運(yùn)行它。
步驟 3:?jiǎn)?dòng)開(kāi)發(fā)服務(wù)器
Angular 包含一個(gè)開(kāi)發(fā)服務(wù)器,以便你能在本地輕松地構(gòu)建應(yīng)用和啟動(dòng)開(kāi)發(fā)服務(wù)器。
- 進(jìn)入工作空間目錄(my-app)。
- 使用 CLI 命令 ng serve 啟動(dòng)開(kāi)發(fā)服務(wù)器,并帶上 --open 選項(xiàng)。
cd my-app ng serve --open
ng serve 命令會(huì)自動(dòng)開(kāi)發(fā)服務(wù)器,并監(jiān)視你的文件變化,當(dāng)你修改這些文件時(shí),它就會(huì)重新構(gòu)建應(yīng)用。
--open(或只用 -o)選項(xiàng)會(huì)自動(dòng)打開(kāi)瀏覽器,并訪問(wèn) http://localhost:4200/。
看,你的應(yīng)用使用一條消息在歡迎你:
驟 4:編輯你的第一個(gè) Angular 組件
組件 是 Angular 應(yīng)用中的基本構(gòu)造塊。 它們?cè)谄聊簧巷@示數(shù)據(jù)、監(jiān)聽(tīng)用戶輸入,并根據(jù)這些輸入采取行動(dòng)。
作為初始應(yīng)用的一部分,CLI 也會(huì)為你創(chuàng)建第一個(gè) Angular 組件。它就是根組件,名叫 app-root。
- 打開(kāi) ./src/app/app.component.ts。
- 把 title 屬性從 'my-app' 修改成 'My First Angular App'。
- src/app/app.component.ts
content_copy @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'My First Angular App!';}
- 瀏覽器將會(huì)用修改過(guò)的標(biāo)題自動(dòng)刷新。不錯(cuò),但是還可以更好看。
- 打開(kāi) ./src/app/app.component.css 并給這個(gè)組件提供一些樣式。
- src/app/app.component.css
content_copy h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%;}
- 字體變?yōu)樗{(lán)色了!