Angular4學習(初始檔案目錄結構解讀)

整體檔案結構

應用的原始碼目錄

一級檔案內容

• E2e：端到端測試目錄，做自動化測試
• node_modules：專案依賴包
• Src： 應用的原始碼目錄
• 其他
  
  • Angular-cli.json : angular命令列工具的配置檔案
  • karma.conf.js: kamar自動化測試的整合器的執行器
  • Package.json :做angular開發用到的各個模組版本
  • Protractor.conf.js :自動化測試執行的配置檔案
  • tslint.json :定義程式碼質量檢查的規則
  • tsconfig.json :typescript編譯器的配置，已經按照angular專案標準已經配好了，大家不用動
  • ReadMe:angular命令列工具生成的標準說明
  • Node_modules library root: 所需的第三方依賴包

應用程式目錄

• App :包含我們應用的元件和模組（我們的程式碼主要寫在這裡 ）
  ○ App.component.css:
  ○ App.component.html
  ○ App.component.spec.ts

一個angular程式至少需要一個模組+一個元件，下面的模組和元件是命令列工具為我們自動生成的

○ App.component.ts: 元件：整個應用的基礎(詳見下圖)
○ App.module.ts：模組，帶著裝飾器的typescript類(詳見下圖)

• Assets :存放靜態資源，比如用到的圖片
• Environments:環境配置，angular支援多環境開發，我們的程式碼會共用於多個環境，開發環境、生產環境，測試環境，但不同的環境配置不一樣
  
  • environment.prod.ts:存放不同環境配置檔案，編譯時會將不同環境的配置檔案編譯到不同環境的程式碼中去
• Index.html:整個應用的根HTML,系統一起來，就訪問這個檔案
• Main.ts:整個web應用指令碼執行的入口點，通過這個檔案來啟動整個專案
• Polyfills.ts:匯入一些庫，來適應一些版本比較老的瀏覽器
• Style.css:程式的全域性樣式
• Test.ts:與karma檔案一樣用來做自動化測試

元件(App.component.ts)

模組(App.module.ts)