關(guān)鍵要點

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

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

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

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

ngRoute 的局限性

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

ng-view 指令只能在 ng-app 指令的實例內(nèi)使用一次。這阻止我們創(chuàng)建並行路由，因為我們不能同時加載兩個並行視圖。

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

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

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

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

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

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

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

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

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

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

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

這將在您的項目目錄中創(chuàng)建一個名為 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 中的參數(shù)。如您所見，指定參數(shù)的語法與 ngRoute 相同。

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

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

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

接下來是上面使用的組件 first 和 second 的視圖。我們使用 ng-template 指令內(nèi)聯(lián)定義它們（以便我們可以重新創(chuàng)建一個可運行的演示），但理想情況下，它們應(yīng)該在單獨的 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”語法一起使用而創(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ù)路由配置動態(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ù)需要，將原文剩餘部分進行同樣的改寫處理。)

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