初探AngularJS6.x---目錄結構說明

 

  在上一篇中我們進行了AngularJS6.x的基本環境搭建,並試著建了一個專案conk-out,今天我們來在這個專案上進行一些擴充套件.

  我們的專案程式碼包括angular的元件,模版,樣式檔案,圖片還有其他我們自己寫的都集中在src裡,這個跟java是一樣的,這個目錄以外的一些目錄和檔案則是幫助我們構建專案用的,所以可以暫時不用管它.可以使用treesrc/命令以樹的形式展示出src目錄下的所有目錄及檔案,如下圖所示:

  在app裡我們看到了一系列和app相關的東西,如果檢視裡面的程式碼我們會發現,他們主要用Html模版,Style檔案,構建了一個appComponent,當然還有一個單元測試.這裡的元件可以說是一個根元件,可以理解為專案從這裡開始,其他的元件都是基於appComponent的,我更傾向於把他成為一個畫布或入口.app目錄裡的app.module.ts,他告訴Angular如何去封裝或渲染我們的應用程式,現在我們看,會發現他裡面只宣告引入了一個app.component,後面隨著業務的變化,我們會宣告引入越來越多的元件.

  在assert裡,這裡我們可以放一些圖片或其他檔案,方便我們在構建專案時使用.

  browserslist裡主要存放一些在不同前端工具中進行共享的目標瀏覽器的配置檔案.

  Environments這裡主要是針對不同的環境(開發/測試/生產)產生的不同配置,他會在我們構建的時候進行動態的替換.這個相當於我們在Java裡面使用maven的profile,不同的環境就啟用不同的profile.

  Favicon.ico:網站title上的小圖示

  Index.html:專案中的首頁,在構建的時候,angular會給我們自動新增js和css,一般情況下不需要我們手動去編輯.

  Karma.conf.js:針對karmatestrunner的配置,我們可以使用ngtest來執行

  Main.ts:即是使用JITCompiler編譯專案的入口,同時也是在瀏覽器裡執行時載入專案根模組的入口.我們也可以通過在構建和啟動專案時追加—aot引數指定編譯器為AOPCompiler,並不需要改動任何程式碼.

  Polyfills.ts:不同的瀏覽器對web標準的支援程度是不同的.Polyfills幫助我們使這些不同的地方標準化.

  Styles.css:這是全域性的css,這裡的改動會影響到整個app的樣式.

  Test.ts:單元測試的入口,這裡可能有些慣例性的配置會顯得比較陌生,一般我們不會編輯這個檔案.

  Tsconfig.{app|spec}.json:TypeScript編譯器為AngularApp和單元測試(tsconfig.spec.json)準備的配置

  Tslint.json:Linting幫助我們保持程式碼一致,而tslint.json則是為TSLint和Codelyzer準備的一些附加配置.

  今天的目錄說明就講到這裡.