Angular 5.x Study Notes Router Application-JS Tutorial-php.cn

Angular 5.x Study Notes Router Application

亚连

Release： 2018-05-26 13:40:47

Original

1591 people have browsed it

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

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.ts
import { RouterModule } from &#39;@angular/router&#39;;
imports: [
 BrowserModule, RouterModule
],

Copy after login

(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 &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { RouterModule } from &#39;@angular/router&#39;;

import { appRoutes } from &#39;./routerConfig&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { AboutComponent } from &#39;./components/about/about.component&#39;;
import { HomeComponent } from &#39;./components/home/home.component&#39;;
import { DashboardComponent } from &#39;./components/dashboard/dashboard.component&#39;;

Copy after login

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 &#39;@angular/router&#39;;
import { HomeComponent } from &#39;./components/home/home.component&#39;;
import { AboutComponent } from &#39;./components/about/about.component&#39;;
import { DashboardComponent } from &#39;./components/dashboard/dashboard.component&#39;;

export const appRoutes: Routes = [
 { path: &#39;home&#39;, 
 component: HomeComponent 
 },
 {
 path: &#39;about&#39;,
 component: AboutComponent
 },
 { path: &#39;dashboard&#39;,
 component: DashboardComponent
 }
];

Copy after login

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 &#39;./routerConfig&#39;;
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Copy after login

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>

Copy after login

Run

Enter the path where the project is located and run;

ng serve --open

Copy after login

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: &#39;home&#39;, 
   component: HomeComponent 
   },
   {
   path: &#39;about&#39;,
   component: AboutComponent
   },
   {
   path: &#39;dashboard&#39;,
   component: DashboardComponent
   }
  ]
  )
 ],

Copy after login

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: &#39;&#39;,
   redirectTo:&#39;/home&#39;,
   pathMatch: &#39;full&#39;
   },

Copy after login

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

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!