Cách nhận thông số url bằng AngularJS

Mã nguồn HTML

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

Mã nguồn AngularJS

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

Ở đây các biến locvà loc1cả hai trả về kiểm tra là kết quả cho URL ở trên. Đây có phải là cách chính xác?

Tôi biết đây là một câu hỏi cũ, nhưng tôi phải mất một thời gian để sắp xếp câu hỏi này với tài liệu Angular thưa thớt. Các RouteProvider và routeParams là con đường để đi. Tuyến kết nối URL tới Trình điều khiển / Chế độ xem của bạn và tuyến đường có thể được chuyển vào bộ điều khiển.

Kiểm tra dự án hạt giống Angular . Trong app.js, bạn sẽ tìm thấy một ví dụ cho nhà cung cấp tuyến đường. Để sử dụng params chỉ cần nối chúng như thế này:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

Sau đó, trong bộ điều khiển của bạn tiêm $ routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

Với phương pháp này, bạn có thể sử dụng thông số có url như: " http://www.example.com/view1/param1/param2 "

Mặc dù định tuyến thực sự là một giải pháp tốt để phân tích cú pháp URL cấp ứng dụng, bạn có thể muốn sử dụng $locationdịch vụ cấp thấp hơn , như được đưa vào dịch vụ hoặc bộ điều khiển của riêng bạn:

var paramValue = $location.search().myParam; 

Cú pháp đơn giản này sẽ làm việc cho http://example.com/path?myParam=paramValue. Tuy nhiên, chỉ khi bạn định cấu hình $locationProviderở chế độ HTML 5 trước:

$locationProvider.html5Mode(true);

Nếu không có một cái nhìn tại http://example.com/#!/path?myParam=someValue "Hashbang" cú pháp đó là phức tạp hơn một chút, nhưng có lợi ích của làm việc trên các trình duyệt cũ (không phải là HTML 5 tương thích) như tốt.

Nếu bạn đang sử dụng ngRoute, bạn có thể đưa $routeParamsvào bộ điều khiển của mình

http://docs.angularjs.org/api/ngRoute/service/$routeParams

Nếu bạn đang sử dụng bộ định tuyến góc, bạn có thể tiêm $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

Tôi đã tìm giải pháp cách sử dụng $ location.search () để lấy tham số từ URL

đầu tiên trong URL bạn cần đặt cú pháp "#" trước tham số như ví dụ này

"http://www.example.com/page#?key=value"

và sau đó trong bộ điều khiển của bạn, bạn đặt $ location vào hàm và sử dụng $ location.search () để lấy tham số URL cho

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);

Nếu các câu trả lời đã được đăng không giúp ích, người ta có thể thử với $ location.search (). MyParam; với các URL http: //example.domain#? myParam = paramValue

function GetURLParameter(parameter) {
        var url;
        var search;
        var parsed;
        var count;
        var loop;
        var searchPhrase;
        url = window.location.href;
        search = url.indexOf("?");
        if (search < 0) {
            return "";
        }
        searchPhrase = parameter + "=";
        parsed = url.substr(search+1).split("&");
        count = parsed.length;
        for(loop=0;loop<count;loop++) {
            if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
                return decodeURI(parsed[loop].substr(searchPhrase.length));
            }
        }
        return "";
    }

Cách đơn giản và dễ dàng để có được giá trị url

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"

Khi sử dụng angularjs với express

Trong ví dụ của tôi, tôi đã sử dụng angularjs với express thực hiện định tuyến, vì vậy sử dụng $ routeParams sẽ gây rối với định tuyến của tôi. Tôi đã sử dụng mã sau đây để có được những gì tôi đang mong đợi:

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

Điều này nhận được một mẫu URL và đường dẫn của vị trí đã cho. Tôi chỉ gọi nó bằng:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path()); 

Đặt tất cả lại với nhau bộ điều khiển của tôi là:

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

Kết quả sẽ là:

{ table: "users", id: "1", place_id: "43", interval: "week" }

Hy vọng điều này sẽ giúp ai đó ngoài kia!