Shulou(Shulou.com)06/03 Report--

This article mainly introduces the Angular 5.x Router how to use, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Example explanation

The running results are as follows. Set up three navigation bars, Home, About, Dashboard. Click on the different navigation bar and jump to the appropriate page:

Create 3 component

Ng g c home

Ng g c about

Ng g c dashboard

Routing and configuration

(1) * * introduce Angular Router * *

When using Angular Router, you need to introduce RouterModule, as follows:

/ / app.module.tsimport {RouterModule} from'@ angular/router';imports: [BrowserModule, RouterModule]

(2) routing configuration

Remember who runs component? yes, it's managed by module. So, introduce the newly created component into app.moudle. As follows:

Import {BrowserModule} from'@ angular/platform-browser';import {NgModule} from'@ angular/core';import {RouterModule} from'@ angular/router';import {appRoutes} from'. / routerConfig';import {AppComponent} from'. / app.component';import {AboutComponent} from'. / components/about/about.component';import {HomeComponent} from'. / components/home/home.component';import {DashboardComponent} from'. / components/dashboard/dashboard.component'

Tip: pay attention to the path of component. For ease of management, we moved the newly created component to the components folder.

Create a Router Configure file

In the app directory, create the routerConfig.ts file. The code is as follows:

Import {Routes} from'@ angular/router';import {HomeComponent} from'. / components/home/home.component';import {AboutComponent} from'. / components/about/about.component';import {DashboardComponent} from'. / components/dashboard/dashboard.component';export const appRoutes: Routes = [{path: 'home', component: HomeComponent}, {path:' about', component: AboutComponent}, {path: 'dashboard', component: DashboardComponent}]

Note: Angular 2.x or above, start writing code in TypeScript instead of JavaScript, so the file suffix is: ts instead of js

How to call this routerConfigue file? It needs to be loaded into app.module.ts because app.moudle.ts is the entrance to the entire Angular App.

/ / app.module.tsimport {appRoutes} from'. / routerConfig';imports: [BrowserModule, RouterModule.forRoot (appRoutes)]

Declare Router Outlet

In the app.component.html file, add the code:

{{title}}!! Home About Dashboard

Running

Enter the path where the project is located and run

Ng serve-open

When webpack is compiled successfully, in the browser address bar, type: http://localhost:4200

You can see the results at the beginning of this article.

About Router, put it another way:

In the app.moudle.ts file, the code is as follows:

Imports: [BrowserModule, RouterModule.forRoot ([{path: 'home', component: HomeComponent}, {path:' about', component: AboutComponent}, {path: 'dashboard', component: DashboardComponent}])]

This way, you don't have to create a separate routerConfigure.ts file.

Summary

Since the introduction of component-oriented (component), routing management is much more convenient than AngularJS (1.x).

Further optimize:

You may have noticed that when accessing http://localhost:4200, its path should be "/", and we should set this default path.

{path:', redirectTo:'/home', pathMatch: 'full'}, thank you for reading this article carefully. I hope the article "how to use the Router of Angular 5.x" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.