AngularJS的动态路由传递参数可以通过几种方式来实现，包括使用$routeParams服务、$location服务、以及通过state配置传递参数。在AngularJS中，使用$routeProvider.when()方法配置路由时，可以在路径中使用冒号(:)定义动态参数。例如，当你配置一个路由为/user/:userId时，userId就作为一个动态参数。在控制器中，你可以通过注入$routeParams服务来获取这个参数的值。此外，你也可以使用$location.search()访问URL中的查询参数。在使用UI-Router时，可以通过$state服务的.go()方法或链接中的ui-sref指令来传递参数，同时在.state()配置中声明参数。
下面我们将详细梳理一下AngularJS在动态路由中传递参数的各种实用方法。
一、使用$routeParams服务传递参数
$routeParams服务允许你在控制器中访问当前路由的参数。当使用ngRoute模块时，你可以在路由模板URL中指定动态段，然后通过控制器注入$routeParams服务来访问这些参数。这种方式简单直观，便于快速存取路由参数。
通过配置路由获取参数
首先，需要在应用的路由配置中定义参数化的路由。假设有一个用户详情页面，路由可以定义如下：
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/user/:userId', {
templateUrl: 'views/user-detAIl.html',
controller: 'UserDetailController'
});
}]);
在上面的配置中，:userId是一个动态参数。在用户详情控制器中，可以通过注入$routeParams服务获取这个参数的值。
从控制器访问参数
在UserDetailController控制器中，可以通过下述方式获取userId参数：
app.controller('UserDetailController', ['$scope', '$routeParams', function($scope, $routeParams) {
var userId = $routeParams.userId; // 获取动态参数userId的值
// 使用userId值执行相关操作...
}]);
二、使用$location服务处理查询参数
除了$routeParams服务外，$location服务也是一种在AngularJS中处理路由参数的方法。通过此服务，你可以获取或设置页面的URL，并读取URL的查询字符串参数。
获取查询字符串参数
$location服务提供了.search()方法，用于获取URL中的查询参数，即?后面的部分。例如，对于URL/search?keyword=AngularJS，可以这样获取keyword参数：
app.controller('SearchController', ['$scope', '$location', function($scope, $location) {
var searchKeyword = $location.search().keyword; // 获取查询参数keyword的值
// 使用searchKeyword值执行相关操作...
}]);
设置查询字符串参数
同时，也可以通过search()方法设置查询参数：
app.controller('SearchController', ['$scope', '$location', function($scope, $location) {
// ...在某些操作后，要改变查询参数
$location.search('keyword', '新的搜索关键词');
// URL会变成：/search?keyword=新的搜索关键词
}]);
三、使用UI-Router的state传递参数
在使用UI-Router时，可以在state配置中声明路由的参数，并在控制器中通过$state服务或者$stateParams服务来获取这些参数。
在state配置中声明参数
假设你正在使用UI-Router并有以下state配置：
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('userDetail', {
url: '/user/:userId',
templateUrl: 'views/user-detail.html',
controller: 'UserDetailController'
});
}]);
控制器中获取state参数
在UserDetailController中，你可以使用$stateParams服务来获取userId参数：
app.controller('UserDetailController', ['$scope', '$stateParams', function($scope, $stateParams) {
var userId = $stateParams.userId; // 获取state参数userId的值
// 使用userId值执行相关操作...
}]);
四、通过UI-Router的ui-sref传递参数
当需要在页面上创建链接并传递参数时，UI-Router提供了ui-sref指令来简化这个过程。这种方式可以在HTML模板中声明路由和其参数。
使用ui-sref创建链接
可以在HTML模板中使用以下语法创建一个链接，并通过ui-sref传递参数：
<a ui-sref="userDetail({ userId: user.id })">查看用户详情</a>
在上面的例子中，假设user.id是要传递的用户ID，点击该链接将会导航到用户详情页并传递相应参数。
通过上述方法，你可以灵活地在AngularJS的动态路由中传递参数，为用户提供丰富的交互体验和功能。对项目的可扩展性和维护性也大有裨益。
相关问答FAQs：
1. 如何在AngularJS项目的动态路由中传递参数？
在AngularJS中，可以通过在路由配置中使用冒号（:）来定义参数。例如，如果你有一个动态路由需要传递用户ID，你可以这样定义路由：/user/:id。然后，你可以在控制器中通过$stateParams对象来获取传递的参数。例如，如果你的路由参数名为id，你可以通过$stateParams.id来获取这个参数的值。
2. 如何在AngularJS中使用查询参数传递参数？
除了使用动态路由来传递参数，你还可以使用查询参数来传递参数。在AngularJS中，可以使用$location对象的search()方法来获取查询参数的值。例如，如果你的URL中有一个查询参数名为user，你可以通过$location.search().user来获取这个参数的值。
3. 如何在AngularJS的动态路由中传递多个参数？
可以在路由配置中定义多个参数。例如，你可以定义一个动态路由：/user/:id/:name，然后在控制器中通过$stateParams来获取这些参数的值。例如，如果你的路由参数名为id和name，你可以分别通过$stateParams.id和$stateParams.name来获取它们的值。注意，URL中的参数顺序需要与路由配置中的定义一致。
