angular路由详解一（基础知识）
本人原来是iOS开发，没想到工作后，离iOS开发原来越远，走上了前端的坑。一路走来，也没有向别人一样遇到一个技术上的师傅，无奈只能一个人苦苦摸索。如今又开始填angular的坑了。闲话不扯了。（本人学习是根据官网教程，如果想根据官网教程学习，我建议先把官网的例子先学一遍，路由的路基部分，都是根据这个例子来讲的）。https://www.angular.cn/（官网地址）本章部分基本是官网的内容。
基础知识
1.应用的开始都会有一个根目录开始，路由也一样，所以使用路由就在index.html的<head>标签下先添加一个<base>元素，来告诉路由器该如何合成导航用的URL。
2.在app.module.ts文件中导入需要的路由模块，记得把路由的组件也要导入进来。
3.配置路由
在@ngModule()上边创建路由数组
//path 路径参数(不能以/开头，路由会自己添加)，component是组件（也就是你要导航的目的页面）redirectTo：重定向 pathMath: 来告诉路由器如何用
URL去匹配路由的路径，** 通配符，当前面所有的路由都找不到的时候就会路由到这个组件
const routes: Routes = [
{path:'home', component:HomeComponent },
{ path: 'hero/:id', component: HeroDetailComponent },//带参数的路由
{path:' ', redirectTo:' ', pathMath:‘full'}，
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes
)
]
})
4.在组件中创建路由出口
在需要路由的HTML页面，留下路由出口。例如app.component.html
<router-outlet></router-outlet>
5.路由链接（也就是点击跳转）。例如在app.component.html中
<h1>Angular Router</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Crisis Center</a>
</nav>
<router-outlet></router-outlet>
这样就完成了一个简单的页面路由。
喜欢的朋友填个关注，点个赞给个小小的鼓励。
angular路由详解一（基础知识）的更多相关文章
- Linux dts 设备树详解(一) 基础知识
Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 1 前言 2 概念 2.1 什么是设备树 dts(device tree)? 2. ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- java中文乱码解决之道（二）-----字符编码详解：基础知识 + ASCII + GB**
在上篇博文(java中文乱码解决之道(一)-----认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述字符集.字符编码等基础知识和ASCII.GB的详情. 一.基 ...
- java中文乱码解决之道（二）—–字符编码详解：基础知识 + ASCII + GB**
原文出处:http://cmsblogs.com/?p=1412 在上篇博文(java中文乱码解决之道(一)—–认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述 ...
- angular路由详解六（路由守卫）
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- angular路由详解四（子路由）
子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, childr ...
- angular路由详解五（辅助路由）
在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet name="aux& ...
- angular路由详解三（路由参数传递）
我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"} => address/1 => Activa ...
- vue技术栈进阶（02.路由详解—基础）
路由详解(一)--基础: 1)router-link和router-view组件 2)路由配置 3)JS操作路由
随机推荐
- 9、flask之SQLAlchemy
本篇导航: 介绍 使用 SQLAlchemy-Utils 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之 ...
- 彻底理解 Android 中的阴影
如果我们想创造更好的 Android App,我相信我们需要遵循 Material Design 的设计规范.一般而言,Material Design 是一个包含光线,材质和投影的三维环境.如果我们想 ...
- Navi.Soft31.任务管理器(定时同步+数据采集)
1系统简介 1.1功能简述 在众多的软件分类中,有几类的软件不是很重要,但也很重要.它们有的是每隔一段时间需要执行一些任务的软件,我们叫它定时类软件:还有一种软件是采集网页中的数据,我们叫它采集类软件 ...
- Java经典编程题50道之二十五
一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. public class Example25 { public static void main(Stri ...
- CSS布局(五) 网页布局方式
网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块. 三种关系:相邻,嵌套,重叠. 下面介绍网页布局的常用几种方式 1.一列布局: 一般都是固定的宽高,设置margin : 0 auto来水平居 ...
- ch11 持有对象
Java集合的基本类型:List.Set.Queue.Map 使用容器时若未指定泛型参数ArrayList apples=new ArrayList();,则容器中所有元素都为Object类型,使用时 ...
- 浅谈CDN、SEO、XSS、CSRF
CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN. CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时候是在找JS文件时.当时找不到相对 ...
- nignx笔记1
上图是单版的架构,理论一个tomcat并发就200到300,经过优化后的最多500,这很明显容量低,而且出现单点故障后应用服务就不可以访问了,比如tomcat,这样明显对于多并发是不行的. 那么如果我 ...
- java I/O框架 (三)基本流
概述 基本流有字节输入输出流(InputStream,OutputStream),和字符输入输出流(Reader,Writer),它们都是抽象类,作为Java IO API中其他所有流的父类存在. 我 ...
- 【Unity3D】Unity3D开发《我的世界》之一、创建一个面
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_01.html 最近总有人问及我的游戏里跟<我的世界>一样的地形是如何实 ...