AngularJS relative url routing issue

Question

I have my backend web framework loading my AngularJS app with following URL

http://localhost/New/Alpha/App

I also have it set up so that anything after App will still load the same thing

http://localhost/New/Alpha/App/home
http://localhost/New/Alpha/App/settings
...

I'm trying to make my AngularJS app to work in the way that it would pick up the bit of URL after App and load a controller/template accordingly. I have a problem with routing in my AngularJS app though

var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);

main.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("home", {
        templateUrl: "assets/tpl/home.html",
        controller: "mainController"
    })
    .otherwise({
        redirectTo: "fail"
    });
    $locationProvider.html5Mode(true);
});

main.controller("mainController", function($scope) {
    console.log("home")
});

If I try this URL

http://localhost/New/Alpha/App/home

it changes the URL to

http://localhost/fail

instead of leaving the URL as it is and loading the template/controller. If however I change the config and give it a full relative URL it does work as supposed to

.when("/New/Alpha/App/home", {
    templateUrl: "assets/tpl/home.html",
    controller: "mainController"
})

My problem is, that the part of URL before App - /New/Alpha cannot be hardcoded in. It could be /New/Beta, /New/Gamma, etc.

Is what I want to do possible at all without hardcoding the full relative URL match?

UPDATE Sorry, forgot to mention that the number of URL segments before App can change, as in it could be /New/Beta/App and it also could be /New/Another/Beta/App. I don't suppose something like */App or /New/*/App is possible instead of /New/:placeholder/App?

@Dalorzo This particular URL would be handled by my backend framework, only http://localhost/New/Alpha/App and anything after it loads AngularJS app — Caballero
– Caballero, Commented Apr 16, 2014 at 15:25

Brian Lewis · Accepted Answer · 2014-04-16 15:27:09Z

2

Will this work for you?

var main = angular.module("main", ["ui.bootstrap", "ngRoute"]);

main.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("/New/:greek/App/home", {
        templateUrl: "assets/tpl/home.html",
        controller: "mainController"
    })
    .otherwise({
        redirectTo: "fail"
    });
    $locationProvider.html5Mode(true);
});

main.controller("mainController", function($scope) {
    console.log("home")
});

You could then retrieve the greek with $routeParams.greek from within your controller.

answered Apr 16, 2014 at 15:27

Brian Lewis

5,7191 gold badge23 silver badges28 bronze badges

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

3 Comments

Caballero Over a year ago

Thanks, this looks like the right direction, although I forgot to mention that the number of URL segments before App can change, as in it could be /New/Alpha/App or it could be /New/Another/Something/App. I don't suppose something like this is possible - */App/home?

Dustin Kingen Over a year ago

Angular does not currently support regular expressions in routes, so you will need to specify them manually.

Caballero Over a year ago

@Romoku I see. What about 3rd party then, like github.com/angular-ui/ui-router ?

Michael Kropat · Accepted Answer · 2014-08-29 18:38:36Z

The general solution to this problem is to have the server pass the app URL to your client-side code. In other words, use server-side code to dynamically write the equivalent of the following on the page:

var appUrl = '/New/Alpha/App';

Then setting up the route provider becomes:

main.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when(appUrl + "/home", {
        templateUrl: "/assets/tpl/home.html",
        controller: "mainController"
    })
    .otherwise({
        redirectTo: appUrl + "/fail"
    });
    $locationProvider.html5Mode(true);
});

That way the knowledge of the application base URL lives in one place — server-side (which makes sense as only the server is in a position to truly know, if you think about it).

In your specific case, if the application base URL is implicit in the URL structure, you could calculate the following client-side:

var appUrl = window.location.pathname.match(/^\/New\/.*\/App/);

Needs work, but you get the idea. Then you can set up the route provider exactly as above.

Collectives™ on Stack Overflow

AngularJS relative url routing issue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related