The root component

In this book, we will have a couple of components and services that will work together to achieve a goal. But we need a root component to act as a communication center between all these players. This root component will control the application flow. Let's start by creating this component:

  1. Inside the WebStorm IDE, open the app.ts file, and notice the export line:
            export class AppComponent {}
  2. As we saw before, the export keyword simply indicates that we are willing to share this class with every other player in the project. In other words, if anyone needs this class, they just need to import it in their own body.
  3. The plan is to make the AppComponent class as the root component for our project, that is why we have the Component function imported from the Angular2 core module:
            import {Component} from 'angular2/core'; 
        export class Sherlock {}
  4. This code should be self explanatory. Normally each import command has two main parameters. First we need to mention the name of the function we are interested in - Component - and then we should indicate the module we want to grab it from - angular2/core.

    Tip

    If you just mention the module name without any specific function, everything in that class will be imported.

  5. Importing a module is not enough and it doesn't turn our AppComponent class into a component. We need to use a decorator to declare the app.ts file as a component. A decorator contains some meta-data that defines the nature of a class and how it is going to do it.
  6. In this example, we are using the Component function, which we imported earlier. This function accepts an object that defines how things will be done inside the app component:
            // src/app/app.ts 
        import {Component} from 'angular2/core'; 
        @Component({ 
          selector: 'app', 
          templateUrl: './app.html' 
        })
  7. The first property inside the @Component decorator is a selector. Basically, it is a CSS selector, which means whatever is assigned to this property will become a valid HTML tag later. In other words, it is perfectly fine to have a custom tag like <app></app> in your HTML template. The templateUrl property contains the path and the file for this Component's template.
  8. Having these properties in place, let's have a look at the app.html file:
            # src/app/app.html 
        <h3> 
          Angular 2 Seed 
        </h3> 
        <nav> 
           <a [routerLink]="['/']">Home</a> 
           <a [routerLink]="['/about']">About</a> 
           <a [routerLink]="['/github','angular']">Github Repos</a> 
        </nav> 
        <main> 
           <router-outlet></router-outlet> 
        </main>
  9. This file is the place where we define all basic structure for our application. Since we removed all previous folders, we can replace the header and the navigation tags with the following:
            <h1>The Sherlock Project</h1>
..................Content has been hidden....................

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