Regarding $location.search, the docs say,
Return search part (as object) of current url when called without any parameter.
In my url, my query string has a param '?test_user_bLzgB' without a value. Also '$location.search()' returns an object. How do I get the actual text?
This question is related to
javascript
angularjs
Very late answer :( but for someone who is in need, this works Angular js works too :) URLSearchParams Let's have a look at how we can use this new API to get values from the location!
// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?
post=1234&action=edit&active=1"
use this function from instead of URLSearchParams
urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
}
console.log(urlParam('action')); //edit
Angular does not support this kind of query string.
The query part of the URL is supposed to be a &-separated sequence of key-value pairs, thus perfectly interpretable as an object.
There is no API at all to manage query strings that do not represent sets of key-value pairs.
If your $location.search() is not working, then make sure you have the following:
1) html5Mode(true) is configured in app's module config
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
2) <base href="/"> is present in your HTML
<head>
<base href="/">
...
</head>
References:
In my NodeJS example, I have an url "localhost:8080/Lists/list1.html?x1=y" that I want to traverse and acquire values.
In order to work with $location.search() to get x1=y, I have done a few things
my list1.js has
var app = angular.module('NGApp', ['ngRoute']); //dependencies : ngRoute
app.config(function ($locationProvider) { //config your locationProvider
$locationProvider.html5Mode(true).hashPrefix('');
});
app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
//var val = window.location.href.toString().split('=')[1];
var val = $location.search().x1; alert(val);
$scope.xout = function () {
datasvc.out(val)
.then(function (data) {
$scope.x1 = val;
$scope.allMyStuffs = data.all;
});
};
$scope.xout();
});
and my list1.html has
<head>
<base href=".">
</head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>
Guide: https://code.angularjs.org/1.2.23/docs/guide/$location
My fix is more simple, create a factory, and implement as one variable. For example
angular.module('myApp', [])_x000D_
_x000D_
// This a searchCustom factory. Copy the factory and implement in the controller_x000D_
.factory("searchCustom", function($http,$log){ _x000D_
return {_x000D_
valuesParams : function(params){_x000D_
paramsResult = [];_x000D_
params = params.replace('(', '').replace(')','').split("&");_x000D_
_x000D_
for(x in params){_x000D_
paramsKeyTmp = params[x].split("=");_x000D_
_x000D_
// Si el parametro esta disponible anexamos al vector paramResult_x000D_
if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && _x000D_
paramsKeyTmp[1] !== null){ _x000D_
_x000D_
paramsResult.push(params[x]);_x000D_
}_x000D_
}_x000D_
_x000D_
return paramsResult;_x000D_
}_x000D_
}_x000D_
})_x000D_
_x000D_
.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){_x000D_
$ctrl = this;_x000D_
_x000D_
var valueParams = searchCustom.valuesParams($routeParams.value);_x000D_
valueParams = valueParams.join('&');_x000D_
_x000D_
$http({_x000D_
method : "GET",_x000D_
url: webservice+"q?"+valueParams_x000D_
}).then( function successCallback(response){_x000D_
data = response.data;_x000D_
$scope.cantEncontrados = data.length; _x000D_
$scope.dataSearch = data;_x000D_
_x000D_
} , function errorCallback(response){_x000D_
console.log(response.statusText);_x000D_
})_x000D_
_x000D_
})<html>_x000D_
<head>_x000D_
</head>_x000D_
<body ng-app="myApp">_x000D_
<div ng-controller="SearchController">_x000D_
<form action="#" >_x000D_
_x000D_
_x000D_
<input ng-model="param1" _x000D_
placeholder="param1" />_x000D_
_x000D_
<input ng-model="param2" _x000D_
placeholder="param2"/>_x000D_
_x000D_
<!-- Implement in the html code _x000D_
(param1={{param1}}¶m2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params_x000D_
--> _x000D_
<a href="#seach/(param1={{param1}}¶m2={{param2}})">_x000D_
<buttom ng-click="searchData()" >Busqueda</buttom>_x000D_
</a>_x000D_
</form> _x000D_
</div>_x000D_
</body>First make the URL format correct for getting the query string use #?q=string that works for me
http://localhost/codeschool/index.php#?foo=abcd
Inject $location service into the controller
app.controller('MyController', [ '$location', function($location) {
var searchObject = $location.search();
// $location.search(); reutrn object
// searchObject = { foo = 'abcd' };
alert( searchObject.foo );
} ]);
So the out put should be abcd
If you just need to look at the query string as text, you can use: $window.location.search
you can use this as well
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var queryValue = getParameterByName('test_user_bLzgB');
$location.search() returns an object, consisting of the keys as variables and the values as its value.
So: if you write your query string like this:
?user=test_user_bLzgB
You could easily get the text like so:
$location.search().user
If you wish not to use a key, value like ?foo=bar, I suggest using a hash #test_user_bLzgB ,
and calling
$location.hash()
would return 'test_user_bLzgB' which is the data you wish to retrieve.
Additional info:
If you used the query string method and you are getting an empty object with $location.search(), it is probably because Angular is using the hashbang strategy instead of the html5 one... To get it working, add this config to your module
yourModule.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true);
}]);
Source: Stackoverflow.com