cách chuyển chuỗi truy vấn trong các tuyến đường góc?

Question

Tôi đang làm việc với các tuyến đường AngularJS và đang cố gắng xem cách làm việc với các chuỗi truy vấn (ví dụ: url.com?key=value). Góc không hiểu các tuyến đường, trong đó có cặp khóa-giá trị so với cùng tên 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

Tôi không nghĩ rằng các tuyến đường làm việc với truy vấn dây. Thay vì url.com?key=value bạn có thể sử dụng một URL RESTful giống như url.com/key/value? Sau đó, bạn sẽ xác định tuyến đường của bạn như sau:

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

hoặc có thể

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

Answer 2

params tuyến đường sử dụng

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

Answer 3

Bạn có thể nhìn vào các phương pháp search trong $location (docs). Nó cho phép bạn thêm một số khóa/giá trị vào URL. Ví dụ: $location.search({"a":"b"}); sẽ trả lại URL này: http://www.example.com/base/path?a=b.

Answer 4

tôi chỉ có thể nghĩ đến hai usecases cho chuỗi truy vấn trong URL:.

1) Nếu bạn cần các cặp khóa/giá trị của chuỗi truy vấn của bạn trong điều khiển của bạn (ví dụ in Xin chào {{name}} và nhận được tên trong chuỗi truy vấn chẳng hạn như? name = John), khi Francios nói chỉ cần sử dụng $ location.search và bạn sẽ nhận được chuỗi truy vấn dưới dạng đối tượng ({name: John}) mà bạn có thể sử dụng bằng cách đặt nó vào phạm vi hoặc thứ gì đó (ví dụ: $ scope.name = location.search(). name;).

Nếu bạn cần chuyển hướng đến một trang khác trong bộ định tuyến của bạn dựa trên những gì được cung cấp trong chuỗi truy vấn, như (? Page = Thatpage.htm), sau đó tạo chuyển hướngĐến: trong routerProvider.when() và nó sẽ nhận được đối tượng tìm kiếm làm tham số thứ ba của nó. nhìn vào 2:10 của video đầu vỏ trứng sau: http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

về cơ bản, redirectTo: function (routeParams, con đường, tìm kiếm) {return search.page}

Answer 5

Đúng là tuyến đường không làm việc với các chuỗi truy vấn , tuy nhiên điều đó không có nghĩa là bạn không thể sử dụng chuỗi truy vấn để chuyển dữ liệu giữa các trang khi chuyển đổi tuyến đường! Giới hạn rõ ràng với các thông số tuyến đường là chúng không thể được cập nhật mà không cần tải lại trang. Đôi khi điều này là không mong muốn, ví dụ sau khi lưu một bản ghi mới. Tham số tuyến ban đầu là 0 (để biểu thị một bản ghi mới) và bây giờ bạn muốn cập nhật nó với ID chính xác được trả về thông qua ajax để nếu người dùng làm mới trang, họ sẽ thấy bản ghi mới được lưu của họ. Không có cách nào để làm điều này với các tham số tuyến đường, nhưng điều này có thể được thực hiện bằng cách sử dụng chuỗi truy vấn để thay thế.

Bí mật không bao gồm chuỗi truy vấn khi thay đổi tuyến đường, bởi vì điều đó sẽ khiến nó không khớp với mẫu tuyến đường. Những gì bạn có thể làm là thay đổi tuyến đường và sau đó áp dụng các tham số chuỗi truy vấn. Về cơ bản

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

Vẻ đẹp ở đây là dịch vụ $ routeParams coi chuỗi truy vấn có giá trị giống với thông số tuyến đường thực, vì vậy bạn thậm chí sẽ không cập nhật mã để xử lý chúng khác nhau. Bây giờ bạn có thể cập nhật các tham số mà không cần tải lại trang bằng cách bao gồm reloadOnSearch: false trong định nghĩa tuyến đường của bạn.