Rumah > hujung hadapan web > tutorial js > Angular CLI生成路由步骤详解

Angular CLI生成路由步骤详解

php中世界最好的语言
Lepaskan: 2018-05-03 14:31:18
asal
1861 orang telah melayarinya

这次给大家带来Angular CLI生成路由步骤详解,Angular CLI生成路的注意事项有哪些,下面就是实战案例,一起来看一下。

我们知道使用 ng g module admin 将会生成admin module.

而使用 ng g m sales --routing 则将会生成sales和 sales-routing 两个module.

sales-routing里面就是路由的信息, 并且它被import到了sales module 里面.

为应用生成路由.

先创建一个项目:

ng new my-routing --routing
Salin selepas log masuk

可以看到生成了两个module.

看一下routing module:

再看一下app module:

已经把AppRoutingModule import了进来.

再看一下app.component.html:

router-outlet已经写上了. 很好.

下面再生成两个components:

ng g c dashboard
ng g c order
Salin selepas log masuk

然后在app-routing.module里面设置路由:

再修改一下html:

运行一下应用: ng serve -o

嗯. 没问题.

针对一个应用里面有多个module的情况.

再生成一个module, 并且带着路由module (可以先使用-d参数查看将要生成的文件):

ng g m admin --routing
Salin selepas log masuk

在admin module里面, 再创建一个admin component:

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin
Salin selepas log masuk

实际上后两个命令的-m参数可以去掉, 因为已经指定了路径 admin/, 这样默认就会在 admin module里面进行声明而不是app module.

随后需要修改app.module:

把admin module加入进去.

然后修改admin.component.html, 加入router-outlet:

然后修改admin-routing.module.ts:

运行: ng serve -o

直接输入地址:http://localhost:4200/admin

可以看到:

而输入网址:http://localhost:4200/admin/email

则会看到:

所以没问题.

生成Gurad.

ng g guard xxx
Salin selepas log masuk

这个命令将会生成xxx.guard.ts

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular组件交互步骤详解

怎样让jQuery回车触发按钮事件

Atas ialah kandungan terperinci Angular CLI生成路由步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan