In this article I will explain with an example, how to read QueryString parameters in AngularJS.
There is no direct function or utility available to read QueryString parameter values in AngularJS.
This article will illustrate how to parse the URL of the page and then extract the QueryString parameter values using JavaScript and AngularJS.
 
 
Redirecting with QueryString parameters using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The AngularJS app HTML DIV consists of an HTML TextBox, a DropDownList and a Button.
The Button has been assigned ng-click directive. When the Button is clicked, the Send function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
When the Send Button is clicked, the values of the TextBox and DropDownList are fetched and are encoded using the JavaScript encodeURIComponent function and added as QueryString parameters to a URL.
Finally, the page is redirected to the URL.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $window) {
        $scope.Name = "Mudassar Khan";
        $scope.Technology = "ASP.Net";
        $scope.Send = function () {
            var url = "Page2.htm?name=" + encodeURIComponent($scope.Name) + "&technology=" + encodeURIComponent($scope.Technology);
            $window.location.href = url;
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    Name:
    <input type="text" ng-model = "Name"/><br />
    <br />
    Technology:
    <select ng-model = "Technology">
        <option value="ASP.Net">ASP.Net</option>
        <option value="PHP">PHP</option>
        <option value="JSP">JSP</option>
    </select>
    <input type="button" value="Send" ng-click="Send()" />
</div>
 
 
Reading QueryString parameters using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The ng-controller uses $sce (Strict Contextual Escaping) service which is used to mark the HTML as trusted using the trustAsHtml method.
Note: Unless the HTML content is trusted using the $sce service, it will not be displayed using ng-bind-html directive.
 
The AngularJS app HTML DIV consists of an HTML SPAN specified with ng-bind-html directive, which will be used to display HTML content.
Inside the AngularJS Controller, the QueryString is extracted by splitting the URL of the current page using the Question mark (?) character.
Then a loop is executed and each QueryString parameter value is extracted by further splitting using the ampersand (&) character and the extracted values are decoded using the JavaScript decodeURIComponent function inserted as Key and Value pairs into an Array.
Finally, the QueryString parameter values are fetched from the Array using the name of the QueryString parameter i.e. the Key and displayed in HTML SPAN.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $window, $sce) {
        var queryString = new Array();
        if ($window.location.search.split('?').length > 1) {
            var params = $window.location.search.split('?')[1].split('&');
            for (var i = 0; i < params.length; i++) {
                var key = params[i].split('=')[0];
                var value = decodeURIComponent(params[i].split('=')[1]);
                queryString[key] = value;
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $scope.Data = $sce.trustAsHtml(data);
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <span ng-bind-html = "Data"></span>
</div>
 
 
Screenshot
Read QueryString parameters in AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code