How to use Router application in Angular

This time I will show you how to use the Router (routing) application in Angular, and what are the precautions when using the Router (routing) application in Angular. The following is a practical case, let's take a look.

Preface:

Jumping between Angular APP views depends on Router (routing). In this chapter, we will talk about the application of Router

Example explanation

The running results are as follows. Three navigation bars are set up, Home, About, and Dashboard. Click on different navigation bars to jump to the corresponding page:

Create 3 components

1. ng g c home

2. ng g c about

3. ##ng g c dashboard

Routing and configuration

(1)**Introduce Angular Router **

When using Angular Router, you need to introduce Router

Module, as follows:

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

(2) Routing configuration

Remember who manages the component? Yes, it is managed by the module. Therefore, 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';

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

Create the 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
 }
];

Description: Angular 2.X and above, start using TypeScript to write code instead of

JavaScript, so the suffix of the file 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.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Declare Router Outlet

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

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Run

Enter the path where the project is located and run;

ng serve --open

After webpack is successfully compiled, enter: http://localhost:4200

in the browser address bar. That is You can see the results at the beginning of this article.

Regarding Router, change the way of writing:

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
   }
  ]
  )
 ],

In this way, you can There is no need 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 optimization:

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

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use JS to dynamically add HTML tags

Using React Router v4 from scratch

The above is the detailed content of How to use Router application in Angular. For more information, please follow other related articles on the PHP Chinese website!