第一個 Angular 應用程式

聆耳吟風發表於2021-06-08
Angular
node download
https://nodejs.org/zh-cn/
全域性安裝
npm install @angular/cli -g
指定版本
npm install @angular/cli@8.3.29 -g
angular-cli versions
https://www.npmjs.com/package/@angular/cli
檢查安裝版本
ng version
建立專案
ng new app-name
工程目錄
┌─ e2e
├─ src
├─ angular.json
│  (Angular 應用程的配置檔案)
│
├─ karma.conf.js
│  (karmar 單元測試配置檔案)
│
├─ package.json
│  (npm包管理及專案命令配置檔案)
│
├─ tsconfig.app.json
│  (TypeScript 配置檔案, 在 angular.json 中 architect/build/options/tsConfig)
│
├─ tsconfig.json
│  (TypeScript 配置檔案)
│
│  tsconfig.json 和 tsconfig.app.json 的區別:
│  1. tsconfig.app.json 繼承自 tsconfig.json
│  2. tsconfig 中配置的是 TypeScript 的基本配置
│     - 儲存時編譯
│     - 指定ES版本等
│     - ···
│  3. tsconfig.app 中配置的是和專案有關的
│     - files 指定一些ts檔案
│     - include/exclude 包含/排除一些檔案
│     - ···
│  (具體配置資訊參見: https://www.tslang.cn/docs/handbook/tsconfig-json.html)
│
└─ tslint.json
   (TypeScript 程式碼約束配置檔案)
src 目錄
┌─ app
│  (應用程式內容目錄)
│
├─ assets
│  (靜態資源目錄, 在 angular.json 中 architect/build/options/assets)
│
├─ environments
│  (環境變數目錄, 在 angular.json 中 architect/build/configurations)
│
│  在不同環境編譯時指定 configuration 可以編譯成不同的配置檔案, 例如:
│  - environments
│    - environment.prod.ts  -- 正式
│  ————————————————————————————————
│  - angular.json/.../architect/build/configurations
│    "production": { 
│       "fileReplacements": [
│           {
│               "replace": "src/environments/environment.ts",
│                with: "src/environments/environment.prod.ts"
│           }
│       ]
│    }
│  ————————————————————————————————
│ - package.json/scripts
│   "build-prod": "ng build --configuration=production"
│  ————————————————————————————————
│ - npm run build-prod
│
├─ index.html
│  (Angular 應用入口頁面, 在 angular.json 中 architect/build/options/index)
│
├─ main.ts
│  (Angular 應用啟動入口, 在 angular.json 中 architect/build/options/main)
│
├─ polyfills.ts
│  (膩子指令碼, 相容低版本瀏覽器, 在 angular.json 中 architect/build/options/polyfills)
│
├─ style.scss
│  (全域性樣式, 在 angular.json 中 architect/build/options/styles)
│
└─ test.ts
   (單元測試, 在 angular.json 中 architect/test/options/main)
app 目錄
┌─ app.module.ts
│  (根模組, 在 main.ts 中, platformBrowserDynamic().bootstrapModule(AppModule))
│  在一個Angular應用中只能有一個根模組, 並且在 main.ts 中建立
│
├─ app.component.ts
│  (根元件, 在根模組中宣告)
│
└─ app-routing.module.ts
   (根路由, 在 app.module 中引入)

相關文章