關(guān)鍵要點(diǎn)

• AngularJS 正在通過一個(gè)新的路由器增強(qiáng)其路由功能，該路由器目前正在 Angular 2 中開發(fā)，并將向后移植到 Angular 1.4。此路由器解決了 ngRoute 模塊的局限性，例如無法支持嵌套視圖、并行視圖或視圖序列等復(fù)雜場景。
• 新路由器簡化了路由創(chuàng)建，允許在模板之間導(dǎo)航，并能夠管理頁面上的多個(gè)并行視圖。它還提供對組件生命周期的靈活控制，允許攔截和控制導(dǎo)航。
• 盡管仍在開發(fā)中，但新路由器值得嘗試，因?yàn)樗型喕?Angular 2 的過渡，并旨在有效地處理復(fù)雜的應(yīng)用程序場景。

AngularJS 是最流行的 JavaScript MV* 框架之一，廣泛用于構(gòu)建單頁面應(yīng)用程序 (SPA)。SPA 中最具挑戰(zhàn)性的功能之一是路由?？蛻舳寺酚缮婕案囊晥D的一部分并在瀏覽器導(dǎo)航歷史記錄中創(chuàng)建條目。作為功能齊全的客戶端框架，AngularJS 一直通過 ngRoute 模塊支持路由。盡管這對于基本路由來說足夠好，但它不支持更復(fù)雜的場景，例如嵌套視圖、并行視圖或視圖序列。

一個(gè)新的 Angular 2 路由器目前正在開發(fā)中，并將向后移植到 Angular 1.4。在本文中，我們將了解如何使用新路由器定義路由以及它如何解決 ngRoute 無法解決的一些問題。

如前所述，在撰寫本文時(shí)，新路由器的開發(fā)仍在進(jìn)行中，一些 API 以后可能會(huì)更改。Angular 團(tuán)隊(duì)尚未為新路由器命名，因此目前將其稱為未來路由器。

ngRoute 的局限性

ngRoute 的創(chuàng)建并非考慮到復(fù)雜的企業(yè)應(yīng)用程序。我個(gè)人見過一些應(yīng)用程序，其中頁面的某些部分需要分幾個(gè)步驟加載。可以使用 ngRoute 構(gòu)建此類應(yīng)用程序，但幾乎不可能為應(yīng)用于視圖的每個(gè)更改都擁有一個(gè) URL 狀態(tài)。

ng-view 指令只能在 ng-app 指令的實(shí)例內(nèi)使用一次。這阻止我們創(chuàng)建并行路由，因?yàn)槲覀儾荒芡瑫r(shí)加載兩個(gè)并行視圖。

在 ng-view 內(nèi)渲染的視圖模板不能包含另一個(gè) ng-view 指令。這阻止我們創(chuàng)建嵌套視圖。

新路由器解決了這些問題，并提供了一種靈活的方式來定義和使用路由。新路由器還采用了“Controller as”語法。我強(qiáng)烈建議使用“Controller as”語法，因?yàn)檫@是當(dāng)今為準(zhǔn)備 Angular 2 而應(yīng)遵循的約定之一。

創(chuàng)建簡單的路由

新路由器是考慮到 Angular 2 而創(chuàng)建的。Angular 2 將通過消除模塊配置階段來簡化依賴注入，這意味著我們不需要編寫配置塊來定義路由——我們可以在任何地方定義它們。

要添加到新路由器的每個(gè)路由都包含兩部分：

• path：路由模板的 URL
• component：模板和控制器的組合。按照約定，控制器和模板都必須以組件命名

路由使用 $router 服務(wù)進(jìn)行配置。由于 $router 是一個(gè)服務(wù)，因此我們可以在應(yīng)用程序中的任何地方定義路由（在提供程序或配置塊中除外）。但是，我們需要確保定義路由的代碼塊在應(yīng)用程序加載后立即執(zhí)行。例如，如果路由是在控制器中定義的（我們很快就會(huì)這樣做），則必須在頁面加載時(shí)執(zhí)行控制器。如果它們是在服務(wù)中定義的，則必須在運(yùn)行塊中執(zhí)行服務(wù)方法。

在模板之間導(dǎo)航

讓我們定義兩個(gè)簡單的路由，并使用新路由器在它們之間導(dǎo)航。如果您想繼續(xù)使用此代碼，則需要獲取新路由器的副本。請告訴我如何操作。

您可以通過 npm 在每個(gè)項(xiàng)目的基礎(chǔ)上安裝新路由器。

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

這將在您的項(xiàng)目目錄中創(chuàng)建一個(gè)名為 node_modules 的文件夾。新路由器可以在 node_modules/angular-new-router/dist/router.es5.min.js 中找到。在 AngularJS 本身之后將其包含在您的項(xiàng)目中。

首先，讓我們定義一個(gè)模塊并配置路由：

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';
  }])

上面的代碼片段中的控制器定義了三個(gè)路由。請注意，根路由重定向到我們的第一個(gè)模板，并且第三個(gè)路由接受 URL 中的參數(shù)。如您所見，指定參數(shù)的語法與 ngRoute 相同。

如前所述，每個(gè)組件都需要一個(gè)相應(yīng)的視圖模板和一個(gè)控制器。按照約定，控制器的名稱應(yīng)該是組件名稱后綴為“Controller”（在我們的例子中為 firstController 和 secondController）。視圖模板的名稱必須與組件的名稱相同。它還必須位于與組件名稱相同的文件夾中，位于名為 components 的文件夾內(nèi)。這將給我們：

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

這些約定可以使用 $componentLoaderProvider 覆蓋。我們稍后將看到一個(gè)示例，但現(xiàn)在讓我們堅(jiān)持使用這些約定。

接下來是上面使用的組件 first 和 second 的視圖。我們使用 ng-template 指令內(nèi)聯(lián)定義它們（以便我們可以重新創(chuàng)建一個(gè)可運(yùn)行的演示），但理想情況下，它們應(yīng)該在單獨(dú)的 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!';
  });

由于這兩個(gè)控制器都是為了與“Controller as”語法一起使用而創(chuàng)建的，因此它們不接受 $scope。$routeParams 服務(wù)用于檢索在路由中傳遞的參數(shù)的值。

現(xiàn)在，我們需要加載此控制器以注冊路由：

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

最后，我們需要鏈接這些路由并將它們加載到頁面中。新路由器帶來了 ng-link 指令和 ng-viewport 指令，它們分別鏈接視圖和加載模板。ng-viewport 指令類似于 ng-view；它是應(yīng)用程序一部分的占位符，該部分根據(jù)路由配置動(dòng)態(tài)加載。

以下代碼片段顯示了這些指令的用法：

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';
  }])

(后續(xù)部分，關(guān)于并行視圖、組件生命周期管理和結(jié)論，由于篇幅限制，此處省略。 可以根據(jù)需要，將原文剩余部分進(jìn)行同樣的改寫處理。)

以上是Angularjs未來派新路由器的簡介的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！