index.html integration with app.component.html template in angular 2

Question

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'

})
export class AppComponent {
  title = 'TEST-convinience';
}

As shown in the above code, when the compiler finds the selector <app-root> in the index.html file it integrates with the template app.component.html and renders its view.

What is the benefit and advantage of having this kind of integration?

Instead we can use index.html to create a view.

Answer 1

To answer your Q, you need to understand a bit about Angular's bootstrap process. When Angular bootstrap the application, it looks for the bootstrap component(s) listed in your root module:

Angular will launch the app by first loading the indicated:

platformBrowserDynamic().bootstrapModule(AppModule);

Within that module, Angular will look for the components listed in the bootstrap array:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ] // this is the next step
})
export class AppModule { }

Next, the bootstrap component is analyzed. That's when Angular learns its selector:

@Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { }

Now Angular knows that it should look for <app-root></app-root> in the webpage (index.html), and replace this element with the AppComponent template

<app-root>loading</app-root>

Ok, now suppose you wanted to make index.html the app component template, what would you put in it? If you put <app-root> there, you'll end up with an infinite loop as the component keeps getting created within its own template. If you don't put <app-root> there, then where would you put it so that Angular will know where to load the app?

Basically, the root component needs to be embedded within a vanilla html document so that Angular knows where in the webpage to build the app.

Answer 2

I want to clear some doubts.

(1)Angular is all about `components`.It uses a `hierarchy of components` as 
    its main `architectural concept`.
(2)Modularity – much core functionality has moved to modules, producing a 
   lighter, faster core.

Components mainly deal with a view of the application and logic on the page . The component contains two important things: a view (.html) and some logic (.ts).

In Simple, you can understand components as a separate and independent view which can be used with other components(by passing component selector as <my-app></my-app> )

Suppose, you create a 'calendar component' and implemented all logic and it is working perfectly as an individual component, then you can use this component in other ' modules ' or in any other 'app' as well.

Now, why to pass selector in index.html? Because:-

(1) When a new Project is created in angular through command ng new PROJECT-NAME (refer https://github.com/angular/angular-cli ), then by default a single module is created that is app.module.ts (Parent Module).

And, selector of app.component.ts is automatically passed in index.html when a new Project is created.

Have a look at:-

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

The answer of question lies in main.ts of project which is created by default when project is created.

Now, in main.ts :-

1) Parent Module is imported as `import { AppModule } from './app/app.module';`  (Since default single module created
2)By default('default' refers to when a new project is created), then...
 `platformBrowserDynamic().bootstrapModule(AppModule)`.
      This statement bootstrap Module which is passed as a parameter inside it(by default, 'AppModule' ).
      It means it will load the `module` which is bootstraped as a parameter.

Now, in app.module.ts the only default component created at the time of new project creation is app.component.ts . Now, we have to view, app.component.ts template ie app.component.html , so, selector is passed as <app-root></app-root> . (Passing selector reference for view, this, is a concept of angular).

Hope that helps.