核心要點(diǎn)

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

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

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

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

入門(mén)

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

UI-Router

向 ui-router 添加依賴(lài)項(xiàng)

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

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

配置我們的路由

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

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

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

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

views 對(duì)象

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

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

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

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

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

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

您將看到在我們的配置對(duì)象中使用了 @home，以確保 Angular 知道我們的命名視圖指向我們的 home 狀態(tài)。如果不存在這些絕對(duì)名稱(chēng)，應(yīng)用程序?qū)⒉恢涝谀睦镎业竭@些命名視圖。也就是說(shuō)，請(qǐng)查看下面并查看應(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演示)

為什么這很棒

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

結(jié)論

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

關(guān)于使用 Angular UI Router 和命名視圖編寫(xiě)模塊化代碼的常見(jiàn)問(wèn)題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何處理 Angular UI Router 中的錯(cuò)誤？

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

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

您可以通過(guò)在 HTML 文件中包含“ui-view”指令并為其分配一個(gè)名稱(chēng)來(lái)在 Angular UI Router 中使用嵌套視圖。然后，您可以在狀態(tài)配置中引用此名稱(chēng)。

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

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

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