一、Overview
angular 入坑記錄的筆記第一篇，完成開發環境的搭建，以及如何通過 angular cli 來創建第一個 angular 應用，入坑一個多星期，通過學習官方檔案以及手摸手的按教程敲官方的快速上手專案，很像后端，嗯，完美的契合了我這種后端開發人員，
對應官方檔案地址：
- 搭建本地開發環境和作業空間
- ng new
- ng serve
- 作業區和專案檔案結構
配套代碼地址：angular-practice/src/getting-started
二、Contents
- Angular 從入坑到棄坑 - Angular 使用入門
三、Knowledge Graph
四、Step by Step
4.1、通過 Angular CLI 創建第一個 Angular 應用
4.1.1、開發環境搭建
前提條件
- 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
4.1.2、運行第一個 Angular 應用
通過 Angular CLI 命令來創建一個新的應用
## 指定位置，創建新的 angular 應用 ng new my-app
常用命令引數
| options | 解釋 |
|---|---|
| --force | 強制覆寫現有檔案 |
| --skipInstall | 創建專案時跳過 npm install 命令 |
| --strict | 在代碼中使用更嚴格的 typescript 編譯選項 |
運行專案
## 運行專案 ng serve
常用命令引數
| options | 解釋 |
|---|---|
| --open / -o | 是否直接打開瀏覽器 |
| --port | 指定程式運行的埠 |
4.2、專案結構、檔案功能了解
-
e2e - 端到端測驗檔案
-
src - 單元測驗源代碼路徑
- app.e2e-spec.ts - 針對當前應用的端到端單元測驗檔案
- app.po.ts - 單元測驗源檔案
-
protractor.conf.js - protractor 測驗工具組態檔
-
tsconfig.json - 繼承于作業空間根目錄的 typescript 組態檔
-
-
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 - 單元測驗的主入口程式
-
-
.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 組態檔
1 作業空間類似于 .NET 專案中的解決方案，在一個作業空間內可以創建多個的專案? 2 現代瀏覽器支持的某些原生 API，當用戶使用老版本的瀏覽器或某些瀏覽器時并不支持，只要使用了 polyfills 這個庫， 即可對于這些無法使用的瀏覽器添加支持，使用方法也無需更改（PS：針對的是原生的 API）? 3 還是因為不同瀏覽器支持的特性不同，或者是 css 樣式前綴不同，通過 browserslist 來告訴專案中的各種前端工具，完成自動配置的程序?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/149376.html
標籤：JavaScript
上一篇：簡明 homebrew