如何在角度路由中传递查询字符串？

Question

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

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更新它,以便在用户刷新页面时,他们会看到新保存的记录.路由参数无法做到这一点,但这可以通过使用查询字符串来实现.

更改路由时,秘密不包括查询字符串,因为这将导致它不匹配路由模板.您可以做的是更改路由,然后应用查询字符串参数.基本上

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

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

Answer 2

我认为路由不适用于查询字符串.而不是url.com?key=value像url.com/key/value? 你那样使用更多的RESTful URL ,你可以按如下方式定义你的路由:

.when('/albums', ...)
.when('/albums/id/:album_id', ...)

或者可能

.when('/albums', ...)
.when('/albums/:album_id', ...)

Answer 3

您可以查看(docs)中的search方法.它允许您向URL添加一些键/值.$location

例如,$location.search({"a":"b"});将返回此网址:http://www.example.com/base/path?a=b.