使用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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
javascript实现简易计算器
Feb 01 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
vue实现全选和反选功能
Aug 31 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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中curl使用指南
2015/02/05 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP加密解密函数详解
2015/10/28 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
列举Python中吸引人的一些特性
2015/04/09 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
老生常谈python中的重载
2018/11/11 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
自荐书范文
2013/12/08 职场文书
顶碗少年教学反思
2014/02/21 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
党委班子对照检查材料
2014/08/19 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js
python中pycryto实现数据加密
2022/04/29 Python