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

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

AngularJS 是最流行的 JavaScript MV* 框架之一，廣泛用於構(gòu)建單頁(yè)面應(yīng)用程序 (SPA)。 SPA 中最具挑戰(zhàn)性的功能之一是路由。客戶端路由涉及更改視圖的一部分並在瀏覽器導(dǎo)航歷史記錄中創(chuàng)建條目。作為功能齊全的客戶端框架，AngularJS 一直通過(guò) ngRoute 模塊支持路由。儘管這對(duì)於基本路由來(lái)說(shuō)足夠好，但它不支持更複雜的場(chǎng)景，例如嵌套視圖、並行視圖或視圖序列。

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

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

ngRoute 的局限性

ngRoute 的創(chuàng)建並非考慮到復(fù)雜的企業(yè)應(yīng)用程序。我個(gè)人見(jiàn)過(guò)一些應(yīng)用程序，其中頁(yè)面的某些部分需要分幾個(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)建嵌套視圖。

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

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

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

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

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

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

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

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

您可以通過(guò) 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è)路由。請(qǐng)注意，根路由重定向到我們的第一個(gè)模板，並且第三個(gè)路由接受 URL 中的參數(shù)。如您所見(jiàn)，指定參數(shù)的語(yǔ)法與 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)持使用這些約定。

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

<??>

<??>

由於視圖非常簡(jiǎn)單，控制器也很簡(jiǎn)單：

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”語(yǔ)法一起使用而創(chuàng)建的，因此它們不接受 $scope。 $routeParams 服務(wù)用於檢索在路由中傳遞的參數(shù)的值。

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

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

最後，我們需要鏈接這些路由並將它們加載到頁(yè)面中。新路由器帶來(lái)了 ng-link 指令和 ng-viewport 指令，它們分別鏈接視圖和加載模板。 ng-viewport 指令類似於 ng-view；它是應(yīng)用程序一部分的佔(zhàn)位符，該部分根據(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未來(lái)派新路由器的簡(jiǎn)介的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！