"That's the only way it will stick. It has to seem self-generated."

- Inception (2010)

Inside src/app

Your app folder should look like this now:

The app.component.ts file holds your code. As you can probably intuitively tell, the .html and .css files have your component's template and styles respectively. The .spec.ts file, which we won't talk about, is for writing your Karma unit tests in.

Every time you generate a new component via CLI you'll get the corresponding four files like these.

Which brings us to the main attraction:

Inside app.module.ts

Think of this file as the master registry. Everything you create will need to be referenced in here one way or the other. Fortunately, Angular CLI does this automatically whenever possible. So, for a small, simple app; it's not inconceivable that you'll never have to hand-code anything in this file. That's why I'm describing it in this chapter, before we start coding.

Here's what Angular CLI has written for us:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

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

Angular has it's features grouped into modules. The first four statements you see import some of these for us. The first two are absolutely essential for our code to run on a browser. The next two are common enough to warrant default inclusion. As their name suggests, they deal with forms and HTTP calls.

The next import is a bit different. Notice the lack of @angular. It imports AppComponent from the file we saw sitting parallel. In other words, this imports something we created. And by 'we' I mean Angular CLI.

Now, let's look at the object ensconced inside @NgModule:

This is the most important part. It's a metadata object with four keys:

• declarations: This contains an array of components we defined. Any more components we create must be added to this array
• imports: This contains an array of angular modules we imported
• providers: This array, currently empty, will contain all the services we need at the root level. Services are how component interact. Generally they shouldn't be provided here unless it's essential for all our components to have access to it. More on that later.
• bootstrap: Angular takes the component in this array and inserts it into the browser DOM. In this case, it's our AppComponent.

For more details on AppModule, refer to the docs.

Important:

There's a fifth kind of metadata. entryComponents. I won't go into technical details, but if you have any components not known when the main app loads which you plan to load dynamically later; the entryComponents array is where you need to add them first.

It's time to get our hands dirty. Let's write some code.