使用Angular CLI生成路由的方法

第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm

第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/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

可以看到生成了两个module.

看一下routing module:

再看一下app module:

已经把AppRoutingModule import了进来.

再看一下app.component.html:

router-outlet已经写上了. 很好.

下面再生成两个components:

ng g c dashboard
ng g c order

然后在app-routing.module里面设置路由:

再修改一下html:

运行一下应用: ng serve -o

嗯. 没问题.

针对一个应用里面有多个module的情况.

再生成一个module, 并且带着路由module (可以先使用-d参数查看将要生成的文件):

ng g m admin --routing

在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.

随后需要修改app.module:

把admin module加入进去.

然后修改admin.component.html, 加入router-outlet:

然后修改admin-routing.module.ts:

运行: ng serve -o

直接输入地址:http://localhost:4200/admin

可以看到:

而输入网址:http://localhost:4200/admin/email

则会看到:

所以没问题.

生成Gurad.

ng g guard xxx

这个命令将会生成xxx.guard.ts

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 使用Angular CLI从蓝本生成代码详解
  • 使用Angular CLI生成 Angular 5项目教程详解
赞 (0)

相关推荐

  • 使用Angular CLI生成 Angular 5项目教程详解

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网:https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命

  • 使用Angular CLI从蓝本生成代码详解

    第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 这篇文章主要是讲生成 Components, Directive, Service, class, interface, enum等等. ng generate <蓝本名> 命令. 该命令的格式是 ng generate <蓝本名> <参数>. 也可以使用--dry-run参数来列出要生成的文件, 而

  • 使用Angular CLI生成路由的方法

    第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/article/137031.htm 我们知道使用 ng g module admin 将会生成admin module. 而使用 ng g m sales --routing 则将会生成sales和 sales-

  • Angular+Node生成随机数的方法

    本文实例讲述了Angular+Node生成随机数的方法.分享给大家供大家参考,具体如下: 以前写过一个PHP生成随机数,然后jquey ajax获取,再jQuery改变文本的随机数的程序 现在用Angular 和 Node来重写一下 Angular的好处是双向绑定,这样直接设置变量,不用再重新设置了 Node的好处我目前还不是很理解,可以通过count这个例子来说明一下Node和PHP的不同之处 当然了,最大的好处就是,前后端都可以用JavaScript来写了,这样的话Javascript的水平

  • 使用Angular CLI进行Build(构建)和Serve详解

    第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/article/137031.htm 第三篇文章是: "使用Angular CLI生成路由" :http://www.jb51.net/article/137033.htm Build. Bui

  • 使用Angular CLI进行单元测试和E2E测试的方法

    第一篇文章是: "使用angular cli生成angular5项目" ://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" ://www.jb51.net/article/137031.htm 第三篇文章是: "使用Angular CLI生成路由" ://www.jb51.net/article/137033.htm 第四篇文章时: "使用Angular C

  • 使用Angular CLI快速创建Angular项目的一些基本概念和写法小结

    Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动

  • Angular CLI在Angular项目中如何使用scss详解

    前言 SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法. 由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作.也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何

  • 详解@angular/cli 改变默认启动端口两种方式

    因为本地希望开启两个项目,由于@angular/cli 生成项目默认是: 4200; 那么肯定会有端口冲突问题; 修改端口的两种方式: 1 修改 schema.json node_modules\@angular-devkit\build-angular\src\dev-server\schema.json { "title": "Dev Server Target", "description": "Dev Server target

  • Angular使用cli生成自定义文件、组件的方法

    不得不说,和传统的复制黏贴来创建组件的方法相比,使用angular-cli的脚手架功能来创建模块.组件显得非常高效,不仅仅有了创建了文件,还包含了一些必须的代码,同时也将组件导入了最近的模块,一些重复性工作就使用cli可以节省掉.angular提供了丰富的文件类型,但是总归是有些我们自己的项目需要,我们需要创建自定义后缀的组件,这时候就不得不舍弃cli了,那么能不能使用自定义的方式来达到脚手架创建呢? angular 脚手架创建的方式 我们首先来看看angular-cli提供的一些命令是怎么创建

随机推荐