フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

Angular2 for TypeScriptのお勉強-sample(8)【requireTemplate and TemplateUrlの違い。moduleIdとは】

Angular2 for TypeScriptのお勉強-sample(8)【requireTemplate and TemplateUrlの違い。moduleIdとは】

フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強
フロントエンドエンジニア芸人もりたけんじのAngular2とTypeScriptのお勉強

templateとtemplateUrlは知っていたのですが、

templateUrl

1、
@Component({
selector : 'fafa-faf',
moduleId : module.id,
templateUrl : '.app/app.childComponent'
})

とする場合と

require template

2、
@Component({
selector : 'fafa-faf',
moduleId : module.id,
template : require('.app/app.childComponent'),
moduleId: module.id
})
とする場合は何が違うのでしょう。
ここによると

1の場合はhtmlへの PATH。
2の場合はstring。文字列が返り値。templateに割り当てている。なので同じ結果に。

requireを使いたいときは"template"としなくてはいけません。

moduleId

moduleIdを付けることで、Angularがルートからファイルを探し始める代わりに現在のフォルダから探し始めます。

つまり
app/app.childComponent.html
app/app.childComponent.ts

こういう階層になっていた場合
moduleId: module.id
を設定するだけで

Angularは呼び出し元のファイルから同階層のファイルを探す。
なので記述が

2の例だと
@Component({
selector : 'fafa-faf',
moduleId : module.id,
template : require('app.childComponent'),
moduleId: module.id
})

こうなるわけ。見やすい!!
moduleIdについてはここ

今回は
・templateUrlとtemplate requireの違い
・moduleId

を覚えました。

moduleIdは積極的に設定しましょう!

今回のコード

でわまた〜〜

前のAngular2記事へ
次のAngular2記事へ

他のAngular2記事

他のjavascript記事