Angular CLI generates route analysis instructions

This time I will bring you Angular CLI generation routingAnalysis and explanation, what are the notes for Angular CLI generating routing, the following is a practical case, let's take a look.

Generate routes for the application.

Create a project first:

ng new my-routing --routing

You can see that two module.

Look at the routing module:

Look at the app module:

AppRoutingModule has been imported.

Look at app.component.html again:

##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 the html again:

Run the application: ng serve -o

Yeah. No problem.

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

Generate another module, And with routing module (you can use the -d parameter to view the file to be generated first):

ng g m admin --routing

In the admin module, create an 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.

Then modify admin.component.html and add 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 The command will generate xxx.guard.ts

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Put the mouse over the text to pop up the floating layer

Detailed explanation of interactive use of Angular components

The above is the detailed content of Angular CLI generates route analysis instructions. For more information, please follow other related articles on the PHP Chinese website!