AngularJS 中使用 ui-router 实现 SPA 应用中的多级路由-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，单页面应用（Single Page Application，SPA）已经成为了一种越来越流行的开发模式，它不仅可以提高应用的性能和用户体验，还可以更好地实现前后端分离。而在 SPA 中，路由是一个非常重要的概念，它负责将用户的请求映射到相应的页面或组件上。

在 AngularJS 中，我们可以使用 ui-router 这个强大的路由库来实现多级路由。相比于 AngularJS 自带的 ngRoute，ui-router 提供了更加灵活和强大的路由功能，可以实现嵌套路由、命名视图等高级特性。

安装和配置

首先，我们需要在项目中安装 ui-router：

npm install --save angular-ui-router

然后，在 AngularJS 应用中引入 ui-router：

angular.module('myApp', ['ui.router']);

我们还需要定义路由的配置信息，这个配置信息可以放在一个单独的文件中，比如 app.js：

// javascriptcn.com 代码示例
angular.module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    // 默认路由
    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      .state('contact', {
        url: '/contact',
        templateUrl: 'views/contact.html',
        controller: 'ContactController'
      })
      .state('contact.list', {
        url: '/list',
        templateUrl: 'views/contact-list.html',
        controller: 'ContactListController'
      })
      .state('contact.detail', {
        url: '/detail/:id',
        templateUrl: 'views/contact-detail.html',
        controller: 'ContactDetailController'
      });
  });

在上面的代码中，我们定义了几个状态（state），每个状态都有一个 URL、一个模板文件和一个控制器。其中，contact 状态下还定义了两个子状态：contact.list 和 contact.detail。这样，我们就可以实现多级路由了。

实现多级路由

在上面的配置中，我们定义了一个名为 contact 的状态，它有两个子状态：contact.list 和 contact.detail。这两个子状态都是在 contact 状态下定义的，它们的 URL 分别为 /list 和 /detail/:id。

下面，我们来看一下如何实现这两个子状态的路由。首先，我们需要在 contact.html 模板中添加子视图的占位符：

<div ui-view></div>

这个占位符会在路由切换时被 ui-router 替换为相应的子视图。

然后，我们需要定义两个子控制器：ContactListController 和 ContactDetailController。这两个控制器分别对应于 contact.list 和 contact.detail 两个子状态。

angular.module('myApp')
  .controller('ContactListController', function($scope) {
    // TODO
  })
  .controller('ContactDetailController', function($scope, $stateParams) {
    // TODO
  });

在 ContactDetailController 中，我们可以通过 $stateParams 服务获取路由参数。比如，如果 URL 是 /detail/123，那么 $stateParams.id 的值就是 123。

最后，我们需要在路由配置中添加子状态的定义：

// javascriptcn.com 代码示例
$stateProvider
  .state('contact', {
    url: '/contact',
    templateUrl: 'views/contact.html',
    controller: 'ContactController'
  })
  .state('contact.list', {
    url: '/list',
    templateUrl: 'views/contact-list.html',
    controller: 'ContactListController'
  })
  .state('contact.detail', {
    url: '/detail/:id',
    templateUrl: 'views/contact-detail.html',
    controller: 'ContactDetailController'
  });

这样，我们就完成了多级路由的实现。当用户访问 /contact/list 时，ui-router 会先匹配到 contact 状态，然后再匹配到 contact.list 子状态，最终渲染出 contact-list.html 模板，并执行 ContactListController 控制器。

总结

在本文中，我们介绍了如何使用 ui-router 实现 AngularJS 中的多级路由。通过 ui-router，我们可以实现嵌套路由、命名视图等高级特性，从而更好地构建复杂的单页面应用。

如果你想深入了解 ui-router 的更多细节和用法，可以参考官方文档：https://ui-router.github.io/docs/。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6569a0e4d2f5e1655d23088e