MEANJS Get URL Parameters

Question

I'm running my app on localhost:3000/#!/, and trying to get URL parameters for use with Express, with no luck. I've created a new server routing file that contains the following:

admin.server.routes.js

'use strict';

module.exports = function(app) {
    // Admin Routes
    var admin = require('../../app/controllers/admin.server.controller');

    // Both of these routes work fine.
    app.route('/admin/test').
        get(admin.populate).
        put(admin.update);

    // First attempt, didn't work.
    app.route('/admin/test').get(admin.doSomething);

    // Second attempt, didn't work.
    app.param('foo', admin.doSomething);

    // Third attempt, didn't work.
    app.param('foo', function(req, res) {
        console.log('Found foo!');
        return res.status(400).send();
    });

};

On my admin page, my admin.client.controller.js sends an $http.get request on loading to populate the data. I have a form with a button the sends an $http.put request to update the populated values. Both of these requests work fine.

The problem is when I try to visit my app using a URL with the foo parameter, like so: http://localhost:3000/#!/admin/test?foo=bar. I've tried each of the three attempts noted above in my code (commenting out the others out so I could try them one by one), but cannot seem to get the variable.

In my admin.server.controller file, in addition to the populate and update functions, I simply have this code:

admin.server.controller

exports.doSomething = function(req, res) {
    console.log('Server - found foo!');
};

Using none of these efforts have I actually been able to demonstrate that I've successfully "grabbed" foo for server-side use. What am I missing?

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

In your

http://localhost:3000/#!/admin/test?foo=bar

all hashbang urls are handled by angularjs, this /admin/test?foo=bar wouldn't be considered as a request. To add a query string in your request, you can do it like this in angularjs resource:

 function ($resource) {
     $resource('/admin/test').query({foo: 'bar'});
 }

This would be expressed as this http://localhost:3000/admin/test?foo=bar

Your issue relies mostly on how you send your request on your client-side.

By the way, in your express routes you can get the foo value like this: Pre-routing with querystrings with Express in Node JS

If you wanted to get the query string and use it in your request, refer to this: How can I get query string values in JavaScript?

edited May 23 '17 at 12:05

Community

1
1

answered Dec 10 '14 at 16:15

Carlo Gonzales

365
2
9

Thanks for the response, Carlo. I didn't realize that Angular would prevent Node/Express from grabbing the parameters in the string. I changed my request URL to just localhost:3000/admin/test?foo=bar and it worked correctly without changing anything else (I got the server message as expected). I really appreciate the insight! – aikorei Dec 10 '14 at 16:26
Also, just to close out on this, once my doSomething function was called, I was able to grab the parameter values using: `var q = req.query; console.log('Query values are: '); console.dir(q);` or directly using `var foo = req.query.foo; console.log('Foo value is '); console.dir(foo);` – aikorei Dec 10 '14 at 16:58

score 1 · Answer 2 · edited Oct 07 '21 at 11:19

A URL is in the form <protocol>://<hostname>?<query string>#<fragment>.

Any part of a URL after (and including) the first # is considered a fragment. Fragments are only used on the client (in this case the browser), and are not typically used by the server.

From section 3.5 of RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax:

Fragment identifiers have a special role in information retrieval systems as the primary form of client-side indirect referencing, allowing an author to specifically identify aspects of an existing resource that are only indirectly provided by the resource owner. As such, the fragment identifier is not used in the scheme-specific processing of a URI; instead, the fragment identifier is separated from the rest of the URI prior to a dereference, and thus the identifying information within the fragment itself is dereferenced solely by the user agent, regardless of the URI scheme.

Traditionally fragments are used to link to anchors on the same page. A good example is the link provided above to the RFC page, which will jump you down to the section 3.5. Fragment automatically in your browser.

The URL to the section is https://www.rfc-editor.org/rfc/rfc3986#section-3.5, so the fragment is section-3.5. In the HTML for the page there is an anchor within the <h3> denoting the section with:

<a class="selflink" name="section-3.5" href="#section-3.5">3.5</a>

The interesting property here is name, which names the anchor, allowing the browser to identify and jump to it because it matches the value requested by the fragment. In effect, the anchor is a client side 'secondary resource' that is being requested by the URI.

Client side javascript applications and frameworks such as angularjs take advantage of fragments; the fact that they are not for use on the server; and the fact they are included in the browser history stack; as a way to reference resources on the client side, for example to use a client side routing system.

(Aside: #! has risen as a popular idiom for denoting routes in client side applications. This is possibly related (grammatically but not technically) to the #! header used in *nix based executable scripts. These are typically followed by a path to an interpreter for the script. For example #!/bin/bash.)

So in the URI http://localhost:3000/#!/admin/test?foo=bar, the segment ?foo=bar is after the # denoting the fragment, and is therefore being defined as part of the fragment rather than the query string. A query string for a remote resource should always be defined before the fragment. For example:

http://localhost:3000/admin/test?foo=bar#!/route/in/angularjs

MEANJS Get URL Parameters

2 Answers2

Linked