為什么使用 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)色了！