Angular4 study notes (six): decoupling

So far, the structure of the demo has been dismantled very finely. Components, services, and models have been separated, and the next goal is to make the interface look better.

At present, the interface still looks too simple, and in this face-seeing world, it is impossible to survive at all. 

At least make it look like this:

Before that, you can also do some subtle splits.

Separate V and C

This is the current home page component gundam-host.component.ts , which together form V and C in MVC  by annotating the template in Component and the exported GundamHostComponent .

There is no problem in the current writing method, because the interface is relatively simple.

But if the interface is very complicated, the VCs will become very bloated when they are crowded together. So before adjusting the interface, separate V and C.

In addition to the template attribute provided in the annotation @Component, the templateUrl attribute is also provided . The former uses ` (anti-single quotes) to wrap the html code to mark the View, and the latter directly imports the pointed html file to become the View.

Steps to modify the home page component :

1. Under the host package, create a new html folder, and create a new gundam-host.component.html file in the folder. 
   
2. Cut the entire html code in the component attribute in gundam-host.component.ts. 
   
3. Modify the template property to templateUrl to point to the newly created file:

@Component({
  templateUrl: './html/gundam-host.component.html',
})

• 1
• 2
• 3

In the same way, separate the detail page and the app.component.ts component. 

Completely separate V and C, and it will be much more convenient to do things on V in the future.

component nesting

The code in the gundam-host.component.html file looks a little out of place. Although at present it is just a simple wrapping of the span tag with a div for data display, but the span tag will be replaced by other complex interfaces if it is not properly maintained. And if the home page itself is more complicated (in fact, it does become more complicated later), then the page will still become bloated.

For the sake of safety, first take advantage of the simplicity of the interface to extract the interface with single and repeated functions to form another component. In this way, the host component will eventually be split into large and small components, and each component is independent of each other to defeat a greater degree of decoupling.

Angular has its own set of methods to solve the problem of component nested components and component extraction.

This method is the selector attribute in the Component annotation.

In fact, there are selectors in app.component.ts.

By declaring the selector property in app.component.ts and using it in public/index.html, the entire angular interface is installed.

So now I feel that angular is really worry-free, given a pile of wood, I can fight it how I want.

Let's start extracting the list items in the home page and make them into a separate component.

Create a new host-item folder, create a new gundam-host-item.component.ts file under it, and use a separate html file and templateUrl attribute for VC separation.

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

@Component({
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Copy the html code block from gundam-host-item.component.ts to gundam-host-item.component.html.

The newly created class needs to be registered in the app.module.ts file before it can be used. (Speaking of angular is also written by Googler, I said how it is so similar to the rhythm of Android...)

Modify the @Component in gundam-host-item.component.ts, add the selector attribute, and set the attribute value to my-host-item

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

• 1
• 2
• 3
• 4

use in html

<my-host-item></my-host-item>

• 1

replace

    <div *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]">
      <span>
        {{gundam.name}}
      </span>
    </div>

• 1
• 2
• 3
• 4
• 5

But this brings another problem, how to pass the data in?

or bind

Angular data goes upside down, all through binding. Since there is no value in host-item, pass one in.

<my-host-item *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]" [gundam]="gundam"></my-host-item>

• 1

[gundam]=”gundam” is the binding declaration, which declares that there is a property named gundam in the component, and then passes the gundam obtained by dismantling the gundams array as the value to the gundam property in my-host-item.

Now the value has been passed in from the page, but it still needs to be received in the component, otherwise an error will be reported.

Specifically, it is necessary to pass the external value to the Controller.

Add the input class to the inport in gundam-host-item.component.ts to receive data .

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

• 1

Define a gundam property of the Gundam class (import the gundam class before defining it), indicating that this property is used to receive the value passed in (corresponding to the previous [gundam]=).

gundam: Gundam;

• 1

After the definition is complete, add the annotation @input next to it.

import { Component, Input } from '@angular/core';
import { Gundam } from './../../model/gundam';

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {
    @Input() gundam: Gundam;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

Then enter the html page of the item and delete the redundant *ngfor

<div>
  <span>
    {{gundam.name}}
  </span>
</div>

• 1
• 2
• 3
• 4
• 5

Refresh the page, it can be displayed normally.

It's another divine demolition, first separating v and c, and further dismantling the home page into 2 components . In this way, the product manager is not afraid to jump out and say, "I think the item on this homepage needs to be changed."~ (Of course, it would be better to keep a kitchen knife on the side)~

Now, bootstrap can be used.