A brief analysis of Angular learning routing

This article will take you to understand routing in Angular, introduce the basic usage of routing, and see how to receive parameters. I hope it will be helpful to everyone!

Environment:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. Summary

Simply speaking, in the address bar, different addresses (URL) correspond to Different pages, this is routing. Also, by clicking the browser's forward and back buttons, the browser will navigate forward or backward in your browsing history, again based on routing. [Related tutorial recommendations: "angular Tutorial"]

In Angular, Router is an independent module, defined in the @angular/router module,

1. Router can cooperate with NgModule to perform lazy loading (lazy loading) and preloading operations of modules (refer to "Angular Getting Started to Mastery Series Tutorials (11) - Module (NgModule), Delayed Loading of Modules");
2. Router will Manages the life cycle of components, it is responsible for creating and destroying components.

For a new AngularCLI-based project, you can add the AppRoutingModule to app.component.ts by default through the option during initialization.

2. Basic usage of Router

2.1. Preparation

We first create 2 pages to illustrate the use of routing:

ng g c page1
ng g c page2

Use the above AnuglarCLI command to create two components, Page1Component and Page2Component.

2.2. Register route

//src\app\app-routing.module.ts
const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

As you can see, simple route registration only requires two attributes, path and component, to define the route respectively. The relative path, and response component of this route.

2.3. Usage in html

<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>

In the html template, directly use the routerLink attribute to identify the angular route. After executing the code, you can see two hyperlinks, Page1 and Page2. Click to see that the address bar address is changed to http://localhost:4200/page2 or http://localhost:4200/page1. The page content is in page1 and page2. Switching

2.4. Usage in ts code

Sometimes, it is necessary to jump based on the business logic in ts. In ts, Router instance needs to be injected, such as

constructor(private router: Router) {}

Jump code:

  // 跳转到 /page1
  this.router.navigate(['/page1']);

  // 跳转到 /page1/123
  this.router.navigate(['/page1', 123]);

3. Receive parameters

##3.1 . Parameters in the path

Generally speaking, we use the parameters as a segment in the URL, such as /users/1, which represents the user whose id is 1, and the route is defined as "/users /id" style.

For our simple page, for example, our page1 page can pass the id parameter, then we need to modify our routing to:

const routes: Routes = [
  {
    path: 'page1/:id',    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: 'page1',        
    redirectTo: 'page1/',   // 跳转到'page1/:id'
  },
  {
    path: 'page2',
    component: Page2Component,
  },
];

tsWhen the code reads parameters, it first needs to inject ActivatedRoute, The code is as follows:

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log('Parameter id: ', params.get('id'));

    // 地址 http://localhost:4200/page1/33   
    // 控制台输出：Query Parameter name:  33

    // 地址 http://localhost:4200/page1/     
    // 控制台输出：Query Parameter name:   (实际结果为undefined)
  });
}

3.2. Parameters in the parameter (QueryParameter)

There is another way to write the parameter, such as http:// localhost:4200/?name=cat, that is, after the URL address, add a question mark '?', and then add the parameter name and parameter value ('name=cat'). This is called a query parameter (QueryParameter).

When taking this query parameter, it is similar to the previous routing parameter, except that paramMap is changed to queryParamMap. The code is as follows:

this.activatedRoute.queryParamMap.subscribe((params) => {
  console.log('Query Parameter name: ', params.get('name'));

  // 地址 http://localhost:4200/page1?name=cat
  // 控制台输出：Query Parameter name:  cat

  // 地址 http://localhost:4200/page1/
  // 控制台输出：Query Parameter name:   (实际结果为undefined)
});

4. URL path display format

Different from traditional pure static (html) sites, the URL in angular does not correspond to a real file (page), because angular takes over the routing (Routing) processing to decide which component to display to the end user. In order to adapt to different scenarios, Angular's URL path display format has 2 formats:

• http://localhost:4200/page1/123

• http://localhost:4200/#/page1/123

The default is the first one, without adding #. If necessary, you can add

useHash: true to app-routing.ts, such as:

// app-routing.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

5. Problems encountered during deployment

Similarly, because anuglar takes over the routing (Routing) processing, there will be different techniques (requirements) when deploying to servers such as iis, nginx, etc. For detailed reference:

https://github.com /angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

6. Summary

• angular does not support optional routing by default (e.g. /user/:id?), but we can define 2 routes pointing to the same Component to achieve this and achieve code reuse; ( Or use redirectTo)

• You can use the useHash parameter to add a # before the augular path;

• When reading parameters, you need to subscribe. Once, it cannot be read directly.

• For deployment issues after packaging, check the official wifi (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your- server-to-work-with-html5mode)

For more programming-related knowledge, please visit: Programming Video! !

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