Angular 5.x Study Notes Router Application

This article mainly introduces the Router application of Angular 5.x study notes. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

Preface:

Jumping between Angular APP views depends on Router (routing). In this chapter, let’s Describe the application of Router

Example explanation

The operation 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 RouterModule, 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 or above starts to use TypeScript to write code instead of JavaScript, so the file suffix is: ts instead of js

This routerConfigue file, how to call it? 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, in the browser address bar, enter: http://localhost:4200

to see the results at the beginning of this article.

Regarding Router, another way of writing it:

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, 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'
   },

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Zero-based learning of AJAX and the AJAX framework

Zero-based learning of AJAX and the creation of automatic verification Form

Ajax get request cache processing solution

##

The above is the detailed content of Angular 5.x Study Notes Router Application. For more information, please follow other related articles on the PHP Chinese website!