[從 0 開始的 Angular 生活]No.2 檔案架構

發表於 | 更新於 | 分類於

前言

緊接著了解 Angular 專案內的檔案結構，我覺得這是相當重要的。畢竟只有在認識了這些檔案結構後，才有辦法因應日後專案的調整，也才知道要在哪裡修改對應的配置。

Angular 專案的檔案結構

開啟 VS Code ，並且載入 Angular 專案，會看到旁邊一排的檔案結構。

angular.json

angular.json 這隻檔案是 Angular CLI 的設定檔，所以這個檔案裡面可以看到有非常多的參數，未來我們也可能會到裡面調整一些參數，用到的時候再來了解就可以了。

.editorconfig

.editorconfig 是一個非常常見的編輯器設定檔，這個檔案會告訴我們目前使用的編輯器怎麼處理 tab 符號、斷行符號等等。

詳細的設定可以到這裡了解。

.gitignore

.gitignore 是一個 git 專用的檔案，用來告訴 git 要忽略這個資料夾那些檔案不要加入版本控管。

karma.conf.js

karma 是一個單元測試工具，當我們需要做單元測試時可能會需要用到它。

package.json

目前專案 npm 的設定檔，這個檔案相當的重要，因為上面記載著這個專案用了哪些相依套件。

而其中的 scripts 區塊更是定義了未來在開發 Angular 時經常用到的命令，這邊也可以看到之前用過的命令。

protractor.conf.js

同樣也是測試時使用的設定檔，這是 Angular 實作 End-To-End Testing 時會用到的設定檔，到時候用到再來研究就好了。

tsconfig.json

這個設定檔則是 TypeScript 的相關設定存放的地方，這個檔案通常也不太需要修改。

tslint.json

TSLint 是一套開源的 TypeScript 程式碼風格檢查器，白話點就是類似 ESLint ，這個設定檔就是用來設定 TSLint 所有檢查的規則。

node_modeles 資料夾

這個資料夾非常肥大，主要內容為我們使用 npm install 後所有被下載下來所有的套件，基本上這個資料夾的內容都是透過 npm 來管理的，不太需要自己管理它。

e2e 資料夾

跟先前提到的 protractor.conf.js 有關，是一個 End-To-End Testing 所有測試的指定檔都被放在這裡。而在 Angular ，所有 End-To-End Testing 的程式碼都是使用 TypeScript 撰寫，如果未來會用到再回過頭來寫這些檔案吧。

重頭戲 src 資料夾

src 顧名思義就是整個 Angular 應用程式主要的原始碼，全部都放在這個資料夾底下。而這個資料夾的目錄結構完全按照 Angular 官網的 Style Guide 建立而成，所以我們只要按照這些規範來開發基本上不會出什麼大錯。

接著我們來看 src 底下的目錄結構

app 資料夾

這個資料夾裡面就是應用程式的主要檔案。

index.html、style.css

畢竟 Angular 還是一個 web 的應用程式，既然是 web 就有 HTML，檔名預設就是 index.html。

同理，自然也會有 style.css ，所以當我們需要 CSS 定義時，可以修改這隻檔案，但是這支並不是單純的 CSS ，在這裡它是 「global styles」也就是整個應用程式都會套用到的 CSS 定義，全部都可以寫在這裡。

main.ts

在 Angular 內，我們只能寫 TypeScript，所以這個 main.ts 就是 Angular 中 JavaScript 程式的進入點，也就是主程式。

1
2
3
4
5
6
7
8
9
10
11
12
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

其中 platformBrowserDynamic().bootstrapModule(AppModule) 傳入了 AppModule 參數，而這個參數我們循著它的路徑找到位於 app 資料夾內的 app.module.ts 檔。

發現這隻檔案同樣的引用了其他的檔案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

從這邊我們可以看出一些端倪，看起來 app.module.ts 像是在管理要載入那些元件。
而從程式碼看來又載入了 AppComponent ，於是順著追查找到了 app.component.ts 檔案，而這支檔案裡面記載著對應那些 template、style 的路徑，如：

1
2
3
4
5
6
7
8
9
10
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'firstAngular';
}

回到 app.module.ts ，這裡的 bootstrap 是啟動的意思，意思就是要啟動 AppComponent 。

也就是說 app.module.ts 指定了 AppComponent 當成整個 Angular 應用程式的根元件。

而目前我們看到的這些東西都是透過 Angular CLI 自動產生的範本，之後會一一的修改這些檔案。

最後還有一個 app.component.spec.ts 檔案，這是一個單元測試的定義檔，我們可以透過 component 附屬的 spec 檔來去定義要如何測試這個 component，所以當我們之後要寫單元測試時，我們就會需要修改這個檔案。

assets 資料夾

這個 assets 在英文上有資產的意思，通常意味著所有的靜態檔案，當 Angular 應用程式需要一些靜態檔案，如額外的 JavaScript、JQery、CSS、圖片等等，我們可以統一放置在這個資料夾下。

而這個資料夾底下的 .gitkeep 是給 Git 看的，因為我們在做 Git 版控時，如果有一個資料夾底下一個檔案都沒有，這個資料夾是不會進入版控的。因此這個 .gitkeep 檔是為了這個目的設計的，讓 assets 資料架內就算沒有任何檔案也能被加入 Git 版控。

environments 資料夾

這個資料夾裡面所定義的是 Angular 專案內的環境變數，而這裡面的檔案也都是由 TypeScript 寫成，也就是說我們會透過 TypeScript 定義一些環境變數。說白一點就只是個物件，我們可以在裡面新增一些額外的屬性。

這個資料夾內有兩個檔案，分別是 environment.ts 與 environment.prod.ts ，差別在於 environment.prod.ts 是只有當 build 出 production 版的應用程式時才用得上，否則在開發時期都是使用另一個設定檔。

polyfills.ts

polyfills 代表的是，當 Angular 執行時，如果使用者使用相對較舊的瀏覽器像是萬惡的 IE 系列，有些功能由於使用了一些全新的瀏覽器特性，所以有可能導致程式碼無法順利執行。而這個 polyfills 就是幫助 Angular 在這些比較舊的瀏覽器也能順利運行的關鍵。

test.ts

這個檔是被前面介紹到的 Karma.conf.js 檔案使用，是拿來做單元測試才會用到的。

tsconfig.app.json

剛才我們講過一個類似的，不過那個是在根目錄下的 tsconfig.json ，而這個設定檔是繼承 tsconfig.json 並做出一些額外的定義。而這個檔案就是針對 app 資料夾裡面所有 TypeScript 來進行一些設定，比起最外層的設定，我們比較有可能修改到這一份，一樣是有用到再來修改即可。

tsconfig.spec.json

是我們在寫單元測試的 TypeScript 程式碼的時候可能會需要用到的一些設定檔。

typings.d.ts

這個也是 TypeScript 會用到的設定檔，主要的用途是定義那些額外的 TypeScript 型別定義，比方說當我們想把 JQuery 也整合進 Angular ，我們就很有可能修改到這隻檔案，可以在這隻檔案內宣告一些 Angular 內會用到的全域變數，例如 $ ：

1
declare var $: any;

這麼做之後，所有 Angular 內的 TypeScript 程式碼都可以使用 $ 這個全域變數，於是在編譯時就不會出錯了，而這部分也是需要用到時才要修改的。

不過這支檔案，我的 Angular CLI 版本是 7.3.9 版，似乎沒有自動產生這隻檔案，因此這隻檔案很可能之後要自己手動增加或是已經捨棄不用了。

小結

總算是介紹完 Angular 的檔案結構了，除了 TypeScript 相關的檔案之外，其他都是蠻眼熟的檔案，然後也明白 Angular 也是元件、元件、元件堆起來的網站，這點跟 Vue 蠻像的，目前比較在意 TypeScript 的部分，設定檔這麼多支感覺起來頗複雜，再加上不熟 Angular 語法，可以預期是場硬仗。

0%