為什么使用 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%;}
- 字體變為藍色了!