引言
AngularJS作为一款流行的前端JavaScript框架，其路由功能为开发者提供了强大的单页面应用（SPA）支持。本文将深入解析AngularJS路由的配置方法，并通过实战案例展示如何在实际项目中应用。
AngularJS路由概述
路由概念
路由（Routing）是AngularJS中用于处理页面导航的一种机制。它允许开发者定义不同的URL路径，并为每个路径指定相应的控制器和视图，从而实现动态的内容加载。
路由优势
单页面应用（SPA）支持
：无需刷新页面即可实现页面跳转，提升用户体验。
模块化设计
：将页面逻辑、控制器、视图分离，便于维护和扩展。
URL映射
：通过URL映射，可以直观地了解应用的结构和功能。
AngularJS路由配置
基本配置
在AngularJS中，可以通过
ngRoute
模块来启用路由功能。以下是一个基本的路由配置示例：
var app = angular.module(‘myApp’, [‘ngRoute’]);

app.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/home’, {
templateUrl: ‘home.html’,
controller: ‘HomeController’
})
.when(‘/about’, {
templateUrl: ‘about.html’,
controller: ‘AboutController’
})
.otherwise({
redirectTo: ‘/home’
});
}]);
路由参数
在实际应用中，我们可能需要传递参数到不同的视图。AngularJS路由支持参数传递，以下是一个示例：
app.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/user/:id’, {
templateUrl: ‘user.html’,
controller: ‘UserController’,
resolve: {
user: function($http, $route) {
return $http.get(‘/api/user/’ + $route.current.params.id);
}
}
});
}]);
路由守卫
路由守卫（Route Guards）用于在路由之前执行一些操作，例如权限验证、数据加载等。以下是一个简单的路由守卫示例：
app.run([‘$rootScope’, ‘$location’, ‘$route’, function($rootScope, $location, $route) {
$rootScope.$on(‘$routeChangeStart’, function(event, next, current) {
if (!next.authenticate) return;

if (!$rootScope.user) {
$location.path(‘/login’);
event.preventDefault();
}
});
}]);
实战案例解析
案例一：商品列表页面
在这个案例中，我们将创建一个商品列表页面，用户可以通过点击商品名称跳转到商品详情页面。
创建
products.html
文件，用于展示商品列表：

{{product.name}}

创建
product.html
文件，用于展示商品详情：

在
app.js
文件中配置路由：
app.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/products’, {
templateUrl: ‘products.html’,
controller: ‘ProductsController’
})
.when(‘/product/:id’, {
templateUrl: ‘product.html’,
controller: ‘ProductController’
});
}]);
在
ProductsController
中获取商品列表：
app.controller(‘ProductsController’, [‘$scope’, ‘$http’, function($scope, $http) {
$http.get(‘/api/products’).then(function(response) {
$scope.products = response.data;
});
}]);
在
ProductController
中获取商品详情：
app.controller(‘ProductController’, [‘$scope’, ‘$http’, ‘$routeParams’, function($scope, $http, $routeParams) {
$http.get(‘/api/product/’ + $routeParams.id).then(function(response) {
$scope.product = response.data;
});
}]);
案例二：用户管理页面
在这个案例中，我们将创建一个用户管理页面，包括用户列表、添加用户、编辑用户等功能。
创建
users.html
文件，用于展示用户列表：

{{user.name}}

创建
user.html
文件，用于展示用户详情：

在
app.js
文件中配置路由：
app.config([‘$routeProvider’, function($routeProvider) {
$routeProvider
.when(‘/users’, {
templateUrl: ‘users.html’,
controller: ‘UsersController’
})
.when(‘/user/:id’, {
templateUrl: ‘user.html’,
controller: ‘UserController’
});
}]);
在
UsersController
中获取用户列表：
app.controller(‘UsersController’, [‘$scope’, ‘$http’, function($scope, $http) {
$http.get(‘/api/users’).then(function(response) {
$scope.users = response.data;
});
}]);
在
UserController
中获取用户详情：
app.controller(‘UserController’, [‘$scope’, ‘$http’, ‘$routeParams’, function($scope, $http, $routeParams) {
$http.get(‘/api/user/’ + $routeParams.id).then(function(response) {
$scope.user = response.data;
});
}]);
总结
本文深入解析了AngularJS路由的配置方法，并通过两个实战案例展示了如何在项目中应用。希望读者通过本文的学习，能够更好地掌握AngularJS路由的使用，提升开发效率。

揭秘AngularJS路由：轻松配置与实战案例解析

{{product.name}}

{{user.name}}