使用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 相关文章推荐
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
CI框架的安全性分析
2016/05/18 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
详解Python3.1版本带来的核心变化
2015/04/07 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
公务员政审个人总结
2015/02/12 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
离职信范文
2015/06/23 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python