Angular学习笔记:路由

本文是自己的学习笔记,主要参考资料如下。

- B站《Angular全套实战教程》,达内官方账号制作,https://www.bilibili.com/video/BV1i741157Fj?https://www.bilibili.com/video/BV1R54y1J75g/?p=32&vd_source=ab2511a81f5c634b6416d4cc1067809f。



  • 1、路由
    • 1.1、单页面应用和多页面应用
    • 1.2、Angular实现单页面应用
      • 1.2.1、定义和注册路由词典
      • 1.2.2、注册路由词典
      • 1.2.3、设置挂载点
    • 1.3、路由在实际使用中的注意事项


1、路由

1.1、单页面应用和多页面应用

  • 多页面应用:传统的跳转页面的方式,比如超链接,会打开一个新的网页会在在本页面跳转到另一个新的网页。
    它的本质是摧毁一个DOM树,然后请求另一个新的来渲染。

    很明显,如果网络或者服务器有问题这种跳转方式会花费很长时间。、

    这种就是多页面应用,DOM树会不断地创建和销毁。

    如果是跳转到其他应用,那这种方式是不可避免的;但如果是在自家提供的服务之间跳转这种方式就很没必要。

  • 单页面应用:在自家的页面之间跳转就可以不用超链接的方式,自始至终只有一颗DOM树,这种应用就是单页面应用。
    对于单页面应用,页面的跳转只是div的替换而已。

如同下图所示,登录页面和注册页面是两个div片段。这两个页面的的切换只是两个div片段的更换而已,主页面的代码不变,整体的DOM树不用反复销毁创建。
请添加图片描述


1.2、Angular实现单页面应用

1.2.1、定义和注册路由词典

所谓的路由词典就是url和组件的关系。比如有个登录页面,对应的组件是login.component.ts中的LoginComponent。我们希望,网址输入http://myApplication.com/login时就像是LoginComponent的内容。这个网址和组件的映射就是路由词典。

定义好路由词典后就需要让系统知道这个词典,这过程就是注册词典。

首先建立两个页面用于切换

ng generate component /routing/first
ng generate component /routing/second

需要注意一下,这里演示的内容是基于最基本的Angular项目,在index.html文件中<base href="/">。确保这个属性是"/"才行。
在这里插入图片描述

确保在AppModuleimportAppRoutingModule。这个Module一般是自动生成的。路由词典也是在这个Module中定义。

下面是路由词典的定义。预期是localhost:4200/first-component显示FirstComponent的内容,localhost:4200/second-component显示SecondComponent的内容,

路由词典定义是放在routes的赋值中。

注册则是imports: [RouterModule.forRoot(routes)]这一语句。注册其实有多种方式,这里只是最简单的一种,将路由注册到根路径,即first-component这个路径是注册到localhost:4200/这个根路径下。

const routes: Routes = [{ path: 'first-component', component: FirstComponent },{ path: 'second-component', component: SecondComponent },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule {
}

1.2.2、注册路由词典


1.2.3、设置挂载点

我们需要设置挂载点,将组件挂载在某一颗DOM树上。当路由变化时,系统才能知道需要替换哪部分的代码块。

请添加图片描述

使用router-outlet标签即可表示挂载点。

下面的例子中,我会设置两个超链接First ComponentSecond Component,点击他们之后会分别跳转到localhost:4200/first-componentlocalhost:4200/second-component。我们可以看到<router-outlet>代码块所在位置会分别被FirstComponentSecondComponent所替代。


<h1>Angular Router App</h1>
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
<nav><ul><li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li><li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li></ul>
</nav>
<!-- The routed views render in the <router-outlet>-->
<router-outlet>
</router-outlet>

在这里插入图片描述



1.3、路由在实际使用中的注意事项

在实际使用中,Angular项目多半会被编译打包到tomcat中启动,这时候需要额外配置,不然路由会失效导致404。

我们需要在app-routing.module.ts中设置useHash: true,这样就能使路由生效。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './routing/first/first.component';
import { SecondComponent } from './routing/second/second.component';const routes: Routes = [{ path: 'first-component', component: FirstComponent },{ path: 'second-component', component: SecondComponent },
];@NgModule({imports: [RouterModule.forRoot(routes, {useHash: true})],exports: [RouterModule]
})
export class AppRoutingModule {
}

不过系统会自动在baseUrl后加上通配符/#/,在这里地址就会变成http://localhost:4200/#/first-component
在这里插入图片描述

加上#是方便Angular自动与其他框架兼容,如果不想地址栏有变化也可以通过其他方式,具体可看这篇文章。

https://stackoverflow.com/questions/52416210/angular-static-base-url-and-routing-with-usehash-true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/151851.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java】微服务——Nacos配置管理(统一配置管理热更新配置共享Nacos集群搭建)

目录 1.统一配置管理1.1.在nacos中添加配置文件1.2.从微服务拉取配置1.3总结 2.配置热更新2.1.方式一2.2.方式二2.3总结 3.配置共享1&#xff09;添加一个环境共享配置2&#xff09;在user-service中读取共享配置3&#xff09;运行两个UserApplication&#xff0c;使用不同的pr…

大数据概述(林子雨慕课课程)

文章目录 1. 大数据概述1.1 大数据概念和影响1.2 大数据的应用1.3 大数据的关键技术1.4 大数据与云计算和物联网的关系云计算物联网 1. 大数据概述 大数据的四大特点&#xff1a;大量化、快速化、多样化、价值密度低 1.1 大数据概念和影响 大数据摩尔定律 大数据由结构化和非…

Observability:使用 OpenTelemetry 对 Node.js 应用程序进行自动检测

作者&#xff1a;Bahubali Shetti DevOps 和 SRE 团队正在改变软件开发的流程。 DevOps 工程师专注于高效的软件应用程序和服务交付&#xff0c;而 SRE 团队是确保可靠性、可扩展性和性能的关键。 这些团队必须依赖全栈可观察性解决方案&#xff0c;使他们能够管理和监控系统&a…

【面试经典150 | 矩阵】旋转图像

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;原地旋转方法二&#xff1a;翻转代替旋转 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带…

Flask实现注册登录模块

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言1.…

几道web题目

总结几道国庆写的web题目 [ACTF2020 新生赛]Include1 点进去发现就一个flag.php,源代码和抓包都没拿到好东西 结合题目猜是文件包含&#xff0c;构建payload ?filephp://filter/readconvert.base64-encode/resourceflag.php 得到base64编码过的flag&#xff0c;解码即可 此题…

Android---Class 对象在执行引擎中的初始化过程

一个 class 文件被加载到内存中的步骤如下图所示&#xff1a; 装载 装载是指 Java 虚拟机查找 .class 文件并生成字节流&#xff0c;然后根据字节流创建 java.lang.Class 对象的过程。 1. ClassLoader 通过一个类的全限定名&#xff08;包名类名&#xff09;来查找 .class 文件…

Linux多线程

文章目录 多线程多线程概念多线程优点多线程缺点线程和进程 Linux线程控制POSIX线程库线程的创建进程ID获取线程终止线程等待线程分离 总结 多线程 多线程概念 在Linux中&#xff0c;线程是进程内的执行单元。换句话说&#xff0c;线程是进程内部的子任务&#xff0c;它们共享…

入侵防御系统(IPS)网络安全设备介绍

入侵防御系统&#xff08;IPS&#xff09;网络安全设备介绍 1. IPS设备基础 IPS定义 IPS&#xff08;Intrusion Prevention System&#xff09;是一种网络安全设备或系统&#xff0c;用于监视、检测和阻止网络上的入侵尝试和恶意活动。它是网络安全架构中的重要组成部分&…

MyBatis中的ResultMap有什么作用

MyBatis是一款广泛使用的Java持久层框架&#xff0c;它简化了数据库访问和数据映射的工作。在MyBatis中&#xff0c;ResultMap是一个强大的工具&#xff0c;用于将数据库查询结果映射到Java对象上。本文将深入探讨MyBatis中的ResultMap&#xff0c;解释它的作用以及如何使用它来…

进程状态的理解

我们知道进程会有属于自己的PCB&#xff0c;便于操作系统的管理&#xff0c;而PCB结构体里面还有进程状态参数&#xff0c;类似于用一个变量标识对应的进程状态&#xff0c;就相当于将每个进程状态编号&#xff0c;而PCB中有一个变量存储当前进程状态所对应的编号&#xff0c;也…

解决WordPress升级后提示:无需升级,您的WordPress数据库已经是最新的了

问题描述 当升级了 WordPress 6.3 后&#xff0c;登录后台出现了提示&#xff1a;无需升级&#xff0c;您的WordPress 数据库已经是最新的了。并且无法进入后台了。 出现这个问题的原因可能是你网站开启了 Memcached 缓存。 如何验证是否开启了 Memcached 缓存&#xff1f;检…

php 安装mongodb扩展模块,rdkafka模块

mongodb mongodb扩展下载 选择php版本&#xff0c;根据报错提示&#xff0c;选择扩展对应的版本选择非安全进程将php_mongodb.dll放到php/ext目录下修改php.ini配置&#xff0c;添加extensionphp_mongodb.dll开启php_mongodb扩展&#xff0c;重启服务php -m 查看是否开启成功…

排序(order by)

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法格式: select */列名 from 表名 order by 列名1 asc/desc, 列名2 asc/desc; 说明&#xff1a; 排序的目的&#xff1a;改变查询结果的返回顺序…

大数据软件项目的数据清洗

大数据软件项目中的数据清洗是数据预处理过程中的重要环节&#xff0c;用于识别和纠正数据集中的错误、不一致性和不完整性。虽然没有专门的"数据清洗开发框架"&#xff0c;但有许多工具和库可用于数据清洗任务。以下是一些常见的数据清洗工具和库&#xff0c;可以与…

win10 U盘安装教程

一年内&#xff0c;第三次重装电脑了&#xff0c;我必须要写一份教程了。从制作U盘开始&#xff0c;到重装系统&#xff0c;全部都记录一下&#xff0c;以备不时之需。 首先&#xff0c;找一个U盘&#xff0c;如果U盘内有需要文件&#xff0c;请自行备份&#xff0c;因为这个U盘…

JVM(Java虚拟机)

目录 1.JVM 简介 1.1 JVM 发展史 1.Sun Classic VM 2.Exact VM 3.HotSpot VM 4.JRockit 5.J9 JVM 6.Taobao JVM&#xff08;国产研发&#xff09; 1.2 JVM 和《Java虚拟机规范》 2. JVM 运行流程 JVM 执行流程 3. JVM 运行时数据区 3.1 堆&#xff08;线程共享&…

泛型的小结

文章目录 什么是泛型泛型的相关概念泛型的作用 泛型的使用泛型类语法泛型接口语法泛型方法语法泛型类的简单示例泛型接口的简单示例基于泛型的简单工厂方法泛型的上界与下界 泛型的一些使用建议 什么是泛型 从JDK1.5开始引入泛型&#xff08;generic&#xff09;语法。对类型实…

一文看懂光模块的工作原理

你们好&#xff0c;我的网工朋友 光模块有很多类别&#xff0c;是我们经常要用到的PHY层器件。虽然封装&#xff0c;速率&#xff0c;传输距离有所不同&#xff0c;但是其内部组成基本是一致的。 以太网交换机常用的光模块有SFP&#xff0c;GBIC&#xff0c;XFP&#xff0c;X…