使用Angular CLI生成路由

为应用生成路由.

先创建一个项目:

ng new my-routing --routing

可以看到生成了两个module.

看一下routing module:

再看一下app module:

已经把AppRoutingModule import了进来.

再看一下app.component.html:

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

下面再生成两个components:

ng g c dashboard
ng g c order

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

再修改一下html:

运行一下应用: ng serve -o

嗯. 没问题.

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

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

ng g m admin --routing

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

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

实际上后两个命令的-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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏运维技术迷

HTTP响应可视化测试工具-httpstat

httpstat是一款可以测试http状态的可视化工具,通过这个工具可以看出来http响应信息。包括dns解析、tcp连接等信息,httpstat一共有gola...

3918
来自专栏静下来

windows服务器iis7.5安装多个php版本切换设置

因为某个网站程序的配置是在php5.3上面运行的,不兼容我现在的php5.5.所以就只能再安装个5.3的了。 在安装过程中,忘记截图了。。。就直接写吧。 准备工...

9814
来自专栏about云

如何通过官网查找hadoop、hbase、hive版本兼容信息

问题导读 1.如何查看hbase与hadoop的兼容? 2.hive是否与所有hadoop兼容? 3.hadoop2.7.1 hbase1.2.x hive...

4068
来自专栏史上最简单的Spring Cloud教程

Openresty最佳案例 | 第6篇:OpenResty连接Mysql

centos 安装mysl Centos系统下安装mysql,先下载mysql-community-release-el7-5.noarch.rpm,然后通过y...

3969
来自专栏Java帮帮-微信公众号-技术文章全总结

05.Redis 命令

05.Redis 命令 Redis 命令 Redis 命令用于在 redis 服务上执行操作。 要在 redis 服务上执行命令需要一个 redis 客户端。R...

3986
来自专栏FreeBuf

Python编写的开源Struts2全版本漏洞检测工具

0x01 说明: 由于struts2框架频繁爆出漏洞,为方便安全从业人员检测并及时修复,遂将struts历史版本payload整合在一起(ST2-005至ST2...

6296
来自专栏运维小白

增加网卡注意点

在虚拟机增加一个新的网卡之后,并设置为仅主机模式 开启虚拟机,用ifconfig命令,查看是否已经加载了网卡——>安装ifconfig包:yum install...

2268
来自专栏西安-晁州

nodejs应用离线安装部署、卸载

公司写的文档,直接粘贴过来了: 本文档提供node应用一键安装、部署、卸载说明,包含对应脚本文件 默认版本: 1、nodejs:v6.11.2.linux-...

3340
来自专栏西安-晁州

使用eclipse创建maven web项目

1、新建项目: ? 2、选择模板: ? 3、输入项目信息: ? 4、新建的项目结构,发现index.jsp报错,直接删除重新创建一个index.jsp文件后,发...

2240
来自专栏Aloys的开发之路

Unix/Linux操作系统中如何在sqlplus/rman中使用方向键

默认情况下在Unix/Linux中使用Oracle的sqlplus/rman是无法使用↑↓←→几个方向键进行操作的,要想达到Windows下使用sqlplus/...

2076

扫码关注云+社区

领取腾讯云代金券