angular路由详解一(基础知识)

摘要:
我原本是一名iOS开发人员,但我没想到在工作结束后,会远离最初的iOS开发,走到坑的前端。一路上,我没有遇到像其他人一样的技术大师,但我必须独自努力。现在,我们再次填补了角洞。不要说闲话。(我的学习基于官方网站教程。如果你想从官方网站教程中学习,我建议你首先学习官方网站的示例。路线的路基都基于这个示例。)。https://www.angular.cn/(官方网站地址)本章基本上是关于官方网站的内容。基础

本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑。一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索。如今又开始填angular的坑了。闲话不扯了。(本人学习是根据官网教程,如果想根据官网教程学习,我建议先把官网的例子先学一遍,路由的路基部分,都是根据这个例子来讲的)。https://www.angular.cn/(官网地址)本章部分基本是官网的内容。

基础知识

1.应用的开始都会有一个根目录开始,路由也一样,所以使用路由就在index.html<head>标签下先添加一个<base>元素,来告诉路由器该如何合成导航用的URL。

angular路由详解一(基础知识)第1张

2.在app.module.ts文件中导入需要的路由模块,记得把路由的组件也要导入进来。

import { RouterModule ,Routes } from '@angular/router';

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路由详解一(基础知识)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇开源加密解密库比较Delphi指针及其它(转)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

二、Nginx配置实例

Nginx配置实例 一、反向代理 实例一 1、实现效果 打开浏览器,在浏览器地址栏输入地址 www.123.com ,跳转到linux系统tomcat主页面中。 2、准备工作 在linux系统中安装tomcat,使用默认端口8080 3、访问过程分析 在浏览器地址栏输入地址,请求nginx反向代理服务器,nginx帮助我们将请求转发到linux中的tomc...

solarwinds之配置系统管理(System manager)

配置windows的 1、  打开System Manager   2、  点击new新加一个接口   3、  选择要监控的资源   4、  确认好自己要监控的资源后如下   5、  这里以监控内存使用为目标,如下   6、  对应于服务器上的资源监视器,如下   7、  若要看详细的可以通过管理卷进入web界面进行查看  ...

2.Vue技术栈开发实战-路由基础篇

之前我们把路由拆成了下面两个文件。router.js里面配置路由列表,index.js里面我们创建路由实例。之后讲到高级篇路由守卫,也是在index.js内去添加。 首先在index.js里面把vue-router和路由列表引进来。 Router作为一个插件。需要使用Vue.use方法把它加载进来。 接下来使用Router来创建一个路由实例 创建路由实例...

虚拟服务器跟端口映射

一、端口映射作用  路由器中设置端口映射的主要作用,是让Internet上的其他用户,可以访问你路由器下面电脑中的数据(软件、文件)。 路由器中设置好端口映射后,可以让Internet上的其他用户,先访问你路由器WAN接口的IP地址,路由器会自动把访问请求,转发到事先设置好的电脑上面。 二、确定映射端口号 在设置之前,先弄清楚你需要映射的端口号到底是多...

linux 网卡buffer大小

参考截取一部分:https://blog.csdn.net/ysu108/article/details/7764461 在linux下可以修改协议栈改变tcp缓冲相关参数: 修改系统套接字缓冲区 echo 65536 > /proc/sys/net/core/rmem_maxecho 256960 > /proc/sys/net/core/w...

黑马lavarel教程---11、响应处理

黑马lavarel教程---11、响应处理 一、总结 一句话总结: 如果在昂扬状态,看学习视频和运动时间重合,会很舒服 1、jquery的$.post参数为什么不需要占位? 因为每个参数的类型不同,可以识别:$.post:$.post (地址,[参数对象,回调,期望返回类型]); 2、常见的ajax响应数据类型? 有json和xml、text/html,但...