AngularDart 4.0 高级-路由概述 顶

这是路由器页面的DRAFT,它仍在积极更新。 大部分内容都是准确的,但样本仍在改进和增强。 欢迎反馈

当用户执行应用程序任务时,Angular路由器支持从一个视图导航到下一个视图。

本指南涵盖路由器的主要功能,通过演示可以实时运行的小应用程序(查看源代码)演示它们。

概观

浏览器是一种熟悉的应用程序导航模型:

  • 在地址栏中输入一个URL,然后浏览器导航到相应的页面。
  • 点击页面上的链接,浏览器导航到新页面。
  • 点击浏览器的后退和前进按钮,浏览器会前后浏览您浏览过的网页的历史记录。

Angular路由器借鉴了这种模式。 它可以将浏览器URL解释为导航到客户端生成视图的指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现的具体内容。您可以将路由器绑定到页面上的链接,并在用户单击链接时导航到适当的应用程序视图。当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激时,您都可以进行命令式导航。并且路由器在浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。

设置概述

添加angular_router

路由器功能位于angular_router库中,该库自带软件包。 将该包添加到pubspec依赖项中:

pubspec.yaml (dependencies)

dependencies:
  angular: ^4.0.0
  angular_router: ^1.0.2

在任何使用路由器功能的Dart文件中,导入路由器库:

import 'package:angular_router/angular_router.dart';

注册提供者和列表指令

如果您已经熟悉Angular路由,请提醒您需要做什么:

  • 选择一个位置策略
  • 在引导您的应用时注册适当的路由器提供商。
  • 确保每个路由组件都具有列出组件使用的路由器指令的元数据。

有关详细信息,请参阅声明路由器提供程序和指令

基本功能概述

本指南分阶段进行,以里程碑为标志,从简单的双页面和建筑开始,走向带有子路由的模块化多视图设计。 核心路由器概念的这一概述将有助于您定位后面的细节。

<base href>

大多数路由应用程序在index.html <head>中都有一个<base href =“...”>元素来告诉路由器如何编写导航网址。 有关详细信息,请参阅设置基础href

配置

当浏览器的URL更改时,路由器会查找相应的RouteDefinition,从中可以确定要显示的组件。

直到您配置它,路由器才有路由。 以下示例创建一些路由定义。 它演示了同时创建路由器并使用应用于路由器宿主组件的@RouteConfig添加路由的首选方式:

lib/app_component.dart (routes)

@Component(
  selector: 'my-app',
  // ···
)
@RouteConfig(const [
  const Route(
      path: '/crisis-center',
      name: 'CrisisCenter',
      component: CrisisCenterComponent),
  const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent)
])
class AppComponent {}

RouteDefinition有几种风格。 最常见的,如上所示,是一个命名的路由,它将URL路径映射到组件。

路由器插座

当此应用的浏览器URL成为/#/heroes时,路由器将该URL与名为Heroes的RouteDefinition匹配,并在放置在宿主视图HTML中的RouterOutlet后显示HeroesComponent。

<router-outlet></router-outlet>
<!-- Routed views go here -->

路由链接

现在,您已经配置了路由并提供了一个渲染它们的地方,但您如何导航? 该URL可以直接从浏览器地址栏中获得。 但是大多数情况下,由于某些用户操作(如点击锚标签)迫使您导航。

考虑以下模板:

lib/app_component.dart (template and styles)

template: '''
  <h1>Angular Router</h1>
  <nav>
    <a [routerLink]="['CrisisCenter']">Crisis Center</a>
    <a [routerLink]="['Heroes']">Heroes</a>
  </nav>
  <router-outlet></router-outlet>
''',
styles: const ['.router-link-active {color: #039be5;}'],

锚标签上的RouterLink指令授予路由控制这些元素。将每个RouterLink指令绑定到一个模板表达式,该模板表达式将链接参数作为链路参数列表返回。 路由将每个链接参数列表解析为完整的URL。

RouterLink指令还有助于在视觉上区分当前所选活动路线的锚点。当关联的路由链接变为活动状态时,路由将router-link-active CSS类添加到元素。如上所示,您可以在AppComponent的@Component注解中将该样式与模板一起定义。

概要

该应用程序具有配置的路由。 外壳组件有一个RouterOutlet,它可以显示路由产生的视图。 它具有RouterLink,用户可以通过路由点击进行导航。

以下是关键路由术语及其含义:

路由器组成部分

涵义

Router

显示活动URL的应用程序组件。 管理从一个组件到下一个组件的导航。

@RouteConfig

使用RouteDefinition列表配置路由。

RouteDefinition

定义路由如何根据URL模式导航到组件。

Route

一种RouteDefinition。 定义路由器如何根据URL模式导航到组件。 大多数路由由路径,路由名称和组件类型组成。

RouterOutlet

指示路由应该显示视图的指令(<router-outlet>)。

RouterLink

将可点击HTML元素绑定到路由的指令。 单击具有绑定到链接参数列表的routerLink指令的元素会触发导航。

Link parameters list

路由将其解释为路由指令的列表。 您可以将该列表绑定到RouterLink或将该列表作为参数传递给Router.navigate方法。

Routing component

一个带有RouterOutlet的Angular组件,可根据路由导航显示视图。

示例应用程序

本指南介绍了多页面路由示例应用程序的开发。 一路上,它突出了设计决策并描述了路由的关键特性。

本指南将按照一系列里程碑进行,就像您在逐步构建应用程序一样。 但是,它不是教程,它掩盖了文档中其他地方更全面地介绍的Angular应用程序构建的细节。

应用程序的最终版本的完整源代码可以从实例中查看并下载(查看源代码)。

示例应用程序正在运行

想象一下可以帮助Hero Employment Agency开展业务的应用程序。 英雄需要工作,该机构发现危机让他们解决。

该应用程序具有以下主要功能:

  1. 一个危机中心,用于维护英雄分配危机清单。
  2. 一个英雄区域,用于维护该机构雇用的英雄名单。

点击这个实例链接来查看它(查看源代码)。 一旦应用程序启动完成,您将看到一排导航按钮和带有英雄列表的英雄视图。

选择一个英雄,该应用会将您带到英雄编辑屏幕。

改名字。 点击“返回”按钮,应用程序返回英雄列表,显示更改的英雄名称。 注意名称更改立即生效。

如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。

现在点击危机中心链接查看正在进行的危机列表。

选择危机,应用程序会将您带入危机编辑屏幕。 危机详情显示在列表下方的同一页面上的子视图中。

改变危机的名称。 请注意危机列表中的相应名称不会更改。

与英雄细节不同,当您键入更新时,危机细节更改是暂时的,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。

不要单击任一按钮。 点击浏览器后退按钮或“英雄”链接。

向上弹出一个对话框。

您可以选择“OK”并丢失您的更改,或单击“Cancel”并继续编辑。

这种行为的后面是路由的routerCanDeactivate挂钩。 在离开当前视图导航之前,挂钩使您有机会清理或询问用户的许可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FD的专栏

React 中引入 Angular 组件

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的...

10630
来自专栏DeveWork

修改WordPress 搜索结果页面url 形式,安全有保障

偶然发现开源中国(OSC)的搜索功能不能在非用户登录情况下使用,据说是被攻击了,无奈之下只得关闭游客搜索功能;据说WordPress 也可以通过向搜索地址传递某...

229100
来自专栏Albert陈凯

如何复制 Intellij idea 的错误提示信息

IDEA的错误提示问题,鼠标移动上去后会有黄色/红色框提示,如何固定这个框,像Eclipse那样可以复制错误提示? 很明显,这是非常不容易做到的,因为鼠标一移动...

47330
来自专栏菩提树下的杨过

诡异的【session丢失】和【<img src="">标签】

     项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

26450
来自专栏coding for love

浏览器为契机贯穿前端知识点-大纲参考

ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了) 涉及如下部分:

8810
来自专栏计算机编程

SNS项目笔记<一>--项目启动

在新版本下,ionic得到的健硕性的更新,angular却减少了自己的体积,正所谓:“ionic吃好了,angular减肥了”于是我们也可以抛弃以前的一些坑,直...

10420
来自专栏知晓程序

想在小程序中快速部署富文本?这个插件让你一步搞定

23030
来自专栏姬小光

姬小光前端小讲堂【第004期】

前面几期我都在尝试以最平缓的曲线让大家快速入门,后续根据同学们的反馈,内容的深度会逐步提升。那么这一期我们来说说文档类型与HTML页面的基本结构。

10430
来自专栏LiveEdu在线科技教育平台

如何创建Vim Dotfile?

Dotfile是电脑系统里的隐藏文件,它是专门给更高级的用户,如开发者、程序员或工程师使用的,让他们用来调整系统。如何创建Vim-Dotfile? 可以参考以下...

23680
来自专栏PHP在线

表单提交刷新页面问题

今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。 <form name="keywordFor...

37560

扫码关注云+社区

领取腾讯云代金券