AngularJS入门教程中，路由与多视图如何实现多页面切换？

AngularJS作为一款经典的前端框架，其强大的路由与多视图功能为构建单页面应用（SPA）提供了核心支持，本文将详细解析AngularJS路由的核心概念、配置方法及多视图的实现技巧,帮助开发者快速上手这一重要特性。

路由基础概念与ngRoute模块

AngularJS路由通过ngRoute模块实现，该模块允许根据URL变化动态加载不同的视图和控制器，其核心思想是将URL映射到特定的模板和控制器,实现页面内容的无刷新切换。

在使用前需先引入ngRoute模块：

var app = angular.module('myApp', ['ngRoute']);

路由配置核心方法

$routeProvider是路由配置的核心服务，通过when和otherwise方法定义路由规则,基本配置结构如下：

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/home'
    });
}]);

关键配置参数说明：
| 参数 | 类型 | 说明 |
|——|——|——|
| templateUrl | String | 指定视图模板的URL路径 |
| controller | String/Function | 关联的控制器名称或定义函数 |
| controllerAs | String | 控制器别名，便于模板访问 |
| resolve | Object | 预加载数据，路由切换前完成 |
| redirectTo | String/Function | 重定向地址 |

多视图布局实现

通过在模板中使用<ng-view>指令，可以实现多视图的动态加载,基础布局模板如下：

<div class="app-container">
  <nav>
    <a href="#/home">首页</a>
    <a href="#/about">lt;/a>
  </nav>
  <div class="main-content">
    <ng-view></ng-view>
  </div>
</div>

进阶：嵌套路由与多视图区域

对于复杂应用,可使用嵌套路由实现多区域视图切换。

.when('/user/:id', {
  templateUrl: 'views/user.html',
  controller: 'UserController',
  children: [
    {
      path: 'profile',
      template: '<user-profile></user-profile>'
    },
    {
      path: 'settings',
      template: '<user-settings></user-settings>'
    }
  ]
})

在user.html中定义多个视图区域：

<div class="user-layout">
  <div class="sidebar">
    <ng-view name="sidebar"></ng-view>
  </div>
  <div class="main">
    <ng-view name="main"></ng-view>
  </div>
</div>

路由参数与数据传递

URL参数

通过冒号定义动态参数：

.when('/product/:categoryId/:productId', {
  controller: 'ProductController',
  template: '<div>产品ID: {{productId}}</div>'
})

在控制器中通过$routeParams获取参数：

app.controller('ProductController', ['$routeParams', function($routeParams) {
  var categoryId = $routeParams.categoryId;
  var productId = $routeParams.productId;
}]);

resolve预加载

通过resolve属性在路由切换前异步加载数据：

.when('/dashboard', {
  templateUrl: 'views/dashboard.html',
  controller: 'DashboardController',
  resolve: {
    user: function(UserService) {
      return UserService.getCurrentUser();
    },
    stats: function(StatsService) {
      return StatsService.getStats();
    }
  }
})

控制器中直接注入已解析的数据：

app.controller('DashboardController', ['user', 'stats', function(user, stats) {
  // 直接使用user和stats数据
}]);

路由事件与高级功能

AngularJS路由提供了丰富的事件钩子,便于在路由生命周期中执行特定操作：

示例事件监听：

app.run(['$rootScope', '$location', function($rootScope, $location) {
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (!next.access.requiresAuth) {
      $location.path('/login');
    }
  });
}]);

最佳实践与注意事项

1. 模块化设计：将路由配置单独提取到config.js文件中
2. 懒加载优化：结合ocLazyLoad等插件实现按需加载
3. SEO优化：对于需要SEO的场景，考虑使用angular-seo或服务器端渲染
4. 错误处理：配置otherwise路由统一处理404错误
5. 版本兼容：注意不同AngularJS版本中API的差异

通过合理运用AngularJS的路由与多视图功能，开发者可以构建出结构清晰、用户体验良好的单页面应用，掌握路由参数传递、嵌套路由和生命周期事件等高级特性,将进一步提升应用的灵活性和可维护性。