Angular ui-router：ui-views 与指令

AngularJS

Angular ui-router 是AngularJS的一个插件，它提供了一种灵活的方式来管理应用程序的路由和视图。其中一个重要的特性是ui-views指令，它允许我们在一个页面中同时显示多个视图，并且可以通过路由的切换来动态加载不同的视图内容。

ui-views指令的基本用法

在使用ui-router时，我们可以在HTML模板中使用ui-views指令来定义一个或多个视图的容器。每个ui-views指令都可以通过一个唯一的名称来标识。通过使用这些名称，我们可以在路由配置中指定不同视图对应的模板和控制器。

下面是一个简单的例子，展示了如何使用ui-views指令来定义两个视图的容器：

html
<div ui-view="header"></div>
<div ui-view="content"></div>

在上面的例子中，我们定义了两个视图容器，分别使用了"header"和"content"作为它们的名称。接下来，我们需要在路由配置中为这些视图指定对应的模板和控制器。

路由配置中的视图配置

在使用ui-router时，我们需要在路由配置中指定视图的名称、模板和控制器。下面是一个例子，展示了如何配置路由以及为视图指定模板和控制器：

Javascript
angular.module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        views: {
          'header': {
            templateUrl: 'header.html',
            controller: 'HeaderController'
          },
          'content': {
            templateUrl: 'content.html',
            controller: 'ContentController'
          }
        }
      });
    $urlRouterProvider.otherwise('/');
  });

在上面的代码中，我们使用$stateProvider来配置路由，并使用views属性为每个视图指定模板和控制器。在这个例子中，我们定义了一个名为"home"的状态，它对应的URL是根路径"/"。在这个状态下，我们为"header"视图指定了一个名为"header.html"的模板和对应的控制器"HeaderController"；同时，我们也为"content"视图指定了一个名为"content.html"的模板和对应的控制器"ContentController"。

动态切换视图内容

使用ui-router，我们可以通过切换路由来动态加载不同的视图内容。下面是一个例子，展示了如何通过点击不同的链接来切换视图内容：

html
Home
About
<div ui-view="header"></div>
<div ui-view="content"></div>

在上面的例子中，我们使用ui-sref指令来定义了两个链接，分别对应了两个不同的状态：home和about。当用户点击这些链接时，ui-router会自动切换到对应的状态，并加载相应的视图内容。

通过使用Angular ui-router插件，我们可以方便地管理应用程序的路由和视图。其中，ui-views指令允许我们在一个页面中同时显示多个视图，并且可以通过路由的切换来动态加载不同的视图内容。通过在路由配置中指定视图的名称、模板和控制器，我们可以实现灵活的视图切换。这使得我们能够构建复杂的单页应用程序，并提供良好的用户体验。

案例代码：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <Meta charset="utf-8">
  <title>Angular ui-router Example</title>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular.JS/1.7.9/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-router/1.0.28/angular-ui-router.min.JS"></script>
  <script>
    angular.module('myApp', ['ui.router'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('home', {
            url: '/',
            views: {
              'header': {
                templateUrl: 'header.html',
                controller: 'HeaderController'
              },
              'content': {
                templateUrl: 'content.html',
                controller: 'ContentController'
              }
            }
          });
        $urlRouterProvider.otherwise('/');
      })
      .controller('HeaderController', function($scope) {
        $scope.title = 'Header';
      })
      .controller('ContentController', function($scope) {
        $scope.content = 'Content';
      });
  </script>
</head>
<body>
  Home
  About
  <div ui-view="header"></div>
  <div ui-view="content"></div>
</body>
</html>

在上面的代码中，我们定义了一个名为"myApp"的AngularJS模块，并且通过config方法配置了路由。我们还定义了两个控制器"HeaderController"和"ContentController"，并在模板中显示了它们的内容。

通过这个简单的例子，我们可以看到ui-router的强大之处。它为我们提供了一种灵活的方式来管理应用程序的路由和视图，使我们能够构建出更加复杂和功能丰富的单页应用程序。