Teach you step by step how to start an angular module

Friendly reminder: If the picture is not clearly visible, please right-click the mouse to view the image.

1. Install SVN (or git)

1. Download the Little Turtle tool (SVN tool) and search SVN on Baidu.
2. Open the SVN installation package and click Next to install it by default.

2. Copy the company’s current front-end code from the company’s SVN (or git)

1. Open Windows File Explorer and select the development directory, right-click the mouse to pop up the window menu prompt box, select SVN checkout
2. URL of repository:Fill in the company SVN address
3. Checkout directory:Development directory path

3. Enter the development environment and create a new module

1. Open Windows File Explorer and enter the development directory. Taking the scaffolding directory as an example:项目文件夹/src/app

2. Execute ng g c 模块名the folder of the new module. For more ng-cli quick operations, please visit the angular-cli github address.

3. Execute ng g m 模块名the module file of the new module (the module file serves as the entrance to the business module and manages the relationship between other components, modules, instructions, and services)

4. Select the new module folder, right-click to add a new file, name it 模块名.routing.ts, and introduce the routing class (i.e. TestRouting) in the imports attribute of the test.module.ts metadata. This file is the routing configuration file of the new module. The file can be configured with sub-routing, which is used to route to the sub-modules of this module. The following is the format of the new module folder.

5. Here we take the test module as an example to write a test.routing.ts configuration.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TestComponent } from './test.component';
import { TestChildOneComponent } from './test-child-one/test-child-one.component'
import { TestChildTwoComponent } from './test-child-two/test-child-two.component'

const routes: Routes = [
    {
        path: '',
        component: TestComponent,
        data: {
            title: '测试模块'   //这个data数据可以通过路由参数对象获取到,有面包屑导航需求场景时有用
        },
        //如果需要路由到子模块，则添加children属性
        children: [
            {
                path: 'test-child-one',
                component: TestChildOneComponent 
            },
            {
                path: 'test-child-two',
                component: TestChildTwoComponent
            }
        ]
    }
]

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class TestRouting {
    
     }

4. Add a route to the newly added module in the main route (main route is used to manage the company's business module)

Open main/main.routing.tsthe file and add a route linked to the new module. See the code below for details.

The following shows the html template of the main module: main.component.html

By the way, here is the root route app.routing.ts and the corresponding html template app.component.html
app.component.html template as follows:

The app.routing.ts template is as follows:

5. Introduce the base class that the module depends on

1. WustModule is introduced in module module.ts. Here we take testModule as an example.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { WustModule } from '@toplinker/wust';

import { TestComponent } from './test.component';
@NgModule({
    imports; [
        commonModule,
        WustModule
    ],
    declarations: [TestComponent],
    providers: [],
    exports: [TestComponent]
})
export class TestModule { }

2. Inherit the base class baseComponent in module component.ts

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

import { IbdCommonService,IbdBaseComponent } from '@topibd/ibd-core';
@Component({
    selector: 'ibd-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
})
export class TestComponent extends IbdBaseComponent implements OnInit {
    
    

    constructor(private commonService: IbdCommonService) {
        super(commonService)
    }

    ngOnInit() {}
}

3. Why should we import WustModule and why should we inherit BaseComponent?

(1) WustModule manages the public services, components, instructions, and animations of the project. The original intention of designing WustModule is to encapsulate a public component package. These component classes can be used in other ng projects, exposing the WustModule interface. You can use all public components, services, instructions, and animations managed in WustModule

(2) BaseComponent encapsulates some public methods that all modules may use, such as the method of initializing configuration: getModuleConfig, the method of translation: tr, the method of switching languages: setLangPackage, subclasses inherit the BaseComponent class, and subclasses must Inherit the constructor of the parent class. Since the parent class constructor must pass in the instance of IbdCommonService, you need to super(commonService)call the parent class constructor. If you inherit the parent class, you can use any method in the parent class. In the child class, you can this.getModuleConfig()call getModuleConfig() method, it will first look for the getModuleConfig method in the subclass object. If the subclass does not have it, it will follow the prototype chain to find the getModuleConfig method in the parent class. Inheritance will also inherit the instance object of the parent class constructor dependency injection. About inheritance I won’t say any more, if you don’t understand, you can tell me privately, and then I will summarize an article about the inheritance understanding of angular2+ (you are welcome to correct me if you are wrong, please smile sideways here). For es6 inheritance, please check the es6 standard of teacher Ruan Yifeng . Getting Started - Class Inheritance

(3). The following shows the directory where the WustModule package is located.

(4). The following shows the wust-module.ts file code

(5). The following shows the base-component.ts code

6. I want to say

1. Since my current company packages all modules into private npm packages and then publishes them to a private npm server, you may see some places in the code. Please do not copy them blindly. You must understand the code before using it @topibd/xxx. @topibd/xxxPlease Change to the folder directory of the corresponding module

2. If you have any questions, corrections or technical exchanges, please leave a message at: [email protected], thank you!