使用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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
网络资源
2006/10/09 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python列表与元组的异同详解
2019/07/02 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Django REST 异常处理详解
2020/07/15 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
环保志愿者活动总结
2014/06/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
浅谈python中的多态
2021/06/15 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript