AngularJS relative URL-Routing-Problem

Question

Ich habe mein Backend-Web-Framework, das meine AngularJS-App mit folgender URL lädt

http://localhost/New/Alpha/App

Ich habe es auch so eingerichtet, dass alles nach App immer noch dasselbe lädt

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

Ich versuche, meine AngularJS-App so zu gestalten, dass sie den Teil der URL nach App abholt und entsprechend einen Controller/Template lädt. Ich habe allerdings ein Problem mit der Routenführung in meiner AngularJS-App

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")
});

Wenn ich diese URL versuche

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

ändert sich die URL zu

http://localhost/fail

anstatt die URL wie sie ist zu belassen und das Template/den Controller zu laden. Wenn ich jedoch die Konfiguration ändere und ihr eine vollständige relative URL gebe, funktioniert es wie vorgesehen

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

Mein Problem ist, dass der Teil der URL vor App - /New/Alpha nicht fest codiert sein kann. Es könnte /New/Beta, /New/Gamma, usw. sein.

Ist es überhaupt möglich, das zu tun, ohne den vollständigen relativen URL-Abgleich fest zu codieren?

UPDATE Entschuldigung, ich habe vergessen zu erwähnen, dass sich die Anzahl der URL-Segmente vor App ändern kann, d.h. es könnte /New/Beta/App oder auch /New/Another/Beta/App sein. Ich nehme nicht an, dass so etwas wie */App oder /New/*/App möglich ist, anstelle von /New/:placeholder/App?

Answer 1

Wird das für Sie funktionieren?

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")
});

Sie könnten dann das greek mit $routeParams.greek innerhalb Ihres Controllers abrufen.

Answer 2

Die allgemeine Lösung für dieses Problem besteht darin, dass der Server die App-URL an Ihren Client-Seitigen Code übergibt. Mit anderen Worten, verwenden Sie serverseitigen Code, um das Äquivalent des Folgenden dynamisch auf der Seite zu schreiben:

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

Dann wird die Einrichtung des Routen-Anbieters folgendermaßen:

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

So liegt die Kenntnis des Anwendungsbasis-URLs an einem Ort - serverseitig (was Sinn macht, wenn man bedenkt, dass nur der Server wirklich in der Lage ist, es zu wissen).

---

In Ihrem speziellen Fall, wenn die Anwendungs-Basis-URL implizit in der URL-Struktur enthalten ist, könnten Sie das folgende clientseitig berechnen:

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

Es muss noch bearbeitet werden, aber Sie verstehen die Idee. Dann können Sie den Routen-Anbieter genauso einrichten wie oben beschrieben.