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

This article introduces the knowledge of "how to use default routing in angular". 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!

0. Preface

Some time ago, there was a lot of trouble with the routing of angular. This article briefly introduces my understanding and usage.

1. The function and principle of routing

The existence of routing is not understood at first, because when you learn html, the access pattern looks like this:

That is, the URL will visit our page directly. So what's wrong with that? Or is there a problem? Is there really nothing wrong with a little demo? But imagine two scenarios.

Scenario 1: there are many sub-functions or sub-pages under the premise of a function / page. We may create an extra folder at this time to distinguish between these functions or pages. The more words, the harder it is to manage.

Scenario 2: security and permissions issues, because all URL can access web pages directly, it is impossible to distinguish which pages can be accessed by users with different permissions, which is a necessary feature in a formed website, because you cannot allow an ordinary user to access the functions of an administrator user.

Routing in angular mainly accomplishes these things, which can be simply shown in the following diagram.

That is, add another level between the user and the web page, which is responsible for verifying the user's rights, determining which page to visit, and so on. This is the main function of routing.

two。 Use of default rout

When an angular project is created with the ng directive, it is set to have a default route. The location is shown below:

For example, we use

Ng g c teacher

Create a teacher component

Then, the top and bottom is changed to look like this:

Import {NgModule} from'@ angular/core';import {Routes, RouterModule} from'@ angular/router';import {TeacherComponent} from'. / teacher/teacher.component'; const routes: Routes = [{path: "tea", component:TeacherComponent}]; @ NgModule ({imports: [RouterModule.forRoot (routes)], exports: [RouterModule]}) export class AppRoutingModule {}

Note: typical angular routing (Route) has two attributes:

1.path: indicates the path you visit, similar to www.xxx.com/tea

2.component: indicates which component you want to access this path to

For example, in the above example, to access localhost:4200/tea, it should access the TeacherComponent component, but we haven't configured it yet.

Check to see if AppRoutingModule and the TeacherComponent we just added are added to app.module.ts.

Then add the following information to app.component.html:

This is the default home page

Execute ng serve. Then visit localhost:4200. You will see the following page:

Then visit localhost:4200/tea. You will see the following page:

As you can see, the component we just created has been successfully loaded.

If you need to see a full-screen page at first, just leave one for app.component.html.

By the same token, if you need to show other pages, create a new component through the ng directive, and then add code similar to the following to app-routing.module.ts

Import {NgModule} from'@ angular/core';import {Routes, RouterModule} from'@ angular/router';import {StudentComponent} from'. / student/student.component';import {TeacherComponent} from'. / teacher/teacher.component'; const routes: Routes = [{path: "tea", component:TeacherComponent}, {path: "stu", component:StudentComponent}] @ NgModule ({imports: [RouterModule.forRoot (routes)], / / initialize the router and let it start listening for browser address changes exports: [RouterModule],}) export class AppRoutingModule {}

At the same time, we should not forget that there are no components in app.module.ts. Then visit

Localhost:4200/stu can see the newly created page.

This is the end of the content of "how to use default routes in angular". 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.