Angular-cli新建項目目錄結構詳解

在上一篇博客中我們已經通過Angular CLI命令行工具創(chuàng)建出來一個全新的Angular項目，要想寫項目，首先我們要先搞清楚項目的目錄結構是怎樣的，每個文件又有什么意義，文件中的代碼又起到什么作用。

首先看一下整體的目錄結構：

可以看到，命令行工具自動生成了很多文件和目錄，我們來說說這些目錄是干什么的

首層目錄：

node_modules 第三方依賴包存放目錄

e2e 端到端的測試目錄 用來做自動測試的

src 應用源代碼目錄

.angular-cli.json Angular命令行工具的配置文件。后期可能會去修改它，引一些其他的第三方的包 比如jquery等

karma.conf.js karma是單元測試的執(zhí)行器，karma.conf.js是karma的配置文件

package.json 這是一個標準的npm工具的配置文件，這個文件里面列出了該應用程序所使用的第三方依賴包。實際上我們在新建項目的時候，等了半天就是在下載第三方依賴包。下載完成后會放在node_modules這個目錄中，后期我們可能會修改這個文件。

protractor.conf.js 也是一個做自動化測試的配置文件

README.md 說明文件

tslint.json 是tslint的配置文件，用來定義TypeScript代碼質量檢查的規(guī)則，不用管它

src目錄：

app目錄 包含應用的組件和模塊，我們要寫的代碼都在這個目錄

assets目錄 資源目錄，存儲靜態(tài)資源的 比如圖片

environments目錄 環(huán)境配置。Angular是支持多環(huán)境開發(fā)的，我們可以在不同的環(huán)境下(開發(fā)環(huán)境，測試環(huán)境，生產環(huán)境)共用一套代碼，主要用來配置環(huán)境的

index.html 整個應用的根html，程序啟動就是訪問這個頁面

main.ts 整個項目的入口點，Angular通過這個文件來啟動項目

polyfills.ts 主要是用來導入一些必要庫，為了讓Angular能正常運行在老版本下

styles.css 主要是放一些全局的樣式

tsconfig.app.json TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件

tsconfig.spec.json 不用管

test.ts 也是自動化測試用的

typings.d.ts 不用管

app目錄(重點)

app目錄是我們要編寫的代碼目錄。我們寫的代碼都是放在這個目錄。

一個Angular程序至少需要一個模塊和一個組件。在我們新建項目的時候命令行已經默認生成出來了。?

參考鏈接：http://blog.csdn.net/yuzhiqiang_1993/article/details/71191873

總結

以上是生活随笔為你收集整理的angular 标准目录结构_Angular-cli新建项目目录结构详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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