current position:Home>Requirements and capabilities of angular organization

Requirements and capabilities of angular organization

2021-08-25 04:15:17 Chen Da tingzi

Preface

Last week, writing code kept appearing because the module , Or other situations where some functions cannot be normalized due to reference errors , At first the teacher showed me the tutorial , It's also very confused , After the teacher told me about it, I really knew what was going on .

The basic elements of the organization

Build must exist in the module , In general, if you enter... Directly on the command line ng g c app, It will generate a file named app One of the angular To form a , That is, the following four kinds of files
image.png
1 yes v Layer of html The style file ,2 It's a template v layer html Code file ,3 It is the code file of unit test ,4 Is formed c Layer file , We define our 1 and 2 file . among 4 It's a must , The other three are optional . There must be modules to build , Build must exist in the module , A module is a building block plus a .module.ts The file of .

Build the required capabilities

Finish with the elements of the formation , Now let's talk about where we know and what capabilities we need to provide to the build to make the build run smoothly .

In the constructor

stay 4 In the document , That is, the organization of c layer , stay 4 There is often a class class , Since there are classes , Then there will be a constructor , well , So the constructor is a way , For example, below :
image.png
You can see , If you want to make an error report for the class where this constructor is located , We need to instantiate TownService、CommonService、ActivatedRoute、Router, These four categories , And if we want to instantiate these four classes, where do we need to find them , Again , Also look for... From the constructor , such as ToenService:
image.png
You can see that if we want to instantiate TownService, Then I we have to provide HttpClient This thing , Where to provide it , Or how to instantiate , What does instantiation need , We can be here indexComponent Introduce... Into the module HttpClientModule(ng s The need when ), Reference in unit test file HttpClientTestingModule(ng t Time use ) To ensure that we are in class TownService Normal instantiation of , So as to instantiate normally indexComponent. next , Similarly, the following three also need to see what capabilities are required in the corresponding constructor ,image.png This is a CommonService Constructor for , Then we need to provide Router as well as DomSanitizer 了 , But what? ,DomSanitizer Which module does not belong to , So just declare its namespace in the current file . because ActivatedRoute and Router Without other capabilities, we can directly introduce their module .

V Layer code

<div>
  <div class="col-12 text-right">
    <a class="btn btn-primary" routerLink="add"><i class="fas fa-plus"></i> newly added </a>
  </div>
</div>

<app-size [size]="pageData.size" (changeSize)="onSizeChange($event)"></app-size>
<table class="table table-striped mt-2">
  <thead>
  <tr class="table-primary">
    <th> Serial number </th>
    <th> name </th>
    <th> pinyin </th>
    <th> operation </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let object of pageData.content; index as i">
    <td>{{i + 1}}</td>
    <td>{{object.name}}</td>
    <td>{{object.pinyin}}</td>
    <td>
      <span class="btn btn-outline-primary btn-sm" routerLink="edit/{{object.id}}">
        <i class="fas fa-pen"></i>
         edit 
      </span>
      <span class="btn btn-outline-primary btn-sm" (click)="onDelete(i, object.id)">
        <i class="fas fa-trash-alt"></i>
         Delete 
      </span>
    </td>
  </tr>
  </tbody>
</table>

<app-page [page]="pageData.number" [size]="pageData.size" [totalElements]="pageData.totalElements" (changePage)="onPageChange($event)"></app-page>

You can see me V Layer code contains angular Unique tag properties routerLink, And quote size and page Template code , If we don't give the organization the corresponding ability, then the organization doesn't know him , Naturally, it won't compile , So we need to introduce RouterTestingModule To give the organization recognition routerLink The ability of , Of course, to make the compiler not report errors, we also need to introduce PageModule as well as SizeModule.

Final unit test reference code

//  Statement , Here is the establishment of 
      declarations: [IndexComponent],

      //  introduce , Here is the module 
      imports: [
        //  Router test module , Set the router for testing .
        RouterTestingModule,

        //  Refer to the commonModule
        PageModule,

        //  Refer to the commonModule and FormsModule
        SizeModule,

        // ApiTestingModule Introduced in HttpClientModule,HttpClientModule Provided in HttpClient,
        //  This makes  IndexComponet -> TownService  Medium HttpClient You can use 
        ApiTestingModule
      ]

Would you be curious to see here , Why not provide CommonService,HttpClient... If you're curious, please keep looking down !

Priority of references

We can see that in fact, we often have one class in more than one constructor. Does it need to instantiate multiple classes , It's not ,angular Instantiate only one class , Need his class to share him , And the back covers the front . For example, we see in CommonService and IndexComponent We all need Router, and IndexComponent Again CommonService, So I guess that the compiler has initialized two Router, When the second appears , Will cover the first , So actually IndexComponent and CommonService I'm using one Router, The latter covers the former . Of course, why not quote HttpClientModule.

Public and private references

We can quote what we want , But after we quote, if those who quote us need the same thing, do they need to quote again , This involves private and public references .

declarations

declarations Means to declare , In general, we will declare the establishment of 、 Instructions and pipes , Use declarations References are private , That is, the component we quote 、 After instructions and pipes, these will become private in our build , That means that the next person who references us cannot access , If they need the same thing, they need to quote it again .

imports

imports It means to introduce , We will put all the modules we need into him , Of course, after the module is introduced through it , It also becomes private , Like declarations equally .

providers

providers Means provider , It's written as

 providers: [
    {provide: CommonService, useClass: CommonStubService}
]

If there is CommonService, Then use CommonService Provide , If not, use class CommonStubService Provide , Of course useClass The location can also be useValue( Provide value ), useFactory( Provide factories ) and useExisting( Provide aliases ).
providers It's public ownership , That is, if A Provides 123,B Provides 456, that C At the same time quote A and B that C And then there is 123456, Different from the above two .

exports

exports Means to export , And imports It means the opposite , It can be used to export components , That is, it is declared as a public type , Make it possible to import our own build and use our exported build , for example :

@NgModule({
  declarations: [PageComponent],
  imports: [
    CommonModule
  ],
  exports: [PageComponent]
})
export class PageModule {
}

PageModule take PageComponent The formation is declared public , That is, other components can directly reference . Of course SizeModule The same thing .

Review and quote outstanding cases

The reason why we didn't quote CommonService Our provider is because

@NgModule({
  imports: [
    HttpClientModule
  ],
  providers: [
    {provide: CommonService, useClass: CommonStubService},
    {
      provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiTestingInterceptor.forRoot(apis)
    }]
})
export class ApiTestingModule {
}

We can see what we refer to in the unit test ApiTestingModule Used in CommonStubService provide One. CommonSerivce 了 , At this point, what we need to instantiate becomes CommonStubService, Then we need to see CommonStubService What do you need .
image.png
You can see us CommonStubService What is needed is Router、DomSanitizer、ActivedRoute, We don't have Router and ActivedRoute The provider of RoutingTestingModule Of ,DomSanitizer Not a module , Just introduce the namespace . Up to now CommonStubService Instantiation complete , Instead of CommonService. But we still need to instantiate CommonService, Because of our CommonStubService Inherited CommonService, What we still need now is HttpClient The ability of , Of course, we also have , It's in our ApiTestingModule Introduced in HttpClient This organization , All's well that ends well , So far, our two classes have been instantiated successfully !

summary

1、 The needs and capabilities of the organization need to find C Layer constructor ,V Layer code .
2、 Written imports、declarations Inside, it becomes private , stay providers It's public ,exports Can be declared public .
3、 References can be overridden , That is to say, the latecomer comes first , The latter will cover the previous

copyright notice
author[Chen Da tingzi],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825041512278f.html

Random recommended