Accessing URL parameters - PHP & Angular JS

Question

So my website is PHP for the backend and AngularJS for the frontend. Weird that I'm finding that I have to use PHP on the frontend to achieve some things like getting URL paramters. Explanation below;

Given the following URLs for example

http://www.test.co.uk/search-menu/1/cinamon-soho
http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100

My Angular code in the same page requires the parameters location, day etc. Right now I'm having to use the line below to pass them to angular

$scope.l = <?php echo json_encode($_GET['location']); ?>;

My questions are;

Is there a way to access these variables using just Angular so I can take PHP out of the equation?
If question 1 is possible, how can I do the same if I then decide to move my Angular code away from that page to a dedicated .js page that I reference using

<script src="http://www.test.co.uk/js/main.js"></script>

FYI

The website was not built from the ground up using AngularJS. Angular was later introduced to the frontend heavy lifting PHP was doing so the website is not a SPA. There's no angular routing in place.

Thanks.

Use the $location.search method. See AngularJS $location API Reference -- search. <br> — georgeawg
– georgeawg, Commented Dec 25, 2015 at 3:34

Seblor · Accepted Answer · 2015-12-25 02:37:09Z

2

I got this code that works fine :

function $_GET(param) {
    var vars = {};
    window.location.href.replace( 
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function( m, key, value ) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );

    if ( param ) {
        return vars[param] ? vars[param] : null;    
    }
    return vars;
}

(source : http://www.creativejuiz.fr/blog/javascript/recuperer-parametres-get-url-javascript)

You can then use it like the PHP $_GET, but with parentheses instead of brackets.

answered Dec 25, 2015 at 2:37

Seblor

7,1771 gold badge30 silver badges48 bronze badges

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

Comments

JosephGarrone · Accepted Answer · 2015-12-25 02:25:03Z

1

I would use a function like below

function fetchGetVariables() {
  var loc = "http://www.test.co.uk/search-restaurant?location=asokoro&day=today&time=1100";
  // var loc = window.location.href; // Use this in actual use
  var result = {};

  var parts = loc.split("?");

  if (parts.length > 0) {
    var params = parts[1].split("&");

    for (var i = 0; i < params.length; i++) {
      var keyValuePair = params[i].split("=");

      var key = keyValuePair[0];
      var value = "";
      if (keyValuePair.length > 0) {
        value = keyValuePair[1];
      } 

      result[key] = value;
    }
  }

  return result;
}

console.log(fetchGetVariables());

This gives the output:

Object {location: "asokoro", day: "today", time: "1100"}

See it at this fiddle.

edited Dec 25, 2015 at 2:25

answered Dec 25, 2015 at 2:19

JosephGarrone

4,1613 gold badges42 silver badges61 bronze badges

1 Comment

moh_abk Over a year ago

How about for a URL like this that has been made pretty http://www.test.co.uk/search-menu/1/cinamon-soho... I need to extract either 1 or cinamon-soho

Richard · Accepted Answer · 2015-12-25 07:06:05Z

0

If you are using angular you can pull the values from the URL with the $routeParams.

https://docs.angularjs.org/api/ngRoute/service/$routeParams#!

answered Dec 25, 2015 at 7:06

Richard

363 bronze badges

Collectives™ on Stack Overflow

Accessing URL parameters - PHP & Angular JS

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related