使用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 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
javascript 节点排序 2
Jan 31 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
使用vue打包进行云服务器上传的问题
Mar 02 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 smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python比较2个xml内容的方法
2015/05/11 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Django卸载之后重新安装的方法
2017/03/15 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
档案室主任岗位职责
2014/02/12 职场文书
党校学习自我鉴定
2014/02/24 职场文书
企业安全标语
2014/06/07 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书