36

我正在使用 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;
        }]
    );
4

5 回答 5

65

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

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

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

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

于 2014-09-17T20:38:37.410 回答
26

我认为路由不适用于查询字符串。而不是url.com?key=value你可以使用更 RESTful URL 像url.com/key/value? Then 你会定义你的路由如下：

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

或许

.when('/albums', ...)
.when('/albums/:album_id', ...)
于 2013-03-01T16:02:23.340 回答
14

您可以查看（文档）中的search方法。它允许您向 URL 添加一些键/值。$location

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

于 2013-12-11T15:09:54.663 回答
2

使用路由参数

var Ctrl = function($scope, $params) {
  if($params.filtered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
};

Ctrl.$inject = ['$scope', '$routeParams'];

http://docs.angularjs.org/api/ng.$ro​​uteParams

于 2013-03-01T11:04:02.837 回答
0

我只能想到 URL 中查询字符串的两个用例：

1）如果您需要控制器中查询字符串的键/值对（例如，打印 Hello {{name}} 并在查询字符串中获取名称，例如 ?name=John），那么正如 Francios 所说，只需使用 $location。搜索，您将获得查询字符串作为对象 ({name:John})，然后您可以通过将其放入范围或其他内容（例如 $scope.name = location.search().name;）来使用它。

如果您需要根据查询字符串中给出的内容重定向到路由器中的另一个页面，例如 (?page=Thatpage.htm) 然后在您的 routerProvider.when() 中创建一个 redirectTo: ，它将接收搜索对象作为其第三个参数。观看以下 EggHead 视频的 2:10： http ://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

基本上，redirectTo:function(routeParams,path, search){return search.page}

于 2014-01-02T17:17:18.410 回答