使用Angular CLI生成路由的方法


Posted in Javascript onMarch 24, 2018

第一篇文章是: "使用angular cli生成angular5项目" :https://3water.com/article/136621.htm

第二篇文章是: "使用angular cli从蓝本生成代码" :https://3water.com/article/137031.htm

我们知道使用 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

使用Angular CLI生成路由的方法

可以看到生成了两个module.

看一下routing module:

使用Angular CLI生成路由的方法

再看一下app module:

使用Angular CLI生成路由的方法

已经把AppRoutingModule import了进来.

再看一下app.component.html:

使用Angular CLI生成路由的方法

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

下面再生成两个components:

ng g c dashboard
ng g c order

使用Angular CLI生成路由的方法

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

使用Angular CLI生成路由的方法

再修改一下html:

使用Angular CLI生成路由的方法

运行一下应用: ng serve -o

使用Angular CLI生成路由的方法

使用Angular CLI生成路由的方法

嗯. 没问题.

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

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

ng g m admin --routing

使用Angular CLI生成路由的方法

在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.

使用Angular CLI生成路由的方法

随后需要修改app.module:

把admin module加入进去.

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

使用Angular CLI生成路由的方法

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

使用Angular CLI生成路由的方法

运行: ng serve -o

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

可以看到:

使用Angular CLI生成路由的方法

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

则会看到:

使用Angular CLI生成路由的方法

所以没问题.

生成Gurad.

ng g guard xxx

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 #Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 #Javascript
在vue中使用jointjs的方法
Mar 24 #Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
Webpack 之 babel-loader文件预处理器详解
Mar 23 #Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python中List的sort方法指南
2014/09/01 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python流程控制 if else实现解析
2019/09/02 Python
快速查找Python安装路径方法
2020/02/06 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
优秀员工获奖感言
2014/03/01 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
养成教育经验材料
2014/05/26 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
教师工作失职检讨书
2014/09/18 职场文书
共青团员自我评价
2015/03/10 职场文书
暑期家教宣传单
2015/07/14 职场文书
赞助商致辞
2015/07/30 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis