June 14, 2016

AngularJs get Url Parameters

AngularJs get Url Parameters : While working with AngularJs we often need to get the url params. To get we need to import dependency ngRoute. You also need to enable html5mode to disable the hashbang urls. Here in this tutorial we are going to explain how you can get url parameter in angularjs, controller, view.

AngularJs get Url Parameters Syntax & Example

Steps to get the Url parameters are as –

Step 1 – Include ngRoute Dependency

Fist Include ngRoute Dependency –

AngularJs get Url Parameters Example:

angular.module('mygApp', ['ngRoute'])

Step 2 – Enable html5Mode

Now Enable html5mode to disable the hashbang(#) urls-

AngularJs get Url Parameters Example:

angular.module('mygApp', ['ngRoute'])
    .config(function ($locationProvider) {
        // enable HTML5mode to disable # urls
        $locationProvider.html5Mode(true);
    })

Step – Get Params

Suppose you have url something like this and you want to access the parameters name and id. //myApp.com/front/:name/:id

Now you can get the parameters as below –

AngularJs get Url Parameters In Controller:

<script>
 // suppose your url is something like this - 
 //myApp.com/front/:name/:id

 angular.module('mygApp', ['ngRoute'])
    .config(function ($locationProvider) {
        // enable HTML5mode to disable # urls
        $locationProvider.html5Mode(true);
    })
	.controller("myController", function($routeParams) {
		alert("Name = "+$routeParams.name+" id "+$routeParams.id);
});
</script>

Thus you can use this method to get url params easily.

Note : Set $locationProvider.html5Mode(true) to enable html5Mode otherwise it will use the hashbang(#) urls.

AngularJs get Url Parameters