核心要點

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

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

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

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

入門

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

UI-Router

向 ui-router 添加依賴項

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

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

配置我們的路由

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

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

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

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

views 對象

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

接下來，我們必須首先創(chuàng)建一個未命名的視圖，該視圖將指向父狀態(tài)——在本例中為 home。此未命名視圖的 templateUrl 將從根本上將兩者聯(lián)繫起來。這稱為相對命名，並告訴 Angular 將此未命名視圖插入到我們 index.html 文件中的 <div ui-view=""> 內(nèi)。您的代碼現(xiàn)在應(yīng)該複製下面的 app.js。

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

如您所見，未命名的視圖解析為 main.html，它應(yīng)該類似於下面的代碼。

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

main.html 文件包含三個命名視圖——nav、body 和 footer。為了使這些組件出現(xiàn)在 home 狀態(tài)下，我們必須使用絕對命名來定義它們。具體來說，我們必須使用 @ 語法來告訴 AngularJS 應(yīng)用程序的這些組件應(yīng)該映射到特定狀態(tài)。這遵循 viewName@stateName 語法，並告訴我們的應(yīng)用程序使用來自絕對或特定狀態(tài)的命名視圖。您可以在此處閱讀有關(guān)相對名稱與絕對名稱的更多信息。

您將看到在我們的配置對像中使用了 @home，以確保 Angular 知道我們的命名視圖指向我們的 home 狀態(tài)。如果不存在這些絕對名稱，應(yīng)用程序?qū)⒉恢涝谀难e找到這些命名視圖。也就是說，請查看下面並查看應(yīng)用程序應(yīng)如何路由。

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

(此處應(yīng)插入CodePen演示)

為什麼這很棒

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

結(jié)論

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

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

什麼是 Angular UI Router，它與標(biāo)準 Angular Router 有何不同？

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

如何在我的項目中設(shè)置 Angular UI Router？

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

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

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

如何在 Angular UI Router 中在狀態(tài)之間導(dǎo)航？

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

如何將參數(shù)傳遞給 Angular UI Router 中的狀態(tài)？

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

如何處理 Angular UI Router 中的狀態(tài)更改？

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

如何在 Angular UI Router 中激活狀態(tài)之前解析數(shù)據(jù)？

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

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

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

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

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

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

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

以上是如何使用Angular UI-Router編寫模塊化代碼並命名視圖的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！