ngRoute 动态 url 作为路径的第一部分

Question

我想在我的网站中创建动态 URL。我在前端使用 Angular 和 ngRoute。我基本上想要这个网址：

mysite.com/home

mysite.com/about

mysite.com/（电台名称）/ - 这是我创建的每个电台的页面

但是当我访问像 whateverUrl 这样的电台页面时，我得到了错误：

无法获取 /whateverUrl/

我尝试创建类似 /station/whateverURL 的路线并且成功了！但我希望 URL 尽可能短。

我的代码如下：

angular.module("app").config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    var apiVersion = "/api/v2/";

    $routeProvider.when("/", {
        templateUrl: "/static/app/view/home.html",
        controller: "HomeController",
        resolve: {
            userData: function(commonService) {
                return commonService.get(apiVersion + "users/");
            }
        }
    }).when("/home/", {
        templateUrl: "/static/app/view/home.html",
        controller: "HomeController",
        resolve: {
            userData: function(commonService) {
                return commonService.get(apiVersion + "users/");
            }
        }
    }).when("/about/", {
         templateUrl: "/static/app/view/about.html"
    }).when("/:stationId/", {
        templateUrl: "/static/app/view/station.html",
        controller: "StationController",
        resolve: {
            stationData: function(commonService, $route) {
                return commonService.get(apiVersion + "stations/" + $route.current.params.stationId + "/");
        }
    });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

Answer 1

这里的问题与您的前端无关，而是与后端有关。

Angular 将在服务器发送文件并由浏览器处理后启动，但现在当您在 /whateverUrl/ 请求资源时，您的服务器不知道如何处理它并以 404 和标准 404 响应消息。

根据您发布的错误：

Cannot GET /whateverUrl/

我想我可以假设您在后端有一个 Node/Express 服务器。

你只需要添加一个为你所有的 url 提供 index.html 的中间件。

var express = require('express');
var app = express();

app
    .route('/*')
    .get(function (req, res) {
        res.sendFile("index.html")
    });

基于下面的 cmets，后端服务器是基于 django 的，并且需要一些修复的 imo。我没有删除答案，但显然我发布的内容并不能解决问题。