在上一篇中我們進行了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準備的一些附加配置.

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

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