如何在角路径中传递querystring ?

I am working with AngularJS routes, and am trying to see how to work with query strings (for example, url.com?key=value). Angular doesn't understand the route which contains key-value pair for the same name albums:

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

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;
        }]
    );

5 个解决方案

#1

I don't think routes work with query strings. Instead of url.com?key=value can you use a more RESTful URL like url.com/key/value? Then you would define your routes as follows:

我认为路由不能与查询字符串一起工作。而不是url.com ?key=value你能使用一个更RESTful的URL吗?然后您将定义您的路线如下:

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

or maybe

或者

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

#2

It is correct that routes do not work with query strings, however that doesn't mean you can't use query strings to pass data between pages when switching routes! The glaring limitation with route parameters is that they can't be updated without reloading the page. Sometimes this isn't desired, for instance after saving a new record. The original route parameter was a 0 (to signify a new record), and now you want to update it with the correct ID returned through ajax so that if the user refreshes the page they see their newly saved record. There is no way to do this with route parameters, but this can be accomplished by using query strings instead.

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

The secret is not to include the query string when changing the route, because that will cause it not to match the route template. What you can do is change the route and then apply the query string parameters. Basically

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

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

The beauty here is that the $routeParams service treats query string values identically to real route parameters, so you won't even have to update your code to handle them differently. Now you can update the parameters without reloading the page by including reloadOnSearch: false in your route definition.

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

#3

You could look at the search method in $location (docs). It allows you to add some keys/values to the URL.

您可以在$location (docs)中查看搜索方法。它允许您向URL添加一些键/值。

For example, $location.search({"a":"b"}); will return this URL: http://www.example.com/base/path?a=b.

例如,$ location.search({“a”:" b " });将返回这个URL: http://www.example.com/base/path?

#4

use route params

使用路由参数

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.$routeParams

routeParams美元http://docs.angularjs.org/api/ng。

#5

I can only think of two usecases for the querystring in URL:

我只能想到URL中的querystring的两个usecases:

1) If you need the key/value pair of your querystring in your controller (eg. to print Hello {{name}} and get the name in querystring such as ?name=John), then as Francios said just use $location.search and you will get the querystring as an object ({name:John}) which you can then use by putting it in scope or something (e.g. $scope.name = location.search().name;).

1)如果在控制器中需要查询字符串的键/值对(如。要打印Hello {{name}并在诸如?name=John这样的querystring中获取名称，那么Francios说只需使用$location。搜索并将querystring作为对象({name:John})，然后将其放入范围或其他东西(例如$scope.name = location.search().name)。

If you need to redirect to another page in your router based on what is given in the querystring, like (?page=Thatpage.htm) then create a redirectTo: in your routerProvider.when() and it will receive the search object as its third parameter. look at 2:10 of the following EggHead Video: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

如果您需要基于查询字符串中提供的内容重定向到路由器中的另一个页面，比如(?page=Thatpage.htm)，那么在routerProvider.when()中创建一个重定向:它将接收搜索对象作为它的第三个参数。请看以下EggHead视频的2:10:http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

basically, redirectTo:function(routeParams,path, search){return search.page}

基本上,redirectTo:函数(routeParams、路径搜索){返回search.page }

#1