Split the interface with Component

We know that Angular components consist of TS class, HTML, and CSS files. We can think of HTML as the View layer and class as the logical layer, not CSS. The entire page can be simply rendered from a logical tree of components. Such as the following structure:

app 
    --header
    --body
      --body.html
      --body.ts
Copy the code

Of course, we can split the shared logic into lower components. For example, if page A and page B share A Search Box, we can separate the Search Box into A separate searchBox.component.

Use Loc Services to break up uI-independent logic code

Sometimes, however, the UI and logic are not exactly shared pieces of logic. Sometimes, there is a piece of pure logic that needs to be shared, and we need to separate it out. Angular gives us the concept of Service. For example, component A and COMPONENT B also need to use C. service. We can use dependency injection implementation very simply:

class A {
  constructor(
        public cService: CService,
    ) { }
}

class B {
  constructor(
        public cService: CService,
    ) { }
}
Copy the code

CService is instantiated the first time it is used. For example, if A component is created first, CService = new CService() will already be called. If B component is created later, The cService that has been created will be used directly. Of course, you can manually specify that the current cService is newly created with the Component. This is done by specifying the provides.

@Component({
    ////////
    providers: [CService],
})
export class A {
    constructor(
            public cService: CService,
        ) { }
}
Copy the code

What’s the good of that? If we look at the component example, we need to display the “fullName” in the HTML. We will define the “fullName” in the class, so that we can pass the hiding check. Whenever the “fullName” in ts changes, the “fullName” in the HTML changes.

<div>{{fullName}}</div>

//////
export class A {
    fullName = 'zhangsan'
    constructor(
            public cService: CService,
        ) { }
}
Copy the code

But in practice, it can be much more complicated, and there may be a lot of logic in TS, which is not directly related to the View. Here’s an example:

export class A {
    fullName = 'zhangsan';
    firstName;
    lastName;
    constructor(
            public cService: CService,
        ) { }
        
    getFirstName() {}
    getLastName() {}
}
Copy the code

Fullnames can be calculated through complex calculations, and we actually only care about fullnames in the Component layer, not in the middle layer. It’s easy to think that we should actually separate out specific layers of logic, even if that logic is not shared. So we have the Service usage we just used. Thus, we basically have a programming paradigm for a common complex Component:

HTML + component. ts ts class calls service via Loc.Copy the code

The public property in ts class corresponds to the variable used in HTML. (You should minimize the number of variables not used in HTML to avoid logic complexity.)

Services are classified into two types: shared services and services that belong only to the current class. Component data that you want to use in the Component via service.

Store

The concept of a Service is simple: a class used through Loc, but there is a common paradigm in the use of Component:

  • The class provides the state
  • Class provides methods to modify state
  • State can only be modified by methods, not directly
  • State can be monitored for changes

This paradigm of class can be called a store.

Let’s see how to implement a store simply:

class AStore {
  state = {
     a1: '',
     a2: ''
  };
  
  changeA1 = (a) => {
    return ({
      ...this.state,
      a1: a,
    });
  }
}
Copy the code

Of course, wrapping State as an Observable does not rely on hidden checks.

Thus, since store is used directly by Component, we get a programming paradigm like this:

HTML Template => Component => Store (local store, shared store) => Service
Copy the code

Of course, a store can also call a store, and a service can also call a service, but the layers should not be too deep.

NgRx Store

NgRx provides us with the NgRx Store and NgRx Component Store. Component store is a local store. NgRx store is a shared store. The normal paradigm could be

component => component store => ngrx store
component => component store + ngrx store
Copy the code