Overview
angular 入坑記錄的筆記第一篇，完成開發環境的搭建，以及如何通過 angular cli 來建立第一個 angular 應用。入坑一個多星期，通過學習官方文件以及手摸手的按教程敲官方的快速上手專案，很像後端，嗯，完美的契合了我這種後端開發人員。
對應官方文件地址：
配套程式碼地址：angular-practice/src/getting-started
Contents
Knowledge Graph
Step by Step
通過 Angular CLI 建立第一個 Angular 應用
開發環境搭建
前提條件
- node.js 版本高於 10.9.0
- 包含 npm 客戶端
## 檢視 node 版本
node -v
## 檢視 npm 版本
npm -v
複製程式碼
全域性安裝 Angular CLI
## 在電腦上以全域性安裝的方式安裝 angular cli
npm install -g @angular/cli
複製程式碼
驗證是否安裝成功
## 檢視 angular cli 版本
ng v
## 檢視 angular cli 中的各種命令解釋
ng help
複製程式碼
執行第一個 Angular 應用
通過 Angular CLI 命令來建立一個新的應用
## 指定位置，建立新的 angular 應用
ng new my-app
複製程式碼常用命令引數
| options | 解釋 |
|---|---|
| --force | 強制覆蓋現有檔案 |
| --skipInstall | 建立專案時跳過 npm install 命令 |
| --strict | 在程式碼中使用更嚴格的 typescript 編譯選項 |
執行專案
## 執行專案
ng serve
複製程式碼常用命令引數
| options | 解釋 |
|---|---|
| --open / -o | 是否直接開啟瀏覽器 |
| --port | 指定程式執行的埠 |
專案結構、檔案功能瞭解
-
e2e - 端到端測試檔案
- src - 單元測試原始碼路徑
- app.e2e-spec.ts - 針對當前應用的端到端單元測試檔案
- app.po.ts - 單元測試原始檔
- protractor.conf.js - protractor 測試工具配置檔案
- tsconfig.json - 繼承於工作空間根目錄的 typescript 配置檔案
- src - 單元測試原始碼路徑
-
src - 工作空間 [1] 最外層根專案的原始碼路徑
- app - 系統所提供的各種功能
- app-routing.module.ts - 專案的路由模組，用來定義專案的前端路由資訊
- app.component.html - 專案的根元件所關聯的 HTML 頁面
- app.component.scss - 專案的根元件 HTML 頁面的樣式資訊
- app.component.spec.ts - 專案的根元件單元測試檔案
- app.component.ts - 專案的根元件邏輯
- app.module.ts - 應用的根模組
- assets - 系統需要使用的靜態資原始檔
- environments - 針對不同環境的構建配置選項
- favicon.ico - 網站圖示
- index.html - 應用的主頁面
- main.ts - 應用的入口程式
- polyfills.ts - 針對不同瀏覽器對於原生 API 的支援程度不相同的情況，用來抹平不同瀏覽器之間的支援差異 [2]
- styles.scss - 專案的全域性樣式檔案
- test.ts - 單元測試的主入口程式
- app - 系統所提供的各種功能
-
.editorconfig - 針對不同程式碼編輯器間的程式碼風格規範
-
.gitignore - git 忽略的檔案
-
angular.json - 應用於當前工作空間的一些預設配置以及供 angular cli 和開發工具使用的配置資訊
-
browserslist - 專案所針對的目標瀏覽器 [3]
-
karma.conf.js - 基於 node.js 的 javascript 測試執行過程管理工具
-
package-lock.json - 針對當前工作空間使用到 npm 包，安裝到 node_modules 時的版本資訊
-
package.json - 當前工作空間中所有專案會使用到的 npm 包依賴
-
README.md - 當前工作空間最外層根應用的簡介檔案
-
tsconfig.app.json - 當前工作空間最外層根應用的專屬 typescript 配置檔案
-
tsconfig.json - 當前工作空間中各個專案的基礎 typescript 配置檔案
-
tsconfig.spec.json - 當前工作空間最外層根應用的專屬 tslint 配置檔案
-
tslint.json - 當前工作空間中各個專案的基礎 tslint 配置檔案
佔坑
作者：墨墨墨墨小宇
個人簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程式設計師，槍手死忠，喵星人。於2016年12月開始.NET程式設計師生涯，微軟.NET技術的堅定堅持者，立志成為雲養貓的少年中面向谷歌程式設計最厲害的.NET程式設計師。
個人部落格：yuiter.com
部落格園部落格：www.cnblogs.com/danvic712