如何使用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 中使用多个命名视图。然后，您可以在状态配置中引用这些名称。