The function of Angular routing is to realize page jump and view switching in single-page applications. 1. The basic routing function can be realized by introducing RouterModule and Routes, configuring the routing table in the root module or using lazy loading method to load in the module, 2. Use the router-outlet tag to specify the display location of the routing component, and implement local page updates through the routerLink instruction; 3. Dynamic routing can be defined by adding parameters (such as /user/:id) to the path and injecting ActivatedRoute into the component; 4. Nested routing defines the child routing structure through the children attribute, and the parent component needs to add router-outlet to display the child routing content.

The purpose of Angular routing is to enable page jumps and view switching in single page applications (SPA), just like traditional multi-page applications. Instead of refreshing the entire page, it loads different component content according to the URL.

How to configure basic routing

To use routing in Angular, you must first introduce RouterModule and Routes . You can configure the routing table in the root module (AppModule), or you can load it in modules by lazy loading.

One of the simplest routing configurations is as follows:

 const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

Then register these routes in the module using RouterModule.forRoot(routes) . In this way, when you access /home or /about , you can see the corresponding component content.

Use router-outlet to display routing content

Angular routing will not automatically display the components, you need to add the <router-outlet> tag to the HTML template. This tag is where the routing component needs to be inserted.

For example, write in the AppComponent template:

 <nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

After clicking on the link, HomeComponent or AboutComponent will be displayed in <router-outlet> location.

• routerLink is used to replace the <a href=""> directive to avoid page refresh
• The URL changes after clicking, but the page is only partially updated

Dynamic routing and getting parameters

Sometimes you want the path to take parameters, such as /user/123 , and you need dynamic routing. You can define the path like this:

 { path: 'user/:id', component: UserComponent }

Then inject ActivatedRoute into the component to get the parameters:

 constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(params['id']);
  });
}

This method is suitable for scenarios where data needs to be loaded according to URL parameters, such as user details pages, article pages, etc.

How to deal with nested routes

If you have a structure like /user/123/profile , you need to have nested routes. children attribute can be set in the main path to define the subroutine:

 {
  path: 'user/:id',
  component: UserComponent,
  children: [
    { path: 'profile', component: ProfileComponent },
    { path: 'settings', component: SettingsComponent }
  ]
}

At this time, the parent component (UserComponent) also needs a <router-outlet> to display the content of the child route.

Basically that's it. Angular routing functions are very complete, from simple jump to lazy loading, guarding, and redirection, but the above basic operations can already meet the needs of most projects.

The above is the detailed content of Explain Angular routing. For more information, please follow other related articles on the PHP Chinese website!