[轉]Angular項目目錄結構詳解

本文轉自：http://www.javashuo.com/article/p-vwukdobc-no.html

版權聲明：本文爲博主原創文章，轉載請註明地址。若是文中有什麼紕漏或錯誤的話,請留言指正，我會及時更正。若是您以爲本文還不錯的話，記得點個贊呦，但願能幫到你，謝謝。 https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873

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

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

能夠看到，命令行工具自動生成了不少文件和目錄，咱們來講說這些目錄是幹什麼的

首層目錄：

node_modules        第三方依賴包存放目錄
e2e                 端到端的測試目錄  用來作自動測試的
src                 應用源代碼目錄  
.angular-cli.json Angular命令行工具的配置文件。後期可能會去修改它，引一些其餘的第三方的包 好比jquery等 karma.conf.js karma是單元測試的執行器，karma.conf.js是karma的配置文件 package.json 這是一個標準的npm工具的配置文件，這個文件裏面列出了該應用程序所使用的第三方依賴包。實際上咱們在新建項目的時候，等了半天就是在下載第三方依賴包。下載完成後會放在node_modules這個目錄中，後期咱們可能會修改這個文件。 protractor.conf.js 也是一個作自動化測試的配置文件 README.md 說明文件 tslint.json 是tslint的配置文件，用來定義TypeScript代碼質量檢查的規則，不用管它

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

src目錄：

app目錄               包含應用的組件和模塊，咱們要寫的代碼都在這個目錄
assets目錄            資源目錄，存儲靜態資源的  好比圖片
environments目錄      環境配置。Angular是支持多環境開發的，咱們能夠在不一樣的環境下（開發環境，測試環境，生產環境）共用一套代碼，主要用來配置環境的
index.html 整個應用的根html，程序啓動就是訪問這個頁面 main.ts 整個項目的入口點，Angular經過這個文件來啓動項目 polyfills.ts 主要是用來導入一些必要庫，爲了讓Angular能正常運行在老版本下 styles.css 主要是放一些全局的樣式 tsconfig.app.json TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件 tsconfig.spec.json 不用管 test.ts 也是自動化測試用的 typings.d.ts 不用管

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

app目錄（重點） 
app目錄是咱們要編寫的代碼目錄。咱們寫的代碼都是放在這個目錄。 
一個Angular程序至少須要一個模塊和一個組件。在咱們新建項目的時候命令行已經默認生成出來了。 

app.component.ts：這個文件表示組件， 
組件是Angular應用的基本構建模塊，能夠理解爲一段帶有業務邏輯和數據的Html 
咱們來看看app.component.ts中的代碼，並解釋下代碼的意義

下圖是源代碼，我只是把title的值給改了下

來看看每行代碼的意義，有點亂，能夠複製到編輯器上去看。

/*這裏是從Angular核心模塊裏面引入了component裝飾器*/ import {Component} from '@angular/core'; /*用裝飾器定義了一個組件以及組件的元數據 全部的組件都必須使用這個裝飾器來註解*/ @Component({ /*組件元數據 Angular會經過這裏面的屬性來渲染組件並執行邏輯 * selector就是css選擇器，表示這個組件能夠經過app-root來調用，index.html中有個<app-root>Loading...</app-root>標籤，這個標籤用來展現該組件的內容 *templateUrl 組件的模板，定義了組件的佈局和內容 *styleUrls 該模板引用那個css樣式 * */ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) /*AppComponent原本就是一個普通的typescript類，可是上面的組件元數據裝飾器告訴Angular，AppComponent是一個組件，須要把一些元數據附加到這個類上，Angular就會把AppComponent當組件來處理*/ export class AppComponent { /*這個類實際上就是該組件的控制器，咱們的業務邏輯就是在這個類中編寫*/ title = '學習Angular'; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

組件相關的概念： 
1.組件元數據裝飾器（@Component） 
簡稱組件裝飾器，用來告知Angular框架如何處理一個TypeScript類. 
Component裝飾器包含多個屬性，這些屬性的值叫作元數據，Angular會根據這些元數據的值來渲染組件並執行組件的邏輯

2.模板（Template） 
咱們能夠經過組件自帶的模板來定義組件的外觀，模板以html的形式存在，告訴Angular如何來渲染組件，通常來講，模板看起來很像html，可是咱們能夠在模板中使用Angular的數據綁定語法，來呈現控制器中的數據。

3.控制器（controller） 
控制器就是一個普通的typescript類，他會被@Component來裝飾，控制器會包含組件全部的屬性和方法，絕大多數的業務邏輯都是寫在控制器裏的。控制器經過數據綁定與模板來通信，模板展示控制器的數據，控制器處理模板上發生的事件。

裝飾器，模板和控制器是組件的必備要素。還有一些可選的元素，好比：

輸入屬性（@inputs）:是用來接收外部傳入的數據的,Angular的程序結構就是一個組件樹，輸入屬性容許在組件樹種傳遞數據 
提供器（providers）：這個是用來作依賴注入的 
生命週期鉤子（LifeCycle Hooks）：一個組件從建立到銷燬的過程當中會有多個鉤子會被觸發，相似於Android中的Activity的生命週期 
樣式表：組件能夠關聯一些樣式表 
動畫（Animations）： Angular提供了一個動畫包來幫助咱們方便的建立一些跟組件相關的動畫效果，好比淡入淡出等 
輸出屬性（@Outputs）：用來定義一些其餘組件可能須要的事件或者用來在組件之間共享數據

簡單來講，組件的中關係就以下圖所示

下面咱們來看看模塊文件 
app.module.ts：這個文件表示模塊

與AppComponent相似，模塊也須要裝飾器來裝飾。

好了，新項目的目錄結構就是這樣!

若是你以爲本文對你有幫助，麻煩動動手指頂一下，算是對本文的一個承認。也能夠關注我web前端的博客專欄，我會不按期的更新，若是文中有什麼錯誤的地方，還望指正，謝謝！