angularjs - 如何在 Angular route 传递查询字符串？

Question

我正在使用 AngularJS 路由，并尝试了解如何使用查询字符串(例如，url.com?key=value)。 Angular 不理解包含同名相册的键值对的路由:

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
        ['$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
            when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
            otherwise({redirectTo: '/home'});
        }],
        ['$locationProvider', function($locationProvider) {
            $locationProvider.html5Mode = true;
        }]
    );

Answer 1

路由不能使用查询字符串是正确的，但这并不意味着切换路由时不能使用查询字符串在页面之间传递数据!路由参数的明显限制是如果不重新加载页面就无法更新它们。有时这是不需要的，例如在保存新记录之后。原始路由参数是 0(表示新记录)，现在您希望使用通过 ajax 返回的正确 ID 来更新它，以便用户刷新页面时可以看到新保存的记录。无法使用路由参数来做到这一点，但这可以通过使用查询字符串来完成。

secret 是在更改路由时不要包含查询字符串，因为这会导致它与路由模板不匹配。您可以做的是更改路线，然后应用查询字符串参数。基本上

$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...

这里的美妙之处在于 $routeParams 服务将查询字符串值与实际路由参数相同地对待，因此您甚至不必更新代码来以不同的方式处理它们。现在，您可以通过在路由定义中包含 reloadOnSearch: false 来更新参数，而无需重新加载页面。