Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use Router to browse views in Angular 12". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

precondition

In order to continue with the demonstration in this article, you should have the following conditions:

Integrated development environment (IDE) such as VS Code

Install Node version 11.0 on your computer

Node Package Manager version 6.7 (usually provided with Node installation)

Angular CLI v8.0 and above

The latest version of Angular (version 12):

Ng version

Confirm that you are using v12, if not, please update to v12 version.

How do I navigate between views?

One of the wonders of building SPA (single-page applications) is the ability to have multiple views. Using Angular makes this easy because you can use navigation tools to dynamically display multiple views in a component. You can go from the home page to the about page to the contact us page, all in one component.

Why is routing important?

Imagine a scenario where you move from one view in SPA to another, but the URL has not changed at all. Just as you click the "about us" button, the page appears in DOM, but the URL still displays "newapp.com" instead of "newapp.com/about".

There are some problems. The first is how to bookmark a specific view and see that the bookmark saves the URL instead of the application view? Other problems are because URL is basically static, how the concept of refreshing pages will work and how to share links with others.

Routing ensures that the URL matches the view displayed so that you can easily separate the view, maintain the state, and even have an intuitive Web experience.

What is Angular Router?

Angular Router, a JavaScript router built and maintained by the Angular team, has a wide range of routing packets that allow you to accurately define the URL string to assign to the view. You can have multiple router exits, path matching, or even route protection. This is an important part of Angular to ensure that SPA can be easily built using the framework.

What are we going to build?

We will build a small music video application that will display two views when you click the button that connects them, as shown below:

Configuration

First, open VS Code, and then create a new angular application in the terminal using the following command:

Ng new newap-routing

Adding a route tag automatically creates a new Angular application called newapp and preconfigures the route.

Now change the directory and navigate to the application root folder using the following command:

Cd newapp

Two components

The next thing to do is to generate a new component that will hold the two views you plan to alternate between.

Ng generate component artists-it-is

Ng generate component records-it-is

These two commands create a new folder called Artists and Records, similar to Vue.js by default, using inline styles and templates in the application folder of the source code. The next thing to do is to configure routing to suit our needs.

Configure routin

To configure the router, copy the following code block to your app-routing.module.ts file:

Import {NgModule} from'@ angular/core';import {Routes, RouterModule} from'@ angular/router';import {ArtistsComponent} from'. / artists/artists.component';import {RecordsComponent} from'. / records/records.component';const routes: Routes = [{path:'artists', component:ArtistsComponent}, {path:'records', component:RecordsComponent}]; @ NgModule ({imports: [RouterModule.forRoot (routes)], exports: [RouterModule]}) export class AppRoutingModule {} export const ArrayOfComponents = [ArtistsComponent, RecordsComponent]

First, two components are imported; then routing is configured. Notice how to define the required URL strings as Artists and Records and match them with the two components? In order not to continue to import components where else might be needed, we created an array of components.

To register this new development project, open your application module file and copy it in the following code block:

Import {BrowserModule} from'@ angular/platform-browser';import {NgModule} from'@ angular/core';import {AppRoutingModule, ArrayOfComponents} from'. / app-routing.module';import {AppComponent} from'. / app.component';@NgModule ({declarations: [AppComponent,ArrayOfComponents], imports: [BrowserModule,AppRoutingModule], providers: [], bootstrap: [AppComponent]}) export class AppModule {}

Here we have registered a new array of components, and as you can see, it is no longer necessary to import two components into the array, which is a good way to keep the code maintained correctly.

Router link

The next thing to do is to build the application template itself, and the router link is part of the Angular router to indicate the link-it is critical within the template when you want to point to the view. In the application component HTML file, replace the content with the following code block:

This is your Music TVArtistsRecords

When the "Artists" button is clicked, the view is changed to the Artists component, and the same is done when the "Records" button is clicked.

Wrap up

To add a style to the application to highlight it, open the application component CSS file and copy the following rules in it:

.car {top: 50% cross-border: 2px solid # 73AD21: adding: 20pxwidth: 600px; height: 250px; Margaret left: 25% top; bottom: 15px;} button {width: 50%; center;border-radius: 15px: border: 2px solid # 73AD21: width: fit-content;margin: 20px; padding: 20px;}

Save all these files and run the application on the development server using the following command:

Ng serve

You will see that it runs exactly as shown above.

That's all for "how to use Router to browse views in Angular 12". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.