SlideShare a Scribd company logo
How to catch query string in
AngularJs using $Location
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>
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>
Ad

Recommended

Creating a-pagination-with-php
Creating a-pagination-with-php
Rakhitha Ratnayake
 
Add row in asp.net Gridview on button click using C# and vb.net
Add row in asp.net Gridview on button click using C# and vb.net
Vijay Saklani
 
Daily Deals from Buy.com
Daily Deals from Buy.com
drocallaghan
 
Documentation vs test about cucumber but not only for vegetarians
Documentation vs test about cucumber but not only for vegetarians
Mikstura.IT Foundation | Web & Mobile Community
 
Introduction to thymeleaf
Introduction to thymeleaf
NexThoughts Technologies
 
Hunter.io scraper
Hunter.io scraper
Mamoon Ismail Khalid
 
Broadleaf Presents Thymeleaf
Broadleaf Presents Thymeleaf
Broadleaf Commerce
 
Class 10
Class 10
Jiyeon Lee
 
How to validate server certificate
How to validate server certificate
codeandyou forums
 
How to call $scope function from console
How to call $scope function from console
codeandyou forums
 
Understand components in Angular 2
Understand components in Angular 2
codeandyou forums
 
Understand routing in angular 2
Understand routing in angular 2
codeandyou forums
 
How to setup ionic 2
How to setup ionic 2
codeandyou forums
 
MongoDB 3.2.0 Released
MongoDB 3.2.0 Released
codeandyou forums
 
Welcome to ionic 2
Welcome to ionic 2
codeandyou forums
 
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
codeandyou forums
 
How to install ssl certificate from .pem
How to install ssl certificate from .pem
codeandyou forums
 
Protractor end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
 
How routing works in angular js
How routing works in angular js
codeandyou forums
 
How to use proxy server in .net application
How to use proxy server in .net application
codeandyou forums
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular js
codeandyou forums
 
Angular.js interview questions
Angular.js interview questions
codeandyou forums
 
How to set up a proxy server on windows
How to set up a proxy server on windows
codeandyou forums
 
What is $root scope in angularjs
What is $root scope in angularjs
codeandyou forums
 
How to save log4net into database
How to save log4net into database
codeandyou forums
 
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
certivoai
 
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native Barcelona
Imma Valls Bernaus
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 

More Related Content

More from codeandyou forums (17)

How to validate server certificate
How to validate server certificate
codeandyou forums
 
How to call $scope function from console
How to call $scope function from console
codeandyou forums
 
Understand components in Angular 2
Understand components in Angular 2
codeandyou forums
 
Understand routing in angular 2
Understand routing in angular 2
codeandyou forums
 
How to setup ionic 2
How to setup ionic 2
codeandyou forums
 
MongoDB 3.2.0 Released
MongoDB 3.2.0 Released
codeandyou forums
 
Welcome to ionic 2
Welcome to ionic 2
codeandyou forums
 
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
codeandyou forums
 
How to install ssl certificate from .pem
How to install ssl certificate from .pem
codeandyou forums
 
Protractor end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
 
How routing works in angular js
How routing works in angular js
codeandyou forums
 
How to use proxy server in .net application
How to use proxy server in .net application
codeandyou forums
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular js
codeandyou forums
 
Angular.js interview questions
Angular.js interview questions
codeandyou forums
 
How to set up a proxy server on windows
How to set up a proxy server on windows
codeandyou forums
 
What is $root scope in angularjs
What is $root scope in angularjs
codeandyou forums
 
How to save log4net into database
How to save log4net into database
codeandyou forums
 
How to validate server certificate
How to validate server certificate
codeandyou forums
 
How to call $scope function from console
How to call $scope function from console
codeandyou forums
 
Understand components in Angular 2
Understand components in Angular 2
codeandyou forums
 
Understand routing in angular 2
Understand routing in angular 2
codeandyou forums
 
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
What is JSON? Why use JSON? JSON Types? JSON Helpful Tools?
codeandyou forums
 
How to install ssl certificate from .pem
How to install ssl certificate from .pem
codeandyou forums
 
Protractor end-to-end testing framework for angular js
Protractor end-to-end testing framework for angular js
codeandyou forums
 
How routing works in angular js
How routing works in angular js
codeandyou forums
 
How to use proxy server in .net application
How to use proxy server in .net application
codeandyou forums
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular js
codeandyou forums
 
Angular.js interview questions
Angular.js interview questions
codeandyou forums
 
How to set up a proxy server on windows
How to set up a proxy server on windows
codeandyou forums
 
What is $root scope in angularjs
What is $root scope in angularjs
codeandyou forums
 
How to save log4net into database
How to save log4net into database
codeandyou forums
 

Recently uploaded (20)

About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
certivoai
 
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native Barcelona
Imma Valls Bernaus
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Tech Services
 
Zoneranker’s Digital marketing solutions
Zoneranker’s Digital marketing solutions
reenashriee
 
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
soulamaabdoulaye128
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
wAIred_RabobankIgniteSession_12062025.pptx
wAIred_RabobankIgniteSession_12062025.pptx
SimonedeGijt
 
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Natan Silnitsky
 
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
Aarno Aukia
 
Migrating to Azure Cosmos DB the Right Way
Migrating to Azure Cosmos DB the Right Way
Alexander (Alex) Komyagin
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
GDG Douglas - Google AI Agents: Your Next Intern?
GDG Douglas - Google AI Agents: Your Next Intern?
felipeceotto
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
Rierino Commerce Platform - CMS Solution
Rierino Commerce Platform - CMS Solution
Rierino
 
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...
Alluxio, Inc.
 
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
About Certivo | Intelligent Compliance Solutions for Global Regulatory Needs
certivoai
 
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native Barcelona
Imma Valls Bernaus
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
Women in Tech: Marketo Engage User Group - June 2025 - AJO with AWS
BradBedford3
 
Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Underwriting Software Enhancing Accuracy and Efficiency
Insurance Tech Services
 
Zoneranker’s Digital marketing solutions
Zoneranker’s Digital marketing solutions
reenashriee
 
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
Microsoft Business-230T01A-ENU-PowerPoint_01.pptx
soulamaabdoulaye128
 
What is data visualization and how data visualization tool can help.pdf
What is data visualization and how data visualization tool can help.pdf
Varsha Nayak
 
wAIred_RabobankIgniteSession_12062025.pptx
wAIred_RabobankIgniteSession_12062025.pptx
SimonedeGijt
 
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Natan Silnitsky
 
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
DevOps for AI: running LLMs in production with Kubernetes and KubeFlow
Aarno Aukia
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
GDG Douglas - Google AI Agents: Your Next Intern?
GDG Douglas - Google AI Agents: Your Next Intern?
felipeceotto
 
How the US Navy Approaches DevSecOps with Raise 2.0
How the US Navy Approaches DevSecOps with Raise 2.0
Anchore
 
Download Adobe Illustrator Crack free for Windows 2025?
Download Adobe Illustrator Crack free for Windows 2025?
grete1122g
 
Rierino Commerce Platform - CMS Solution
Rierino Commerce Platform - CMS Solution
Rierino
 
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...
Meet You in the Middle: 1000x Performance for Parquet Queries on PB-Scale Dat...
Alluxio, Inc.
 
Ad

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>