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中文網其他相關文章！