搜索
首页web前端js教程Angularjs未来派新路由器的简介

An Introduction to the Futuristic New Router in AngularJS

关键要点

  • AngularJS 正在通过一个新的路由器增强其路由功能,该路由器目前正在 Angular 2 中开发,并将向后移植到 Angular 1.4。此路由器解决了 ngRoute 模块的局限性,例如无法支持嵌套视图、并行视图或视图序列等复杂场景。
  • 新路由器简化了路由创建,允许在模板之间导航,并能够管理页面上的多个并行视图。它还提供对组件生命周期的灵活控制,允许拦截和控制导航。
  • 尽管仍在开发中,但新路由器值得尝试,因为它有望简化向 Angular 2 的过渡,并旨在有效地处理复杂的应用程序场景。

AngularJS 是最流行的 JavaScript MV* 框架之一,广泛用于构建单页面应用程序 (SPA)。SPA 中最具挑战性的功能之一是路由。客户端路由涉及更改视图的一部分并在浏览器导航历史记录中创建条目。作为功能齐全的客户端框架,AngularJS 一直通过 ngRoute 模块支持路由。尽管这对于基本路由来说足够好,但它不支持更复杂的场景,例如嵌套视图、并行视图或视图序列。

一个新的 Angular 2 路由器目前正在开发中,并将向后移植到 Angular 1.4。在本文中,我们将了解如何使用新路由器定义路由以及它如何解决 ngRoute 无法解决的一些问题。

如前所述,在撰写本文时,新路由器的开发仍在进行中,一些 API 以后可能会更改。Angular 团队尚未为新路由器命名,因此目前将其称为未来路由器。

ngRoute 的局限性

ngRoute 的创建并非考虑到复杂的企业应用程序。我个人见过一些应用程序,其中页面的某些部分需要分几个步骤加载。可以使用 ngRoute 构建此类应用程序,但几乎不可能为应用于视图的每个更改都拥有一个 URL 状态。

ng-view 指令只能在 ng-app 指令的实例内使用一次。这阻止我们创建并行路由,因为我们不能同时加载两个并行视图。

在 ng-view 内渲染的视图模板不能包含另一个 ng-view 指令。这阻止我们创建嵌套视图。

新路由器解决了这些问题,并提供了一种灵活的方式来定义和使用路由。新路由器还采用了“Controller as”语法。我强烈建议使用“Controller as”语法,因为这是当今为准备 Angular 2 而应遵循的约定之一。

创建简单的路由

新路由器是考虑到 Angular 2 而创建的。Angular 2 将通过消除模块配置阶段来简化依赖注入,这意味着我们不需要编写配置块来定义路由——我们可以在任何地方定义它们。

要添加到新路由器的每个路由都包含两部分:

  • path:路由模板的 URL
  • component:模板和控制器的组合。按照约定,控制器和模板都必须以组件命名

路由使用 $router 服务进行配置。由于 $router 是一个服务,因此我们可以在应用程序中的任何地方定义路由(在提供程序或配置块中除外)。但是,我们需要确保定义路由的代码块在应用程序加载后立即执行。例如,如果路由是在控制器中定义的(我们很快就会这样做),则必须在页面加载时执行控制器。如果它们是在服务中定义的,则必须在运行块中执行服务方法。

在模板之间导航

让我们定义两个简单的路由,并使用新路由器在它们之间导航。如果您想继续使用此代码,则需要获取新路由器的副本。请告诉我如何操作

您可以通过 npm 在每个项目的基础上安装新路由器。

mkdir new-router && cd new-router
npm install angular-new-router

这将在您的项目目录中创建一个名为 node_modules 的文件夹。新路由器可以在 node_modules/angular-new-router/dist/router.es5.min.js 中找到。在 AngularJS 本身之后将其包含在您的项目中。

首先,让我们定义一个模块并配置路由:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

上面的代码片段中的控制器定义了三个路由。请注意,根路由重定向到我们的第一个模板,并且第三个路由接受 URL 中的参数。如您所见,指定参数的语法与 ngRoute 相同。

如前所述,每个组件都需要一个相应的视图模板和一个控制器。按照约定,控制器的名称应该是组件名称后缀为“Controller”(在我们的例子中为 firstController 和 secondController)。视图模板的名称必须与组件的名称相同。它还必须位于与组件名称相同的文件夹中,位于名为 components 的文件夹内。这将给我们:

<code>projectRoot/
  components/
    first/
      first.html
    second/
      second.html</code>

这些约定可以使用 $componentLoaderProvider 覆盖。我们稍后将看到一个示例,但现在让我们坚持使用这些约定。

接下来是上面使用的组件 first 和 second 的视图。我们使用 ng-template 指令内联定义它们(以便我们可以重新创建一个可运行的演示),但理想情况下,它们应该在单独的 HTML 文件中:

<🎜>

<🎜>

由于视图非常简单,控制器也很简单:

angular.module('simpleRouterDemo')
  .controller('FirstController', function(){
    console.log('FirstController loaded');
    this.message = 'This is the first controller! You are in the first view.';
  })
  .controller('SecondController', function($routeParams){
    console.log('SecondController loaded');
    this.message = 'Hey ' + $routeParams.name + 
      ', you are now in the second view!';
  });

由于这两个控制器都是为了与“Controller as”语法一起使用而创建的,因此它们不接受 $scope$routeParams 服务用于检索在路由中传递的参数的值。

现在,我们需要加载此控制器以注册路由:

mkdir new-router && cd new-router
npm install angular-new-router

最后,我们需要链接这些路由并将它们加载到页面中。新路由器带来了 ng-link 指令和 ng-viewport 指令,它们分别链接视图和加载模板。ng-viewport 指令类似于 ng-view;它是应用程序一部分的占位符,该部分根据路由配置动态加载。

以下代码片段显示了这些指令的用法:

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

(后续部分,关于并行视图、组件生命周期管理和结论,由于篇幅限制,此处省略。 可以根据需要,将原文剩余部分进行同样的改写处理。)

以上是Angularjs未来派新路由器的简介的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能?如何在浏览器中优化JavaScript代码以进行性能?Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略,重点是减少执行时间并最大程度地减少对页面负载速度的影响。

如何使用浏览器开发人员工具有效调试JavaScript代码?如何使用浏览器开发人员工具有效调试JavaScript代码?Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试,专注于设置断点,使用控制台和分析性能。

如何构建简单的jQuery滑块如何构建简单的jQuery滑块Mar 11, 2025 am 12:19 AM

本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库,它基于jQuery构建,并提供许多配置选项来设置轮播。 如今,图片轮播已成为网站必备功能——一图胜千言! 决定使用图片轮播后,下一个问题是如何创建它。首先,您需要收集高质量、高分辨率的图片。 接下来,您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计,因此使用此库构建的轮播可以适应任何

jQuery矩阵效果jQuery矩阵效果Mar 10, 2025 am 12:52 AM

将矩阵电影特效带入你的网页!这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效,只需选择一张图片,插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧,非常有趣! 工作原理 插件将图片加载到画布上,读取像素和颜色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域,并利用jQuery计算每个区域的平均颜色。然后,使用

如何使用源地图调试缩小JavaScript代码?如何使用源地图调试缩小JavaScript代码?Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图,设置断点以及使用Chrome DevTools和WebPack之类的工具。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),