AngularJS路由切换视图，如何实现动态页面加载与配置？

AngularJS作为一款经典的前端框架,其路由功能是实现单页面应用（SPA）视图切换的核心，通过路由，用户可以在不刷新页面的情况下，动态加载不同的视图内容，提升用户体验，本文将详细介绍AngularJS实现路由切换视图的方法，包括路由配置、视图模板加载、参数传递及高级应用等关键环节。

路由模块的引入与配置

AngularJS的路由功能由ngRoute模块提供，使用前需先引入该模块的JS文件，在应用的主模块中，通过angular.module('app', ['ngRoute'])依赖注入ngRoute模块，启用路由功能，路由配置的核心是$routeProvider服务，通过其when()和otherwise()方法定义路由规则。

$routeProvider的when()方法接收两个参数：第一个参数是路由路径（URL），支持变量占位符（如/user/:id）；第二个参数是配置对象，包含template、templateUrl、controller等属性。

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指定视图模板的HTML文件路径，controller关联处理该视图的控制器。otherwise()方法定义默认路由，当访问路径未匹配任何规则时自动跳转。

视图切换的实现机制

视图切换的核心是在HTML页面中设置<ng-view>或<ng-view>指令作为视图容器，当路由匹配成功时，ngRoute模块会自动将templateUrl指定的模板内容插入到<ng-view>中，并初始化对应的控制器。

<div ng-view></div>

若需要多个视图区域（如侧边栏和主内容区），可使用<ng-view>并指定name属性，通过路由配置中的views属性实现多视图嵌套。

路由参数的传递与获取

实际开发中常需通过URL传递参数,如用户ID、商品编码等，AngularJS路由支持两种参数方式：路径参数和查询参数。

路径参数

在路由路径中使用冒号定义变量（如/user/:id），通过$routeParams服务获取。

// 路由配置
.when('/user/:id', {
    templateUrl: 'views/user.html',
    controller: 'UserController'
});
// 控制器中获取参数
app.controller('UserController', ['$routeParams', function($routeParams) {
    var userId = $routeParams.id; // 获取URL中的id值
}]);

查询参数

查询参数以键值对形式出现在URL后（如?name=Angular），同样通过$routeParams获取，例如访问/search?keyword=路由，在控制器中可通过$routeParams.keyword获取值。

路由的高级应用

路由守卫

通过配置resolve属性，可在路由切换前异步加载数据，确保数据准备就绪后再渲染视图。

.when('/product/:id', {
    templateUrl: 'views/product.html',
    controller: 'ProductController',
    resolve: {
        productData: function($route, $http) {
            return $http.get('/api/product/' + $route.current.params.id);
        }
    }
});

控制器中可通过依赖注入productData获取异步加载的数据。

路由事件监听

$rootScope提供路由事件，用于监听路由状态变化：

• $routeChangeStart：路由开始切换时触发
• $routeChangeSuccess：路由切换成功时触发
• $routeChangeError：路由切换失败时触发

  app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        console.log('路由开始切换');
    });
  }]);

路由配置的最佳实践

1. 模块化组织：按功能模块划分路由配置，避免主模块过于臃肿。
2. 模板缓存：启用$templateCache服务缓存模板，减少重复请求。
3. 错误处理：通过otherwise配置404路由，结合$routeChangeError事件统一处理错误。
4. SEO优化：结合AngularJS的<meta>标签或使用Prerender等服务，提升搜索引擎对SPA的抓取效果。

常见问题与解决方案

通过以上方法,可灵活实现AngularJS中的视图切换功能，构建结构清晰、交互流畅的单页面应用，掌握路由的核心原理与高级技巧，是提升AngularJS开发能力的重要环节。