Modules and components

Angular 2.0 provides a component-based approach for the reusability of code, as well as its maintainability. By visualizing each functional group of elements as a component, it is easy to replicate or reuse them. Let's create a wireframe for our project so that we can pick out those components from our project:

In our project structure, we already have app.component.ts as our component file. We already have our app-root component specified in the selector property of component metadata. This file will be used for handling the root or parent element. According to the preceding wireframe, this file contains the app-root component:

import { Component } from '@Angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {}

Make sure we have a class attached for each component so that we can export a component class and register it as an Angular component in app.modules.ts. For brevity, we follow the standard naming convention of capitalizing the first letter of the class name, followed by importing the Angular class prefix that is a component. So in the app module.ts file, we have the following code:

import { BrowserModule } from '@Angular/platform-browser';
import { NgModule } from '@Angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Once registered with NgModule, we need to pass the root component to the bootstrap method/property. Bootstrap handles the loading on to the platform we decide to use.
As per design, in app components, we just have an outline that will act as a container for other components, so accordingly, let's create a template. Create a file with HTML code, app.component.html and its relative css file, as follows:

app.component.html
<div class="outter">
<!-- <subscribe></subscribe>-->
<!-- <list></list> -->
</div>
app.component.css
.outter {
padding: 20 px;
border: solid 2 px# AAA;
width: 200 px;
}

After running this code, we get a simple outline in the browser. Use ng serve to run the app.

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

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