AngularJS页面跳转Route实例代码如何配置与使用？

在AngularJS开发中,页面跳转（路由）是构建单页应用（SPA）的核心功能之一，通过路由，我们可以在不刷新整个页面的情况下，实现不同视图之间的切换，提升用户体验，下面将通过实例代码，详细介绍AngularJS路由的配置与使用方法。

路由模块的引入与配置

要使用AngularJS的路由功能,首先需要引入ngRoute模块，并在应用中进行依赖注入，在HTML文件中，通过<script>标签引入AngularJS核心文件和angular-route.js文件后，在主模块中注入ngRoute依赖：

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

通过config方法配置路由规则。$routeProvider是路由服务的核心提供者，用于定义URL与视图模板的映射关系：

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .when('/user/:id', {
            templateUrl: 'views/user.html',
            controller: 'UserController',
            resolve: {
                // 路由守卫，用于预加载数据
                userData: ['$route', '$http', function($route, $http) {
                    return $http.get('/api/user/' + $route.current.params.id);
                }]
            }
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

路由配置参数说明

在上述配置中,when方法用于定义具体的路由规则，其参数说明如下：

视图模板与导航实现

在HTML页面中,需要设置两个关键部分：视图容器和导航链接，视图容器通过ng-view或ng-view指令定义，用于渲染匹配路由的模板内容：

<!-- 主视图容器 -->
<div ng-view></div>
<!-- 或使用ng-controller指令结合模板 -->
<div ng-controller="MainController">
    <div ng-include="currentTemplate"></div>
</div>

导航链接则通过ng-href或ng-link指令实现，确保点击链接时触发路由切换：

<!-- 使用ng-href -->
<a ng-href="#/home">首页</a>
<a ng-href="#/about">关于我们</a>
<a ng-href="#/user/123">用户信息</a>
<!-- 或使用ng-click结合$location服务 -->
<a ng-click="navigateTo('/home')">首页</a>

控制器中的路由处理

在控制器中,可以通过$routeParams服务获取路由参数，并通过$location服务实现编程式导航，在UserController中：

app.controller('UserController', ['$scope', '$routeParams', 'userData', function($scope, $routeParams, userData) {
    // 获取路由参数id
    $scope.userId = $routeParams.id;
    // 使用resolve中预加载的数据
    $scope.user = userData.data;
    // 编程式导航示例
    $scope.goToHome = function() {
        // 方法1：使用$location服务
        $location.path('/home');
        // 方法2：使用$window服务
        // $window.location.href = '#/home';
    };
}]);

高级路由技巧

1. 嵌套路由：通过$routeProvider.when的children属性实现多级路由结构，适用于复杂的页面布局。
2. 路由事件监听：通过$routeChangeStart、$routeChangeSuccess等事件监听路由变化，执行权限验证或数据加载等操作。
3. HTML5 History模式：在config中配置$locationProvider.html5Mode(true)，消除URL中的，需配合服务器端配置支持。

通过以上实例与技巧,可以灵活实现AngularJS应用中的页面跳转功能，构建结构清晰、交互流畅的单页应用，实际开发中，还需结合项目需求优化路由配置，确保代码的可维护性和扩展性。