This time I will bring you a detailed explanation of the Angular CLI generationroutingsteps, what are thenotesof the Angular CLI generation path, the following is a practical case, let's take a look.
We know that using ng gmoduleadmin will generate admin module.
And using ng g m sales --routing will generate sales and sales-routing. module.
sales-routing contains the routing information, and it is imported into the sales module.
Generate routes for the application.
First Create a project:
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 app.component.html again:
router-outlet has been written. Very good.
The following will generate two more components:
ng g c dashboard ng g c order
Then set the routing in app-routing.module:
Modify the html again:
Run Next application: ng serve -o
Hmm. No problem.
For an application, there are In the case of multiple modules.
Generate another module with a routing module (you can first use the -d parameter to 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 it will be in admin by default Make the declaration in module instead of app module.
Then you need to modify app.module:
Add the admin module into it.
Then Modify admin.component.html, add router-outlet:
and 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
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:
Detailed explanation of Angular component interaction steps
How to make jQuery enter trigger button event
The above is the detailed content of Detailed explanation of the steps to generate routes using Angular CLI. For more information, please follow other related articles on the PHP Chinese website!