Angular routing practical case application-JS Tutorial-php.cn

Angular routing practical case application

php中世界最好的语言

Release： 2018-06-09 16:06:12

Original

1224 people have browsed it

This time I will bring you a practical case application of Angular routing. What are the precautions for using Angular routing? 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

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 '@angular/router';
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 '@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';

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 '@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
 }
];

Copy after login

Description: Angular 2.X or above starts to use TypeScript to write code instead of JavaScript, so the suffix of the file 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)
],

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

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

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

Copy after login

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

Copy after login

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!