0

I have question in relation with $location service in AngularJS. I set url when I click at a button :

$location.path('pageNumber='+$scope.page+'&'+'pageSize='+$scope.pageSize);

Now question is how can I write variables from URL, and how can I check If exists variable for example: pageSize

Turqus
  • 117
  • 9

1 Answers1

0

You need to use $location.search() on the controller of the redirected page.

$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:

?pageNumber=5&pageSize=10

Then you can get the value for pageNumber and pageSize like this,

$scope.pageNumber = $location.search().pageNumber;
$scope.pageSize = $location.search().pageSize

And you can now check for existence like this 

if(angular.isDefined($scope.pageNumber)){
  //true if pageNumber exist
}

if(angular.isDefined($scope.pageSize )){
 ////true if pageSize exist
}

One think to consider here is that this will not work with hashbang in Angular. You will get empty value(object) for $location.search(). At this time you need to explicitly define this in your config:

moduleName.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);

OR

If you do not want to use html5Mode since you need a server route for page refresh then you can use the javascript way to get the query string like below:

function getQueryString(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

and inside your controller you need to initialize like this 

$scope.pageNumber = getQueryString('pageNumber');
$scope.pageSize = getQueryString('pageSize');

And you can now check for existence like this 

if(angular.isDefined($scope.pageNumber)){
  //true if pageNumber exist
}

if(angular.isDefined($scope.pageSize )){
 ////true if pageSize exist
}
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • did you set your $locationProvider.html5Mode(true); – Ankit Agarwal Jul 03 '17 at 12:54
  • I correct on: product.config(['$locationProvider', function($locationProvider){ $locationProvider.html5Mode({ enabled: true, requireBase: false }); }]); Now i have problem, why when i click in nav on link url will change but site dont change, only after refresh?? – Turqus Jul 03 '17 at 13:28
  • You need to define a route for all pages in your server so that when the page is refreshed that server route is accessed and return you the path of master page of Angular where you have ng-view (or ui-view) – Ankit Agarwal Jul 03 '17 at 13:31
  • You mean, that I have to create ngRoute?? Because I have don't so far on nodeJS routing – Turqus Jul 03 '17 at 13:33
  • Ok lets go for a javascript solution. Check my updated answer. You can use that. It is a proper solution for query string. – Ankit Agarwal Jul 03 '17 at 13:35
  • let me know if you still need further help. – Ankit Agarwal Jul 03 '17 at 13:37
  • Tell me, if i useing html5Mode why when i change site i must after it refresh site?? – Turqus Jul 03 '17 at 13:39
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148229/discussion-between-aka-and-turqus). – Ankit Agarwal Jul 03 '17 at 13:40
  • Because you need to provide a base path that overrides the existing angular #/ path and the routes which we specify is relative to #/ . Now when you refresh the page the browser directly look for the page without # and there is no such page found as there is no such routes for that page without hash. – Ankit Agarwal Jul 03 '17 at 13:41