How to generate routes using Angular CLI

This article mainly introduces the method of using Angular CLI to generate routes. Now I share it with you and give it as a reference.

We know that using ng g module admin will generate admin module.

And using ng g m sales --routing will generate two modules, sales and sales-routing.

sales-routing contains the routing information, and it is imported into the sales module.

Generate routing for the application.

Create a project first:

ng new my-routing --routing

You can see that two modules are generated.

Look at the routing module:

Look at the app module again:

The AppRoutingModule has been imported.

Look at the app again. component.html:

router-outlet has been written. Very good.

Generate two more components below:

ng g c dashboard
ng g c order

Then set the routing in app-routing.module:

Modify it again html:

Run the application: ng serve -o

##Hmm . No problem.

For the case where there are multiple modules in an application.

Generate another module with a routing module (you can use the -d parameter first View the files to be generated):

ng g m admin --routing

In the admin module, create another admin component:

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin

In fact, the -m parameter of the last two commands can be removed, because the path admin/ has been specified, so by default it will be declared in the admin module instead of the app module .

Then you need to modify app.module:

Add the admin module to it.

Then modify admin.component.html and add it router-outlet:

Then modify admin-routing.module.ts:

Run: ng serve -o

Directly enter the address: http://localhost:4200/admin

You can see:

And enter the URL: http: //localhost:4200/admin/email

You will see:

So no problem.

Generate Gurad .

ng g guard xxx

This command will generate xxx.guard.ts

The above is what I compiled for everyone, I hope it will be done in the future Helpful to everyone.

Related articles:

Example of how to return to the homepage of the sharing page of WeChat applet

JS realizes moving the list on the left Go to the right list function

Use of el expression and non-empty judgment method in js

The above is the detailed content of How to generate routes using Angular CLI. For more information, please follow other related articles on the PHP Chinese website!