2016-05-13 13 views
4

私は角度2のチュートリアルを見てきました。私はブートストラップコンポーネントについて混乱しています。複数のページアプリケーションを作成し、そのルートコンポーネントが必要ない場合は、どうすればよいでしょうか?私はシングルページアプリケーションでどのように動作するかを見ています。ブートストラップ角度2

これは私のMain.Tsファイルです。

import { bootstrap } from 'angular2/platform/browser'; 

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

bootstrap(AppComponent); 

ここは私のapp.component.tsファイルです。

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'pm-app', 
    template: '<h1>{{PageTitle}}</h1>' 
}) 
export class AppComponent { 
    PageTitle: string = "Test"; 

} 

私はのはindex.htmlを言うと、それは私がそれをやって行くだろうか、AppComponentに持ち込むことなく、異なるコンポーネントをロードしてみましょう以外のページに移動したい場合は? Angular 1+では、使用したかったHTMLページのコントローラを参照したばかりなので、簡単でした。別のページで使用したいコンポーネントをどのように参照するだけですか?

ありがとうございました。角度2の周りで頭を包み込むようにしようとしています。

答えて

2

一部のコンポーネントは常にそのルートコンポーネントである必要があります。

常に同じコンポーネントである必要はありません。また、1つのページに複数のコンポーネントをブートストラップすることができますが、各Angular2アプリケーションは、いくつかの要素から始まり、それは

@NgModel({ 
    ... 
    bootstrap: [AppComponent] 
}) 

構成する他の要素との指示を含むことができ、その要素の観点で初期化されたルートコンポーネントです全体のアプリケーション。

+0

から深い中から経路を学ぶことができますか?それとも、ブートストラップ1で、どうにかして、すべてのコンポーネントでオーバーロードしてください。これは、ルートコンポーネント内に他の10個のコンポーネントがあり、アプリケーション全体を各ページにロードするか、必要なものだけをロードするということですか? – Dylan

+0

通常、ページ全体を構成する1つのルートコンポーネントがあります(これは典型的なAngular2アプリケーションを想像しています - 他の変形もあります)。このルートコンポーネントのビューは他のコンポーネントとこれらのコンポーネントのビューから構成されます。アプリケーションをラップするコンポーネントをブートストラップするだけで済みます。ルートコンポーネントのビュー内のコンポーネントは、Angularによって自動的にインスタンス化されます。私はあなたが「各ページ」の意味を理解していません。通常、アクティブなルートに応じて、アプリケーション内の特定のマーカー要素に他のコンポーネントを挿入するルータを使用します( –

+0

)。 –

0

角度2はコンポーネントを読み込む際に非常に優れているため、角度1よりも5倍高速です。ITはすべてのコンポーネントを一度に読み込むわけではありません。必要なコンポーネントは遅延読み込みの概念として読み込みます。動的ロードの場合、Systemjsの機能を使用し、Webpackも使用できます。

角度2はモジュール式であり、したがってアプリケーションに多数のモジュールがある場合は設計されています。複数のモジュールを作成し、すべてのモジュールを単一のルートモジュールにバインドすることができます。

次に、角度2ルーティング機能を使用できます。ユーザーがクリックしたルートに応じて、必要なモジュールをロードします。

あなたは、だから私はファイルmain.tsに私のすべてのコンポーネントをブートストラップする必要があり、ここで

https://angular.io/docs/ts/latest/guide/router.html 
関連する問題