Home >Web Front-end >JS Tutorial >Angular routing practical case application
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
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 configurationRemember 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 suffix of the file is: ts instead of jsThis 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 --openWhen webpack is compiled successfully, in the browser address bar, enter: http://localhost:4200That 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 implement data transfer through vue props
Detailed explanation of BubbleTransition practical case
The above is the detailed content of Angular routing practical case application. For more information, please follow other related articles on the PHP Chinese website!