ng-項目結構

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> 節點