Reading URL parameters in AngularJS - A simple way?

Question

New to Angular here. I come from a PHP and ASP background, where the way we read parameters is like this:

<html>
<head>
    <script type="text/javascript">
        var foo = <?php echo $_GET['foo']; ?>;
        var bar = <?php echo $_GET['bar']; ?>;

        $(document).ready(function() {
            alert('Foo is: ' + foo + ' and bar is: ' + bar);
        });
    </script>
<head>

(It's not complete code, but you get the idea -- very simple)

I've never done "client-side" query parsing before. What is the correct method? I've posted a question in the past, but I'm not getting any answers. Google searching is not helping either.

My URL is typically is in the form of: example.com?foo=123&bar=456

Is the above syntax not supported these days? Should I be doing something like: example.com/foo/123/bar/345 instead?

I'm willing to change my URL structure for something that works cleanly with Angular, but need to be pointed in the right direction. For example, I've heard of ngRoute, but I have no idea where to even start. Is this the correct approach?

I've posted a question in the past, but didn't get much help, so I'm re-posting this with more information so that it's more clear.

Thanks for any pointers.

Edit - using $location

Note, I've tried using $location, but I this has been unsuccessful for me. See code below:

angular.module('myApp')
    .controller('MyController', ['$location', MyController]);

function MyController($location) {
    var params = $location.search();

    alert('foo is: ' + params.foo + ' and bar is: ' + params.bar);
}

Note: I've read something about setting $locationProvider.html5Mode(true) in order to get this style of query parsing to work; however, I've been unsuccessful with this too.

Use $routeParams docs.angularjs.org/api/ngRoute/service/$routeParams — Johan
– Johan, Commented Sep 30, 2015 at 13:41
@Johan this requires a reference to ngRoute and the OP never said that they are using ngRoute. — David L
– David L, Commented Sep 30, 2015 at 13:46

David L · Accepted Answer · 2015-09-30 13:50:59Z

8

You can inject the $location service if you are using html5 mode.

Because you are using URLs without a base root (such as a ! or a #), you need to explicitly add a <base> tag that defines the "root" of your application OR you can configure $locationProvider to not require a base tag.

HTML:

<head>
  <base href="/">
  ...
</head>
<body>
    <div ng-controller="ParamsCtrl as vm">
        ...
    </div>
</body>

JS:

app.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);

    // or

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });    
}]);

app.controller("TestCtrl", ['$location', function($location) {
    var params = $location.search();
    alert('Foo is: ' + params.foo + ' and bar is: ' + params.bar);
});

It is worth noting that you can add a router library such as ngRoute, ui-router or the new, unfinished component router. These routers rely on a base route off of a symbol (! or #) and define everything after the symbol as a client-side route which gets controlled by the router. This will allow your Angular app to function as a Single Page App and will give you access to $routeParams or the ui-router equivalent.

edited Sep 30, 2015 at 13:50

answered Sep 30, 2015 at 13:34

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricky Over a year ago

WORKS LIKE A CHARM! THANK YOU! @DavidL. I've been scratching my head over this for too long! So this is the URL structure that I've always accustom to. However, I feel that this is not the "angular" way of doing things and that it's primarily here for compatibility. Do you have any comments on this?

David L Over a year ago

Glad it worked! My personal preference is to use a router library of some sort. I've used ngRoute with plenty of success, using # for backwards compatibility. If you do something along those lines, You will no longer need to do these base/locationprovider backwards compatibility hacks, including no longer needing html5Mode.

Arpit Goyal · Accepted Answer · 2015-09-30 13:38:30Z

1

You can use $location.search().

var parameters = $location.search();

console.log(parameters);
-> object{
    foo: foovalue,
    bar: barvalue
   }

SO these values will be accessible with parameters.foo and parameters.bar

answered Sep 30, 2015 at 13:38

Arpit Goyal

1,00512 silver badges25 bronze badges

Collectives™ on Stack Overflow

Reading URL parameters in AngularJS - A simple way?

Edit - using $location

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit - using $location

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related