Angular專案目錄結構詳解

在上一篇部落格中我們已經通過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程式碼質量檢查的規則，不用管它

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 不用管

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.元件後設資料裝飾器（@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類似，模組也需要裝飾器來裝飾。

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