Expert Group of programming
Loading...

How to get the url parameters using angularjs

Posted by : Heycode Tech | Posted in : Angularjs | May 14,2016 | 0 comments

Some times while creating an Angular app,we need to get the URL parameter value in our program.
For getting the URL parameter value in Angularjs is a great challenge. Now here we are describing it with example.

In AngularJs library,it have following services method like $location,$routeParams,$stateParams which is used to get the parameter value.

Important Key Information
> If you’re using ngRoute, you can inject $routeParams into your controller.
> If you’re using angular-ui-router, you can inject $stateParams.
>

 html5Mode must be enabled for this to work.

angular.module('myApp', [], function($locationProvider) {
$locationProvider.html5Mode(true);
});

>

 <base> tag must on the head tag.Like
<base href="http://localhost/blog/angularJS/" /> //if anyone is working on subfolder/
<base href="/" />  //specially for root folder i.e mostly website.

Note : In base tag, you will provide the href value i.e website URL .

1: Using the service : $location : –

It is a very easy way to get the parameter value from URL. For this service we will use a function named : $location.search();.See in example
Feature -1
Suppose URL is : http://www.heycodetech.com/#/?param1=’demovalue1’&param2=’demovalue2′
Your controller :

Call the function :var outputJson = $location.search();//get all the result in json

Call the function :var param1 = $location.search().param1;//get value of this parameter

var param2 = $location.search().param2;//get value of this parameter

See in controller :

‘use strict’;
angular.module(‘myApp’)
.controller(‘MainCtrl’, function ($scope,$location) {
//call the parameter json
$outputJson = $location.search();
/*
* Output JSON : result
* {
* param1: ‘demovalue1′,
* param2:’demovalue2’
* }
*
*/
//get all the value one by one
var param1 = $location.search().param1;
var param2 = $location.search().param2;
});

Feature- 2
If you need to add the condition that if parameter is found then run this code then see below
//Condition for not empty parameter :-
if($location.search().param1 && $location.search().param2){
//do your logic
}

Please use it and let me know if you have any questions.

2: Using the RouteProvider and routeParams :

Here,I ‘m explaining these functions with the example.
Your URL will look like :http://www.heycodetech.com/#/viewPage/param1/param2
i : Here is your router file have the code

$routeProvider.when('/viewPage/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl'
});

and here is the code of controller for which you can get this value .
.controller('MyCtrl', ['$scope','$routeParams', function($scope, $routeParams) {
var param1 = $routeParams.param1;
var param1 = $routeParams.param2;
}]);

By using of this controller function,you will received the value of : param1 and param2 .

3: Using the StateProvider and stateParams :

Here,I ‘m explaining these functions with the example.
Your URL will look like :http://www.heycodetech.com/#/viewPage/param1/param2
i : Here is your router file have the code

$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})

Here,I ‘m explaining these functions with the example.
Your URL will look like :http://www.heycodetech.com/#/viewPage/param1/param2
i : Here is your router file have the code
$stateProvider.state('/viewPage/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl'
});

and here is the code of controller for which you can get this value .
.controller('MyCtrl', ['$scope','$routeParams', function($scope,$stateParams, $state) {
var param1 = $state.param1;
var param1 = $state.param2;
}]);

By using of this controller function,you will received the value of : param1 and param2 .

I hope so it will helpful for you and got enjoying with this article .
But if you have any query/suggestion then please let me know via comment form.

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and more Here is the Expert group of programming.