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