如何使用Angular UI-Router編寫模塊化代碼並命名視圖

核心要點

• Angular UI Router 是一個強大的工具，用於管理複雜 Web 應用程序中的不同狀態，與原生 AngularJS 路由實現相比，它對每個視圖提供了更多控制。它使用點表示法在父狀態內定義子狀態，並使用絕對名稱來控制 Web 應用程序的特定部分在何處顯示，從而實現模塊化應用程序設計。
• UI Router 允許開發人員在 $stateProvider 內定義一個 views 對象，該對像用於定義視圖的名稱及其模板的路徑。未命名的視圖指向父狀態（稱為相對命名）。命名視圖使用 @ 語法將組件映射到特定狀態（稱為絕對命名）。
• 絕對命名使代碼極度模塊化，允許開發人員在整個應用程序或未來的項目中重用模板。它還簡化了使用 Web 應用程序的不同組件（例如頁眉和頁腳）的方法，從而節省時間和精力。

編寫簡潔、模塊化的代碼是 Web 開發中最重要的概念之一，尤其是在團隊合作開發高度複雜的應用程序時。 Angular 框架旨在創建高級應用程序，這些應用程序可能很快變得非常複雜，這反過來又使得編寫模塊化代碼更加重要。 Angular UI Router 是一個可以極大幫助您實現這一目標的工具，它旨在幫助管理 Web 應用程序的不同狀態。與原生 AngularJS 路由實現相比，它使您可以完全控制其每個視圖。

如果您以前使用過 ui-router，您可能知道如何使用點表示法在父狀態內定義子狀態。但是，您可能不知道 ui-router 庫如何處理嵌套在父狀態內的命名視圖。這就是我今天要解釋的內容。

我將向您展示 ui-router 如何使用絕對名稱來完全控制 Web 應用程序的特定部分在何處顯示。這使您可以輕鬆添加和刪除不同的界面部分，以創建由不同組件組成的模塊化應用程序。具體來說，我將向您展示如何將導航欄、一些正文內容和頁腳映射到特定狀態。一如既往，本教程的代碼可在 GitHub 上找到，您還可以在文章末尾找到演示。

入門

花一點時間瀏覽構成此演示的文件（可在上面的 GitHub 鏈接中找到）。您可以看到我們有一個 index.html 文件，我們在其中包含 AngularJS 以及 ui-router 的庫。在這個文件中，我們還有兩個 ui-view 指令，我們將把我們的內容插入其中。接下來，我們有一個 app.js 文件，其中將包含我們的 Angular 應用程序的代碼，以及一個 templates 目錄。此目錄將用於容納我們所有不同的視圖。雖然此文件夾不是必需的，但在使用 Angular 構建應用程序時，使用某種結構絕對符合您的最佳利益。如您所見，我在 templates 文件夾內包含了一個 assets 文件夾。這就是我喜歡存放可重用組件的地方：頁眉、導航欄、頁腳等。我認為您可能會發現此約定很有用，因為它使您的代碼極度模塊化。

UI-Router

向 ui-router 添加依賴項

讓我們開始配置我們的應用程序。在我們的 app.js 文件中，我們需要向我們的主要 Angular 模塊添加對 ui-router 的依賴項。

angular.module('app', ['ui.router'])

配置我們的路由

完成後，我們可以繼續進行應用程序的配置對象。在這裡，我們將處理 $stateProvider 和 $urlRouterProvider，因此我們需要將它們注入到我們的配置對像中才能使用它們。

接下來，我們要將主頁狀態的 URL 傳遞給 $urlRouterProvider.otherwise()，以便它默認情況下將我們的應用程序映射到此狀態。然後，我們將需要使用 $stateProvider，這將是我們本教程其餘部分要處理的內容。 $stateProvider 是 ui-router 提供給開發人員在路由應用程序時使用的工具。狀態對應於應用程序中整體 UI 和導航方面的“位置”。狀態描述了該位置的 UI 以及它的功能。它的工作方式與 ngRoute 使用 routeProvider 的方式相同。

以下是 app.js 文件此時應有的外觀。配置 urlRouterProvider 後，我們利用 $stateProvider 來定義應用程序的不同狀態。在這個例子中，我們定義了一個名為 home 的狀態，並且只配置了 URL。

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

views 對象

現在您已經設置了基本框架，您需要在 $stateProvider 內定義一個 views 對象。它應該緊跟在 home 狀態的 URL 之後。在這個對像中，我們將定義視圖的名稱以及它們的模板路徑。在這裡，您還可以定義諸如控制器之類的東西；但是，為了本教程的簡潔起見，我忽略了這一點。

接下來，我們必須首先創建一個未命名的視圖，該視圖將指向父狀態——在本例中為 home。此未命名視圖的 templateUrl 將從根本上將兩者聯繫起來。這稱為相對命名，並告訴 Angular 將此未命名視圖插入到我們 index.html 文件中的 <div ui-view=""> 內。您的代碼現在應該複製下面的 app.js。 <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router'])</pre> <p>如您所見，未命名的視圖解析為 main.html，它應該類似於下面的代碼。 </p> <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);</pre> <p>main.html 文件包含三個命名視圖——nav、body 和 footer。為了使這些組件出現在 home 狀態下，我們必須使用絕對命名來定義它們。具體來說，我們必須使用 <code>@ 語法來告訴 AngularJS 應用程序的這些組件應該映射到特定狀態。這遵循 viewName@stateName 語法，並告訴我們的應用程序使用來自絕對或特定狀態的命名視圖。您可以在此處閱讀有關相對名稱與絕對名稱的更多信息。

您將看到在我們的配置對像中使用了 @home，以確保 Angular 知道我們的命名視圖指向我們的 home 狀態。如果不存在這些絕對名稱，應用程序將不知道在哪裡找到這些命名視圖。也就是說，請查看下面並查看應用程序應如何路由。

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': { 
              templateUrl: './templates/main.html' 
            },
          }
        });
     }
   ]);

(此處應插入CodePen演示)

為什麼這很棒

正如我前面所說，絕對命名使您的代碼極度模塊化。在本教程中，我將我們所有的視圖都放在 templates 文件夾中。但是，您可以更進一步，為應用程序的不同視圖創建文件夾。這使您可以在整個應用程序以及未來的項目中重用模板！ ui-router 庫使使用 Web 應用程序的不同組件（例如特定視圖的頁眉和頁腳）變得非常容易。這將使在不同項目中重用代碼更容易，並且肯定可以節省您的時間。

結論

您可以使用絕對名稱進行更複雜、更高級別的嵌套——這只是一個例子！儘管如此，我希望您對 ui-router 能夠實現的一些內容有了更深入的了解。在這篇由 Antonio Morales 撰寫的文章中，他非常出色地解釋了絕對命名與相對命名、子狀態以及 Angular 的 ui-router 庫的其他方面的區別。與往常一樣，如果您對本教程有任何疑問，請告訴我。我很樂意回答它們。

關於使用 Angular UI Router 和命名視圖編寫模塊化代碼的常見問題

什麼是 Angular UI Router，它與標準 Angular Router 有何不同？

Angular UI Router 是 AngularJS 的一個靈活的路由框架，它提供標準 Angular Router 中沒有的功能。它允許嵌套視圖和多個命名視圖，而標準 Angular Router 每個 URL 僅支持一個視圖。這使得 Angular UI Router 成為構建複雜、大型應用程序的強大工具。

如何在我的項目中設置 Angular UI Router？

要設置 Angular UI Router，您首先需要在 HTML 文件中包含 Angular UI Router 腳本。然後，您需要在 AngularJS 應用程序中添加“ui.router”作為模塊依賴項。之後，您可以使用 $stateProvider 配置您的狀態，並使用 $urlRouterProvider 設置默認狀態。

Angular UI Router 中的命名視圖是什麼，如何使用它們？

命名視圖是 Angular UI Router 的一項功能，它允許您為視圖分配名稱。這使您能夠每個 URL 擁有多個視圖，這在復雜的應用程序中非常有用。要使用命名視圖，您需要在 HTML 文件中包含“ui-view”指令並為其分配一個名稱。然後，您可以在狀態配置中引用此名稱。

如何在 Angular UI Router 中在狀態之間導航？

您可以使用 $state.go() 方法在 Angular UI Router 中在狀態之間導航。此方法將狀態的名稱作為參數，並可選地將狀態的參數對像作為參數。您也可以在 HTML 文件中使用 ui-sref 指令來創建指向狀態的鏈接。

如何將參數傳遞給 Angular UI Router 中的狀態？

您可以通過將參數包含在狀態配置中來將參數傳遞給 Angular UI Router 中的狀態。然後，您可以使用 $stateParams 服務在控制器中訪問這些參數。

如何處理 Angular UI Router 中的狀態更改？

您可以使用 $stateChangeStart 和 $stateChangeSuccess 事件處理 Angular UI Router 中的狀態更改。這些事件在 $rootScope 上廣播，可以在您的控制器中監聽。

如何在 Angular UI Router 中激活狀態之前解析數據？

您可以使用狀態配置中的 resolve 屬性在 Angular UI Router 中激活狀態之前解析數據。此屬性是一個對象，用於定義在激活狀態之前需要解析的任何依賴項。

如何處理 Angular UI Router 中的錯誤？

您可以使用 $stateChangeError 事件處理 Angular UI Router 中的錯誤。此事件在 $rootScope 上廣播，可以在您的控制器中監聽。

如何在 Angular UI Router 中使用嵌套視圖？

您可以通過在 HTML 文件中包含“ui-view”指令並為其分配一個名稱來在 Angular UI Router 中使用嵌套視圖。然後，您可以在狀態配置中引用此名稱。

如何在 Angular UI Router 中使用多個命名視圖？

您可以通過在 HTML 文件中包含“ui-view”指令並為其分配不同的名稱來在 Angular UI Router 中使用多個命名視圖。然後，您可以在狀態配置中引用這些名稱。