2016-05-13 6 views
4

Ich habe mir einige Tutorials zu Angular 2 angeschaut. Ich bin bei Bootstrapping-Komponenten verwirrt. Wenn ich mehrere Seitenanwendungen erstellen möchte und diese Stammkomponente nicht benötigt, wie gehe ich vor? Ich sehe, wie es für einzelne Seite Anwendungen funktionieren würde.Bootstrapping Angular 2

Dies ist meine Main.Ts-Datei.

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

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

bootstrap(AppComponent); 

Hier ist meine app.component.ts Datei.

import {Component} from 'angular2/core'; 

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

} 

Wenn ich wollte eine andere Seite als sie index.html sagen navigieren, und es hat eine andere Komponente laden, ohne in der AppComponent zu bringen, wie würde ich mich, dass über das tun? In Angular 1+ war es einfach, da ich gerade den Controller auf der HTML-Seite referenzierte, die ich verwenden wollte. Wie würde ich nur die Komponente referenzieren, die ich auf einer anderen Seite verwenden möchte?

Danke. Versuche, meinen Kopf um Winkel 2 zu wickeln.

Antwort

2

Irgendeine Komponente muss immer diese Wurzelkomponente sein.

Es ist nicht notwendig, dass es immer die gleiche Komponente ist. Sie können auch mehrere Komponenten auf einer Seite Bootstrap, aber jeder Angular2 Anwendung an einem bestimmten Element beginnt, und das ist die Wurzel-Komponente, die mit

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

Die Ansicht dieses Elements initialisiert wird, kann andere Elemente und Richtlinien enthalten, die das Make-Up ganze Anwendung.

+0

Also sollte ich Bootstrap alle meine Komponenten in den main.ts-Datei? Oder nur Bootstrap 1, und irgendwie überladen es mit all meinen Komponenten .. weder gut klingen. Bedeutet das, wenn ich wie 10 andere Komponenten innerhalb der Root-Komponente habe, dass es die gesamte Anwendung jede Seite lädt, oder nur was es braucht? – Dylan

+0

Normalerweise haben Sie eine Wurzelkomponente, die die ganze Seite ausmacht (so stellen Sie sich die typische Angular2-Anwendung vor - es gibt natürlich noch andere Varianten) und die Ansicht dieser Wurzelkomponente besteht aus anderen Komponenten und der Ansicht dieser Komponenten wieder von anderen. Sie müssen nur die Komponente, die Ihre Anwendung umschließt, neu starten. Komponenten innerhalb der Ansicht der Wurzelkomponente werden automatisch von Angular instanziiert. Ich bin nicht sicher, was Sie mit "jeder Seite" meinen. Normalerweise verwenden Sie einen Router, der abhängig von der aktiven Route andere Komponenten an bestimmten Markierungselementen in Ihrer Anwendung –

+0

einfügt. –

0

Angular 2 ist sehr gut beim Laden der Komponente und deshalb ist es 5 mal schneller als winkel 1. Es lädt nicht alle Komponenten auf einmal. Es lädt die erforderliche Komponente nur als das Konzept der Lazy Loading. Für dynamisches Laden verwendet es die Funktion von Systemjs und auch Webpack kann verwendet werden.

Angular 2 ist modular aufgebaut, wenn Sie viele Module verwenden. Sie können mehrere Module erstellen und alle Module in ein einzelnes Stammmodul binden.

Dann können Sie Winkel 2 Routing-Funktion verwenden. Welche laden das benötigte Modul in Abhängigkeit davon, auf welchen Routenbenutzer geklickt wurde. in tiefen

können Sie lernen von hier aus

Routing
https://angular.io/docs/ts/latest/guide/router.html