Angular 1 - get current URL parameters

javascript angularjs ngroute
sarunast picture sarunast · Dec 18, 2013 · Viewed 129k times · Source

I want to extract data from current URL and use it in controller. For example I have this url:

app.dev/backend/surveys/2

Bits that I want to extract:

app.dev/backend/ :type / :id

Is there anything in Angular that could help me with this task ?

Answer

sarunast picture sarunast · Mar 28, 2014

To get parameters from URL with ngRoute . It means that you will need to include angular-route.js in your application as a dependency. More information how to do this on official ngRoute documentation.

The solution for the question:

// You need to add 'ngRoute' as a dependency in your app
angular.module('ngApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        // configure the routing rules here
        $routeProvider.when('/backend/:type/:id', {
            controller: 'PagesCtrl'
        });

        // enable HTML5mode to disable hashbang urls
        $locationProvider.html5Mode(true);
    })
    .controller('PagesCtrl', function ($routeParams) {
        console.log($routeParams.id, $routeParams.type);
    });

If you don't enable the $locationProvider.html5Mode(true);. Urls will use hashbang(/#/).

More information about routing can be found on official angular $route API documentation.

Side note: This question is answering how to achieve this using ng-Route however I would recommend using the ui-Router for routing. It is more flexible, offers more functionality, the documentations is great and it is considered the best routing library for angular.

Related questions

AngularJS : How do I switch views from a controller function?

I am trying to use the ng-click feature of AngularJS to switch views. How would I go about doing this with the code below? index.html <div ng-controller="Cntrl"> <div ng-click="someFunction()"> click me <div&…

Read More
Angular routes contain #! in the url instead of #

Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #. For example, www.webiste.com/#/login becomes www.website.com/#!/login I have to enable the …

Read More
Angular js - check if current url matches the route (with dynamic url params)

i'm simply doing setting this: app.config(['$routeProvider',function($routeProvider) { $routeProvider .when('/asd/:id/:slug',{ templateUrl:'views/home/index.html', controller:'Home', publicAccess:true, sessionAccess:true }); :id and :slug are dynamic params. Now i would like to check …

Read More