組件裡的 URLs

絕對路徑

組件常常會要使用外部模板跟風格的檔案,我們在 templateUrlstyleUrls 特性中用 URL 定義這些檔案,就像這樣:

@Component({
  selector: 'absolute-path',
  templateUrl: 'app/some.component.html',
  styleUrls:  ['app/some.component.css']
})

預設中,我們必須填上絕對路徑的 URL,也就是完整路徑,但是這樣很麻煩,檔案規模變很大時,你大概也記不起來完整路徑。那有沒有更好的方法?

組件相對路徑 (Component-Relative Path)

當然有。我們可以只要輸入和組件同一層的相對路徑 (Component-Relative Path)。
首先我們要把應用程式建立成 commonjs 形式的 modules 並且用 systemjs or webpack 這類的 package loader 載入就好。

Angular CLI 或 Angular SEED 這類的套件已經將這個技術設為預設。

好,所以現在我有個專案長這樣。裡面有個 APP 資料夾,包含了幾個檔案。如果要採用新方法的話應該要這樣:

app
├ some.component.css
├ some.component.html
└ some.component.ts
...

一個組件的兄弟姊妹包含模板 (template) 跟風格 (style),應該要永遠在一起。
命名規則則是 xxx.component 加上 .html.css.ts

設定 moduleId

依照結構慣例,就是兄弟姊妹不可分離的情況,我們可以輕易地找到模板跟風格的檔案,只要我們在 @Component 的 metadata 中加入moduleId 特性。

moduleId: module.id,

現在我們只要放相對路徑就好

@Component({
  moduleId: module.id,
  templateUrl: 'some.component.html',
  styleUrls:  ['some.component.css']
})

這樣 Angular 就知道自己去找兄弟姊妹,所以不用設定絕對路徑。
但記住,前提是都放在同一層資料夾中,且命名法一樣。

可以看看 Plunker 的效果。

原理

Angular 只知道絕對路徑,而 index.html 的地方為 root,所以先前我們都需要在檔名前面加上 app/,但是如果我們採用 commonjs 的形式,並且加上 moduleId,Angular 就會先找到組件的絕對位置,然後在把其他檔案冠上組件的絕對位置,所以我們才只需要輸入與組件相關的相對路徑。