Question

我的后端Web框架加载了我的AngularJS应用程序，其中包含以下URL

http://localhost/New/Alpha/App

我也设置了它，以便App之后的任何内容仍会加载相同的内容

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

我试图使我的AngularJS应用程序以App之后拾取URL的方式工作，并相应地加载控制器/模板。我的AngularJS应用程序中的路由有问题

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

如果我试试这个网址

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

它将网址更改为

http://localhost/fail

而不是保留原样的URL并加载模板/控制器。但是，如果我更改配置并为其提供完整的相对URL，它确实可以正常工作

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

我的问题是，App - /New/Alpha之前的网址部分无法硬编码。可能是/New/Beta，/New/Gamma等。

在没有硬编码完整相对URL匹配的情况下，我想做什么呢？

更新很抱歉，忘了提及App之前的网址细分可以更改，例如/New/Beta/App，也可能是{{1} }。我不能假设/New/Another/Beta/App或*/App之类的内容可能而不是/New/*/App？

Answer 1

这对你有用吗？

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

然后，您可以从控制器中使用$routeParams.greek检索希腊语。

Answer 2

此问题的一般解决方案是让服务器将应用程序URL传递给客户端代码。换句话说，使用服务器端代码在页面上动态编写以下内容的等效内容：

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

然后设置路由提供者：

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

通过这种方式，应用程序基本URL的知识存在于一个地方 - 服务器端（这是有道理的，因为只有服务器能够真正知道，如果您考虑它）。

在您的特定情况下，如果应用程序基本URL隐含在URL结构中，您可以计算以下客户端：

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

需要工作，但你明白了。然后，您可以完全按照上面的方式设置路由提供程序。

AngularJS相对url路由问题

2 个答案: