Telling the module

Now we need to introduce a completely new concept, an Angular module. All types of constructs that you create in Angular should be registered with a module. An Angular module serves as a facade to the outside world and it  is nothing more than a class that is decorated by the decorate @NgModule. Just like the @Component decorator, the @NgModule decorator takes an object literal as an input parameter. To register our component with our Angular module, we need to give the object literal the property declarations. The declarations property is of a type array and by adding our component to that array we are registering it with the Angular module. 

The following code shows the creation of an Angular module and the component being registered with it by being added to declarations keyword array:

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

@NgModule({
declarations: [AppComponent]
})
export class AppModule {}

At this point, our Angular module knows about the component. We need to add one more property to our module, bootstrap. The bootstrap keyword states that whatever is placed in here serves as the entry component for the entire application. Because we only have one component, so far, it makes sense to register our component with this bootstrap keyword:

@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

It's definitely possible to have more than one entry component, but the usual scenario is that there is only one. 

For any future components, however, we will only need to add them to the declarations property, to ensure the module knows about them.

So far we have created a component and an Angular module and registered the component with said the module. We don't really have a working application yet, as there is one more step we need to take. We need to set up the bootstrapping. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset