在上一篇中我們進(jìn)行了AngularJS6.x的基本環(huán)境搭建,并試著建了一個項目conk-out,今天我們來在這個項目上進(jìn)行一些擴(kuò)展.
我們的項目代碼包括angular的組件,模版,樣式文件,圖片還有其他我們自己寫的都集中在src里,這個跟java是一樣的,這個目錄以外的一些目錄和文件則是幫助我們構(gòu)建項目用的,所以可以暫時不用管它.可以使用treesrc/命令以樹的形式展示出src目錄下的所有目錄及文件,如下圖所示:
在app里我們看到了一系列和app相關(guān)的東西,如果查看里面的代碼我們會發(fā)現(xiàn),他們主要用Html模版,Style文件,構(gòu)建了一個appComponent,當(dāng)然還有一個單元測試.這里的組件可以說是一個根組件,可以理解為項目從這里開始,其他的組件都是基于appComponent的,我更傾向于把他成為一個畫布或入口.app目錄里的app.module.ts,他告訴Angular如何去封裝或渲染我們的應(yīng)用程序,現(xiàn)在我們看,會發(fā)現(xiàn)他里面只聲明引入了一個app.component,后面隨著業(yè)務(wù)的變化,我們會聲明引入越來越多的組件.
在assert里,這里我們可以放一些圖片或其他文件,方便我們在構(gòu)建項目時使用.
browserslist里主要存放一些在不同前端工具中進(jìn)行共享的目標(biāo)瀏覽器的配置文件.
Environments這里主要是針對不同的環(huán)境(開發(fā)/測試/生產(chǎn))產(chǎn)生的不同配置,他會在我們構(gòu)建的時候進(jìn)行動態(tài)的替換.這個相當(dāng)于我們在Java里面使用maven的profile,不同的環(huán)境就激活不同的profile.
Favicon.ico:網(wǎng)站title上的小圖標(biāo)
Index.html:項目中的首頁,在構(gòu)建的時候,angular會給我們自動添加js和css,一般情況下不需要我們手動去編輯.
Karma.conf.js:針對karmatestrunner的配置,我們可以使用ngtest來運(yùn)行
Main.ts:即是使用JITCompiler編譯項目的入口,同時也是在瀏覽器里運(yùn)行時加載項目根模塊的入口.我們也可以通過在構(gòu)建和啟動項目時追加—aot參數(shù)指定編譯器為AOPCompiler,并不需要改動任何代碼.
Polyfills.ts:不同的瀏覽器對web標(biāo)準(zhǔn)的支持程度是不同的.Polyfills幫助我們使這些不同的地方標(biāo)準(zhǔn)化.
Styles.css:這是全局的css,這里的改動會影響到整個app的樣式.
Test.ts:單元測試的入口,這里可能有些慣例性的配置會顯得比較陌生,一般我們不會編輯這個文件.
Tsconfig.{app|spec}.json:TypeScript編譯器為AngularApp和單元測試(tsconfig.spec.json)準(zhǔn)備的配置
Tslint.json:Linting幫助我們保持代碼一致,而tslint.json則是為TSLint和Codelyzer準(zhǔn)備的一些附加配置.
今天的目錄說明就講到這里.
