Angular5学习笔记 路由配置
因为angular-cli脚手架的关系,所以配置路由可以通过命令行来创建路由文件
原本创建一个angular项目的命令是ng new 项目名,就可以了,但这样创建出来的项目是没有路由文件的。
如果需要带上路由文件,只需要在原本的基础上,在后面加上--routing
ng new 项目名 –-routing
还有一种配置路由的方式:
首先通过ng g module app-routing --flat --module=app,创建一个模块
接着将Routes,RouterModule引入
import { Routes, RouterModule } from '@angular/router';
然后加上路由词典
const routes: Routes = [
{ path: 'path', component: NewsComponent },
];
再接着是在@NgModule修饰符下改成
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
最后就是将导出类名,改成对应的名字
export class AppRoutingModule { }
最后一步:在页面入口(app.component.html)里加上<router-outlet></router-outlet>
--flat :这是让这个模块独立在app目录下
--module=app :将路由模块在app.module.ts里面注入
Angular5学习笔记 路由配置的更多相关文章
- angular5学习笔记 路由通信
首先在路由字典中,接收值的组件中加上:/:id 在发送值的组件中,发送值的方式有几种. 第一种:<a routerLink="/detail/1">新闻详情1</ ...
- Angular5学习笔记 - 路由管理(五)
一.添加路由管理引用 打开src/app/app.module.ts文件 import {RouterModule} from '@angular/router'; import {Routes} f ...
- Angular6 学习笔记——路由详解
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Redis学习笔记4-Redis配置详解
在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...
- EasyARM i.mx287学习笔记——minicom配置和使用
0 前言 在windows中有非常多串口调试软件,比如putty. 而ubuntu中也有非常多串口调试软件,当中最简单有用的便是minicom了. 本文说明虚拟机中怎样使用minico ...
- Redis学习笔记4-Redis配置具体解释
在Redis中直接启动redis-server服务时, 採用的是默认的配置文件.採用redis-server xxx.conf 这种方式能够依照指定的配置文件来执行Redis服务. 依照本Redi ...
- vue学习笔记——路由
1 路由配置 在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由 路由中定义: ...
- Angular学习笔记—路由(转载)
创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...
- angular5学习笔记(deep in 路由)
最近接手了一个angular5的项目.项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的. 接手前几天当然是熟悉代 ...
随机推荐
- Excel开发之旅(三)——添加侧边工具栏
1. 添加自定义用户控件:选择项目添加新建项用户控件.修改文件名,点击添加即可. 2. 重复步骤1,再添加3个自定义控件,接下来我们在自定义用户控件上面添加一些工具箱组件 3. 由于我们添加的是侧边工 ...
- JQuery的getJSON函数跨域
由于一开始看到“$”等类似符号就头晕,所以注定与PHP和JQuery无缘了,不过自己用JavaScript可不代表其他人也得用,这不,麻烦到了... 两个网站:A.B A站点提供了一个重要的API,由 ...
- VNC Viewer
首先需要明确,什么事VNC , Virtual Network Computing ,VNC允许Linux系统可以类似实现像Windows中的远程桌面访问那样访问Linux桌面. 首先试试服务器装了V ...
- ubuntu服务器下tomcat安装(不推荐使用apt-get)
最近在阿里云服务器上装tomcat,一开始为了省事直接使用了apt-get安装,结果整个程序被拆开散到了好多地方,尤其是像网上说要把打包好了.war文件放到webapps文件夹下,但是开始并没有在/u ...
- 日常踩坑——Dev C++ pow()函数的坑
坑 Dev C++ pow()函数 那年冬天,显示屏前坐着如喽啰,那时候我含泪发誓,再也不用Dev. 蓝桥杯官网给提供的版本,没办法bug也得硬着头皮用. 16年蓝桥杯的第八题 四平方和定理: 在De ...
- 7、Spring -Cloud-路由网管Spring Cloud Zuul
7.1.为什么需要Zuul Zuul 作为路由网关组件,在微服务架构中有着非常重要的作用: 7.2.Zuul的工作原理 Zuul 是通过 Servlet 来实现的, Zuul 通过自定义的 Zuu!S ...
- Java常用的异常类型
如上图所示:异常Exception和Error都继承自Throwable类 其中Error类代表了编译错误和系统的错误,不允许捕获 Exception代表标准java库方法所触发的异常.包括Runti ...
- Dubbo实践(十六)集群容错
Dubbo作为一个分布式的服务治理框架,提供了集群部署,路由,软负载均衡及容错机制.下图描述了Dubbo调用过程中的对于集群,负载等的调用关系: 集群 Cluster 将Directory中的多个In ...
- Java 8-lambda表达式及方法引用
Lambda表达式 Lambda表达式是一个类似于匿名函数的语法糖,它实现一个函数式接口,它允许我们将函数当成参数传递给某个方法,或者把代码本身当作数据处理. 一个 Lambda 表达式可以有零个或多 ...
- 轻量ORM-SqlRepoEx (十四)最佳实践之Dapper(1)
简介:SqlRepoEx是 .Net平台下兼容.NET Standard 2.0人一个轻型的ORM.解决了Lambda转Sql语句这一难题,SqlRepoEx使用的是Lambda表达式,所以,对c#程 ...