Angular (2) -- Project Structure and Components

Day 10:

How an Angular app gets loaded and started

If we modify the file app.component.html, we can see the change in the browser. However, this file is not the start point. Angular is an single page framework. The only html file it goes to firstly is the index.html file.

In the app folder, The first four files, app.component.css, app.component.html, app.component.spec.ts, app .component.ts, are the default component created by angular cli for us. This is the root component of the application.

In the app.component.ts file, there is a selector property with a string value ‘app-root’. This is the same as the tag in ‘index.html’ file.

If we open F12 in the browser, we will see that there are a couple of scripts at the end of the body. These are injected by the cli automatically. These scripts will load our components later.

Now, let’s look at the main.ts file in the root folder.

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.error(err));

This is the code that will be first executed. It firstly imports some modules and then checks the environment mode. Most importantly, the last line of code ‘bootstrap’ and starts our whole Angular application by passing an AppModule to this method. This module refers to the app.module.ts file in our app folder.

The app.module.ts file defines a module called AppModule. There is a line in this module, bootstrap: [AppComponent]. Angular loads all the components in the array and understands that it should go to the app.components.ts file. Finally, in this file, we have the app-root selector, which tells Angular we want to replace this tag with a template called app.component.html.

Summary

Angular will do the following steps when it starts:

• Step 1: Go to index.html and add some scripts.
• Step 2: Read main.ts file and pass in an AppModule in the bootstrap method. Here Angular understands that where to find this module because we give it the path when we imported this module.
• Step 3: Angular goes to that path, which is ./app/app.module, and read the file app.module.ts. Here Angular reads the property, bootstrap, and knows which components should be loaded.
• Step 4: Read the app.component.ts file and use the template to replace the tag.

Now, the tag app-root will be replaced at runtime.

Angular in the end is a JS framework, changing your DOM(‘HTML’) at runtime.

Create a new Component by hand

The AppComponent is the root component of our application. All our own components will be added in the root component file instead of the index.html file.

Create a new folder under the app folder called server.

Create two files. One is server.component.html, the other is server.component.ts.

<p>The server component</p>

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

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

}

Notice that the selector should be unique. The selector means that we want to use this component defined here to replace this tag which is declared as a selector. In other words, we want to use this template to replace this tag.

To use this component, we need to modify our app module file.

Angular does not scan the components. Thus we have to register our modules in the app.module.ts file. We do not change the bootstrap array, instead, we add our components in the declarations array inside NgModule annotation.

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then we add our new tag, , into the app.component.html file.

<h3>I'm in the app!</h3>
<hr>
<app-server></app-server>

Warning: Do not add this tag in the same component! (server.component.html)

I got an infinite loop because I added this tag into the wrong template.

Create a new component with cli

Using Webstorm, we can simply right click the folder -> new -> Angular Schematic…, then give the name of the new folder we want to create.

Or we can use a simple command:

ng generate component servers
ng g c servers