Как добавить строку запроса в url в AngularJS?

Question

Я новичок в угловых js. У меня есть страница поиска с текстовым полем ввода для поиска customerId, но я хочу добавить функциональность, где я могу искать на основе строки url.

Например, мой URL является:

http://localhost:8080/#/search 

Но мне нужно что-то вроде

http://localhost:8080/#/search?ACC34ff 

http://localhost:8080/#/search?CustomerId, так что я могу искать на основе CUSTOMERID в URL также

Может кто-нибудь сказать как добавить строку запроса?

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider 
    .when('/home', { 
     templateUrl: 'partials/home.html', 
     controller: 'homePageCtrl', 
     reloadOnSearch: true 
    }).when('/features', { 
     templateUrl: 'partials/features.html', 
     controller: 'featuresCtrl', 
     reloadOnSearch: false 
    }).when('/search', { 
     templateUrl: 'partials/search.html', 
     controller: 'searchCtrl', 
     reloadOnSearch: false 
    }).otherwise({ 
     redirectTo: '/home' 
    }); 
}]); 

Контроллер:

appControllers.controller('searchCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout', 
    function($scope, $route, $filter, $http, $location, $window, $timeout) { 

     $scope.searchCustomerFeatures = function() { 

      if($scope.customerId != null) { 

      $http.get('/getCustomerFeatures.do', {params: {'customerId': $scope.customerId}}).success(function (data) { 

       $scope.featuresJson = angular.toJson(data, true); 
       }); 
      } 
     } 
    }]); 

Html:

<li ng-class="{active: isActive('/search')}" style="margin-left: 100px; text-decoration-color: black; font-size: 20px"> 
      <a href="#search" role="tab" data-toggle="tab">Search</a> 
     </li > 

Страница поиска:

Благодаря

Answer 1

Все, что вам нужно, это передать customerId в качестве параметра.

.when('/Search', { 
     templateUrl: function (params) { return 'partials/search?customer=' + params.CustomerId; } 
    }) 

В связи последующих есть также объяснение о том, как передать несколько параметров, в случае, если вам необходимо: https://stackoverflow.com/a/35967896/5988277

Answer 2

Во-первых, я не могу поверить, что вы не получили больше ответов, потому что есть много способов передать и получить переменную по URL-адресу, каждый из которых является небольшим вариантом из двух основных способов.

1. В рамках Строка запроса (согласно вашему запросу)
2. Как Route Параметр (также стоит упомянуть)

Последующие примеры предполагают, что у вас есть ввод текста для идентификатора клиента следующим образом:

<input type="text" ng-model="customerId" /> 

1) Как проходят customerId как часть строки запроса

Append ?cId={{ customerId }} к вашей ссылке следующим образом:

<a href="#search?cId={{ customerId }}" role="tab" data-toggle="tab">Search</a> 

Теперь, когда вы нажимаете на ссылку, вы попадете на URL, такие как:

http://localhost:8080/#/search?cId=ACC34ff 

Затем вы можете выбрать параметр cId в контроллере, используя услугу $location.

app.controller('searchCtrl', function($scope, $location){ 
    var qsCustomerId = $location.search().cId; 
    // Do what you want with qsCustomerId here... 
}); 

2) Как передать customerId как маршрут Параметр

Создать новый маршрут, который задает новый параметр cId маршрута:

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider 
    .when('/search/:cId', { 
     templateUrl: 'partials/search.html', 
     controller: 'searchCtrl', 
     reloadOnSearch: false 
    }) 
}]); 

Append /{{ customerId }} к вашей ссылке следующим образом:

<a href="#search/{{ customerId }}" role="tab" data-toggle="tab">Search</a> 

Теперь, когда вы нажимаете на ссылку, вы попадете в URL, такие как:

http://localhost:8080/#/search/ACC34ff 

Вы можете выбрать cId параметров в контроллере, используя $routeParams службы.

app.controller('searchCtrl', function($scope, $routeParmas){ 
    var rpCustomerId = $routeParmas.cId; 
    // Do what you want with rpCustomerId here... 
});