CODEWITHSUNDEEP
angularbootstrapping
Dylan
Dylan

Reputation: 1118

Bootstrapping Angular 2

I've been watching some tutorials on Angular 2. I'm confused on bootstrapping components. If I want to create multiple page applications, and don't need that root component, how would I go about doing that? I see how it would work for single page applications.

This is my Main.Ts File.

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

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

bootstrap(AppComponent);

Here is my app.component.ts file.

import {Component} from 'angular2/core'; 

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

}

If I wanted to navigate to a page other than let's say index.html, and have it load a different component without bringing in the AppComponent, how would I go about doing that? In Angular 1+, it was easy since I just referenced the controller on the HTML page that I wanted to use. How would I just reference the component I want to use on a different page?

Thanks. Trying to wrap my head around angular 2.

Upvotes: 4

Views: 819

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658255

Some component always has to be that root component.

There is no need that it is always the same component. You can also bootstrap multiple components at one page, but each Angular2 application starts at some element, and that's the root component that is initialized with 

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

The view of that element can contain other elements and directives which make up the whole application.

Upvotes: 2

Engineer
Engineer

Reputation: 310

Angular 2 is very good in loading the component and that's why it is 5 times faster than angular 1. IT does not load all the component at one go It will load the required component only as the concept of Lazy Loading. For dynamic loading it uses the feature of Systemjs and also Webpack can be used.

Angular 2 is modular in design hence if you application has many modules. You can create multiple modules and bind all the modules into single root module.

Then you can use angular 2 routing feature. Which load the required module depending on the which route user clicked.

You can learn routing from in deep from here

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

Upvotes: 0

Related Questions