ng啟動過程 目錄結構 介紹 文件 main.js 描述：模塊化啟動入口 職責：載入啟動根模塊 AppModule 描述：項目根模塊 職責：把組件、服務、路由、指令等組織到一起，設置啟動組件為根組件 AppComponent 描述：項目根組件 職責：替換掉 文件中的 `` 節點 ...
ng啟動過程
目錄結構
.
├── e2e 端到端測試（暫且不關心）
├── node_modules npm安裝的第三方包
├── src 存放業務源碼
├── .angular-cli.json AngularCLI腳手架工具配置文件
├── .editorconfig 針對編輯器的代碼風格約束
├── .gitignore Git倉庫忽略配置項
├── karma.conf.js 測試配置文件（給karma用的，暫且不用關心）
├── package.json 項目包說明文件
├── protractor.conf.js 端到端測試配置文件（暫且不用關心）
├── README.md 項目說明文件
├── tsconfig.json TypeScript配置文件
└── tslint.json TypeScript代碼風格校驗工具配置文件（類似於 eslint）npm scripts 介紹
...
"scripts": {
"ng": "ng", 運行查看 Angular CLI 腳手架工具使用幫助
"start": "ng serve", 運行開發模式
"build": "ng build --prod", 運行項目打包構建（用於發佈到生成環境）
"test": "ng test", 運行karma單元測試
"lint": "ng lint", 運行TypeScript代碼校驗
"e2e": "ng e2e" 運行protractor端到端測試
},
....angular-cli.json 文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "my-app"
},
"apps": [
{
"root": "src", 源碼根目錄
"outDir": "dist", 打包編譯結果目錄
"assets": [ 存放靜態資源目錄
"assets",
"favicon.ico"
],
"index": "index.html", 單頁面
"main": "main.ts", 模塊啟動入口
"polyfills": "polyfills.ts", 用以相容低版本瀏覽器不支持的 JavaScript 語法特性
"test": "test.ts", 測試腳本
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app", 使用腳手架工具創建組件的自動命名首碼
"styles": [ 全局樣式文件
"styles.css"
],
"scripts": [], 全局腳本文件
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": { 端到端測試相關配置
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [ TypeScript代碼風格校驗相關配置
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": { karma單元測試相關配置
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": { 預設尾碼名
"styleExt": "css",
"component": {}
}
}
main.js
- 描述：模塊化啟動入口
- 職責：載入啟動根模塊
AppModule
- 描述：項目根模塊
- 職責：把組件、服務、路由、指令等組織到一起，設置啟動組件為根組件
AppComponent
- 描述：項目根組件
- 職責：替換掉
index.html文件中的<app-root></app-root>節點
