AngularJS相对url路由问题

AngularJS relative url routing issue

本文关键字：问题 路由 url 相对 AngularJS      更新时间：2023-09-26

我让我的后端web框架用以下URL 加载我的AngularJS应用程序

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

如果我尝试这个URL

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

它将URL更改为

http://localhost/fail

而不是保持URL原样并加载模板/控制器。然而，如果我更改配置并给它一个完整的相对URL，它确实可以像一样工作

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

我的问题是，在App-/New/Alpha之前的URL部分不能硬编码。它可能是/New/Beta、/New/Gamma等。

我想做的事情在不硬编码完整的相对URL匹配的情况下是可能的吗？

UPDATE抱歉，忘记了提到App之前的URL段数可以更改，因为它可能是/New/Beta/App，也可能是/New/Another/Beta/App。我不认为像*/App或/New/*/App这样的东西代替/New/:placeholder/App是可能的吗？

这对你有用吗？

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检索希腊语。

这个问题的一般解决方案是让服务器将应用程序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/);

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

相关文章：