搜索
首页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的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具