使用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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
七个很有意思的PHP函数
May 12 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python hmac模块使用实例解析
2019/12/24 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python 实现进度条的六种方式
2021/01/06 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
门诊手术室工作制度
2014/01/30 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android