在上一篇中我們進行了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---目录结构说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。