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

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

路由模块的引入与配置

要使用AngularJS的路由功能,首先需要引入ngRoute模块，并在应用中进行依赖载入，在HTML文件中，通过<script>标签引入AngularJS核心文件和angular-route.js文件后，在主模块中载入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应用中的页面跳转功能，构建结构清晰、交互流畅的单页应用，实际开发中，还需结合项目需求优化路由配置，确保代码的可维护性和扩展性。