Angular項目結構

• 各類結構風格？
  • 初始項目結構（加粗的是必須有的，普通的是通常會有的，斜體的是項目一般會自定義的）
    • angular.json或者.angular-cli.json（工做區配置文件）
      • 爲工做區中的全部項目指定 CLI 的默認配置，包括 CLI 要用到的構建、啓動開發服務器和測試工具的配置項，好比 TSLint，Karma 和 Protractor。
      • 在 angular.json 的頂級，一些屬性用於配置工做區，其中的 projects 區則包含其他的針對每一個項目的配置項。CLI 在工做空間級的默認設置能夠被項目級的設置所覆蓋，而項目級的設置能夠被命令行中的設置所覆蓋。
      • 還定義了項目的許多配置，如proxy
    • package.json（工做區配置文件）：配置工做空間中全部項目可用的 npm包依賴 。
      • 定義了name、version、license等基本信息
      • 定義了封裝的命令
      • 定義了使用的第三方package及其版本
        想要安裝的依賴，有可能只是配了用哪一個大版本，可使用^、~等符號。^指使用該大版本下的最新版本。
    • package-lock.json（工做區配置文件）：提供 npm 客戶端安裝到 node_modules 的全部軟件包的版本信息。真實安裝的依賴，基本和package.json中的配置對應，但會有具體的真實下載的依賴包的版本、下載地址、完整性檢查碼、對其餘包的依賴等。
    • browserslist（應用配置文件）：可無。配置各類前端工具之間共享的目標瀏覽器和 Node.js 版本。編譯時會依此調整輸出的js和css。
    • karma.conf.js（應用配置文件）：應用專屬的 Karma 配置。主要目標是爲開發人員提供高效的測試環境。側重於單元測試。是一個test runner，。
    • tsconfig.json（應用配置文件）：工做空間中各個項目的默認 TypeScript 配置。
    • tslint.json（應用配置文件）：工做空間中各個項目的默認 TSLint 配置。各類代碼檢查的配置。
    • README.md（工做區配置文件）：可無。根應用的簡介文檔。項目簡介。
    • .editorconfig（工做區配置文件）：可無。代碼編輯器的配置。如編碼、縮進方式、換行、trim空格等。通用於各IDE，但可能須要安裝插件，如VS Code須要安裝EditorConfig for VS Code。
    • .gitignore（工做區配置文件）：可無。指定 Git 應忽略的沒必要追蹤的文件。Git的忽略配置文件，即哪些文件/文件夾不須要由Git管理。
    • app.js：可無。自定義的入口文件，可以使用node app.js命令啓動應用。node.js語法，在webserver啓動時執行，能夠經過require引入node.js庫並使用。
    • protractor.conf.js：可無。基於angular的前端自動化測試工具。側重於端到端測試。
    • e2e/：端到端測試。常和protractor配合使用。
    • node_modules/
    • src/：根項目的源文件。
      • index.html在angular.json或者.angular-cli.json中配置。
      • main.ts：在angular.json或者.angular-cli.json中配置。入口？默認定義了environment.production爲true時，啓用enableProdMode();開關。
      • polyfills.ts
      • styles.css
      • environments/：在angular.json或者.angular-cli.json中配置。當使用ng build -prod命令時使用environment.prod.ts，不然使用environment.ts。會致使main.ts中是否會啓用enableProdMode();開關。
        • environment.prod.ts
        • environment.ts
      • assets/
        • css
        • images
        • fonts
        • icons
        • i18n
        • json
      • app/
        • app-routing.module.ts / app.routing.ts
        • app.module.ts
        • app.component.html
        • app.component.ts
        • app.component.css