How to catch query string in angular js
Download as DOCX, PDF0 likes383 views
This document discusses how to use $Location in AngularJS to catch query strings when passing values between pages. It explains that query strings must use "#?" and provides an example of passing the parameter "accountNo=1001" from index.html to index1.html. Index1.html then uses $location.search() to catch the "accountNo" parameter and display it on the page.
![Index1.html
<!DOCTYPE html>
<html>
<head>
<title>Howto catch query stringin AngularJs</title>
<linkrel="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("AccountNumber 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>](https://image.slidesharecdn.com/howtocatchquerystringinangularjs-150916092917-lva1-app6892/85/How-to-catch-query-string-in-angular-js-3-320.jpg)
How to catch query string in angular js
- 1. How to catch query string in AngularJs using $Location
- 2. Whenwe use AngularJsandwant passsome value fromone page to anotherpage. We have optionstouse $Location to catch querystring.TodayI am showinghow touse $Location to catch QueryString. Plnkr - http://plnkr.co/edit/TNX06WFx0n6p1mSLPKfP?p=preview Followingcode pass"accountNo"paramerterwith "1001" value toindex1.html.We will catchthat parameterintoindex1.htmlpage. Note:Whenyoupassingquerystringfromone page to anotherpage must use "#?" to passquerystring. Use followingformattopassquerystring. " #?accountNo=1001" Index.html <!DOCTYPE html> <html> <head> <title>Howto catch query stringin AngularJs</title> <linkrel="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 inAngularJs with $Location </h3> For pass query string to another page use followingformat <br><br> " #?accountNo=1001" <br> <br> <br> <a href="index1.html#?accountNo=1001">click here to password querystring to anotherpage </a> </div> </body> </html>
- 3. Index1.html <!DOCTYPE html> <html> <head> <title>Howto catch query stringin AngularJs</title> <linkrel="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("AccountNumber 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>