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 在每个项目的基础上安装新路由器。

<code class="language-bash">mkdir new-router && cd new-router
npm install angular-new-router</code>

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

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

<code class="language-javascript">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';
  }])</code>

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

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

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

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

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

<code class="language-html">

</code>

由于视图非常简单，控制器也很简单：

<code class="language-javascript">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!';
  });</code>

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

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

<code class="language-bash">mkdir new-router && cd new-router
npm install angular-new-router</code>

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

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

<code class="language-javascript">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';
  }])</code>

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

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