How to catch query string in AngularJs using $Location

on
 

When we use AngularJs and want pass some value from one page to another page.

We have options to use $Location to catch query string. Today I am showing how to use $Location to catch Query String .

Plnkr - http://plnkr.co/edit/TNX06WFx0n6p1mSLPKfP?p=preview


Following code pass "accountNo" parameter with "1001" value to index1.html. We will catch that parameter into index1.html page.

Note: When you passing query string from one page to another page must use "#?" to pass query string.

Use following format to pass query string .

" #?accountNo=1001"



Index.html

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
   <title>How to catch query string in AngularJs</title>
   <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
</head>
<body ng-app="queryStringApp">
   <div ng-controller="firstCtrl">
      <h3>   Catch query string in AngularJs with $Location   </h3> For pass query string to another page use following format
      <br>
      <br> " #?accountNo=1001"
      <br>
      <br>
      <br> <a href="index1.html#?accountNo=1001"> click here to password query string to another page  </a> </div>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
   <title>How to catch query string in AngularJs</title>
   <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
</head>

<body ng-app="queryStringApp">
   <div ng-controller="firstCtrl">
      <h3>   Catch query string in AngularJs with $Location   </h3> For pass query string to another page use following format
      <br>
      <br> " #?accountNo=1001"
      <br>
      <br>
      <br> <a href="index1.html#?accountNo=1001"> click here to password query string to another page  </a> </div>
</body>

</html>

Index1.html

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
   <title>How to catch query string in AngularJs</title>
   <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
   <script>
      var app = angular.module('queryStringApp', []);
      app.controller('firstCtrl', function($scope, $location) {
         alert("Account Number  is - " + $location.search()['accountNo']);
         $scope.accountNo = $location.search()['accountNo'];
      });
   </script>
</head>
<body ng-app="queryStringApp">
   <div ng-controller="firstCtrl"> Account No - {{accountNo}} </div>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
   <title>How to catch query string in AngularJs</title>
   <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
   <script>
      var app = angular.module('queryStringApp', []);
      app.controller('firstCtrl', function($scope, $location) {
         alert("Account Number  is - " + $location.search()['accountNo']);
         $scope.accountNo = $location.search()['accountNo'];
      });
   </script>
</head>

<body ng-app="queryStringApp">
   <div ng-controller="firstCtrl"> Account No - {{accountNo}} </div>
</body>

</html>

Comments

Post a Comment