Constructing the front-end architecture of ANGULAR2 background management system from scratch

recently the company's project needs, need to design a set of backend management system front-end framework, I used the angular-cli to build ANGUALR2 template, and according to the requirements, added ng2-charts/ng2-smart-table/ File-upload and other Ng2 Plug-ins, the project's source address in: Https://github.com/taoziUncle/ng2-admin-master the structure of the project is as follows:
I. Automate the construction of NG2 projects

1, installation node.js download address: http://nodejs.cn/download/

Use
node--version   //View node version
npm-v//view NPM version

2. Installation Angular-cli

NPM install-g @angular/CLI

2.1. Build NG Project

ng New My-app

The application code is located in the SRC folder. All the angular components, templates, styles, pictures, and everything you need for your application are there. Files outside this folder are supported for building applications.

file	Use
Node_modules/...	Node.js creates this folder and places all the Third-party modules listed in Package.json.
Angular-cli.json	The configuration of the angular-cli. In this file, you can set a series of default values and configure which files should be excluded when the widget project is used. For more information, please refer to the official documentation for ANGULAR-CLI.
Package.json	NPM configuration file, which lists the Third-party dependencies that are used by the project. You can also add your own custom scripts here.
Src	The directory where the project is located

2.2. Run NG Project

CD My-app
ng serve or  npm start

2.3, Packaging and publishing

NG Build

The directory will appear dist folder, you can see the inside is packaged files, including some HTML, JS and other files , NG2 modular structure

1. Module modules

Angular applications are modular and angular have their own modular systems, which are called angular modules or ngmodules.

Each angular application has at least one module (the root module), which is customarily named Appmodule.

The root module may be the only module in some small applications, and most applications will have many feature modules, each of which is a cohesive block of code focused on an application area, workflow, or closely related function.

Ngmodule is an adorner function that receives a metadata object that describes the properties of a module. One of the most important properties is:

-declarations-declares the view class that is owned in this module. Angular has three view classes: components, directives, and pipelines.
-A subset of exports-declarations that can be used for component templates in other modules.
-Imports-the other modules where the class required for the component template that this module declares.
-providers-the creator of the service and added to the Global Services list to apply any part.
-Bootstrap-Specifies the main view of the application (called the root component), which is the host of all other views. Only the root module can set the Bootstrap property.

2, Component components

Component is responsible for controlling a small area on the screen that we call a view.

In the example code below, component is primarily responsible for three things: importing Component,oninit from the Ng2 module library. Defines the template templateurl for a component. Manipulate the data in the template, similar to the ANGULAR1 controller.

Import {Component,oninit} from ' @angular/core ';

@Component ({
  selector: ' App-root ',
  templateurl: './app.component.html '
})
Export class Appcomponent implements oninit{
    title= "";
    Ngoninit () {
        this.title = "navigation";
    };

}

3, Template template

The component view is defined by its own template. Templates exist as HTML, telling angular how to render the component.

The above structure NG2 the most basic modular structure, which has been brought up in projects built with @angular/cli.

Third, add the first layer route

1, the new routing module app.routing.ts, sample code is as follows

Import {Routes, routermodule} from ' @angular/router ';
Import {analysiscomponent} from './module/view.analysis ';
Import {logincomponent} from './login/login.component ';
Const Approutes:routes = [
  {
    path: ',
    component:logincomponent
  },
  {
    path: ' Content ',
    Component:analysiscomponent
  },
  {
    path: ' * * ',
    component:logincomponent
  }
];
Export Const Routing = Routermodule.forroot (approutes);

2. Introducing routing in root module file app.mudule.ts

Import {routing} from        './app.routing ';
@NgModule ({
  declarations: [
    ...
  ],
  imports: [
    routing,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [Appcomponent]
})

3. Use route to jump within the page

<a routerlink= "/content" class= "btn btn-primary" > Back to 
    Dashboard 
</a>

Four, add a new page1. Create a new component file and HTML file, and introduce the HTML file into the component component. 2, the new component component is introduced into the route and the routing parameters are configured. 3, the new component component into the corresponding Mudule file, here is the App.module.ts file v. Add level Two route (difficulty: Pit more cautious line)

As a result of the project requirements, users login to enter the main page, click on the main page of the module into the Background dashboard page, dashboard page has its own independent navigation, so need to establish a child route.

1. Create a new child module with Route and introduce it into the main Module

such as Dashboard.mudule.ts in the project

2, a new set of component, HTML and the introduction of HTML into the component

such as
    Dashboard.component.ts dashboard.component.html in the project
    

3. Introduce the new component into the Sub Module (Child module)

Import {dashboardcomponent} from './dashboard.component ';
@NgModule ({
  imports: [
      ...

  ],
  declarations: [
    dashboardcomponent,
     ...
  ],
  Providers: []
})

4. Configuring routes in sub-modules (child module)

Const Tablesroutes:routes = [
    {
        path: ' Main/:id ',
        component:navcomponent,
        children: [
           { Path: ', component:dashboardcomponent},
           {path: ' Dashboard ', component:dashboardcomponent}
        ]
}

Note: Be sure to add a set of path: ';

5, new nav.component.ts file settings navigation, and configure the added routing path.

This.dashboard = "/main/" +this.para+ "/dashboard"
    this.routers = [
      {
        href:this.dashboard,
        name: " Dashboard ",
        type:false
      }
    ];

6, in the nav.component.html file to achieve the jump.

<a routerlink= ' {dashboard}} ' ><span> dashboard </span></a>

Add a new page to the 六、二级 routing layer (emphasis)

This is part of the point, because most of the pages are added to this layer, the first tier of the page is very small, only as an import layer. The second tier of routing is the display of all pages after the user arrives at dashboard.

Take charts as an example:

1, in the App folder new charts folder

2. Create a new Linecharts folder within the charts folder

3. Create a new set of components and templates within the Linecharts folder, such as LineCharts.component.ts and lineCharts.component.html, and bind the HTML to the component component.

LineCharts.component.ts file:

@Component ({
  selector: ' App-charts ',
  templateurl: './ LineCharts.component.html ',
})

4. Add linecharts routes in level two routing files

(1) Imporant Linecharts component
Import {linechartscomponent} from ' .../charts/linecharts/linecharts.component ';

(2) config routs for linecharts
const Tablesroutes:routes = [
    {
        path: ' Main/:id ',
        component: Navcomponent,
        Children: [
           {path: ', component:dashboardcomponent},
           {path: ' Dashboard ', component: Dashboardcomponent},
           {path: ' Linecharts ', component:linechartscomponent}
        ]
    }

(3) DECLARE linechartscomponent
@NgModule ({
  imports: [
      ...
  ],
  declarations: [
    Linechartscomponent,
    ...
  ],
  providers: []
})

5, Nav.Component.ts navigation components to add Linecharts routing

export class Navcomponent implements OnInit {(1) Declares linecharts variable public linecharts = "";
    Ngoninit () {(2) names the Linecharts routing path to the variable this.linecharts this.linecharts = "/main/" +this.para+ "/linecharts";
...
        (3) Get the This.routers value from the interface, the sample code is as follows: This.routers = [{href:this.dashboard, Name: ' Dashboard ', Type:false}, {href: