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

　　

初探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準備的一些附加配置.

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