angularjs - 如何让 AngularJS 使用 ServiceStack FallbackRoute 属性来支持 HTML5 pushstate Urls？

Question

我正在构建一个客户端/服务器解决方案，使用 AngularJS 单页应用程序作为客户端组件，使用 Self-Host ServiceStack RESTful API 作为服务器组件。单个 Visual Studio 控制台应用程序项目包含 AngularJS 组件的 HTML 和 JavaScript 文件，以及用于引导 ServiceStack AppHost 的 C# 类(我已将接口(interface)和服务职责转移到单独的 Visual Studio 项目中)。

我已将所有 HTML 和 JavaScript 文件设置为具有“无”的“构建操作”和“如果较新则复制”的“复制到输出目录”。

只要我准备好忍受在我的网站 URL 中使用“#”，一切都运行良好。我想通过使用 HTML5 pushstate URL 来消除这种情况。

实际上，这意味着每当请求不存在的路由时，我需要说服 ServiceStack 提供我的默认单页应用程序 HTML shell 页面。现在有一个FallbackRoute属性 available in ServiceStack似乎正是为此目的而添加的。

但是，我不确定如何使用它。我发现有人问过类似的问题 here , here和 here .但是给出的答案都是在新的 FallbackRoute 属性到来之前。

本质上，我正在寻找一个简单但完整的示例，说明如何使用 FallbackRoute 属性确保对不存在的路由的任何请求都重定向到单个静态 HTML 页面。

Answer 1

RazorRockstars.Web有一个实现。我将对其进行修改以使用通配符路径和默认 View :

[FallbackRoute("/{Path*}")]
public class Fallback
{
    public string Path { get; set; }
    public string PathInfo { get; set; }
}

public class RockstarsService : Service
{
    [DefaultView("Index")]
    public object Any(Fallback request)
    {
        request.PathInfo = base.Request.PathInfo;
        return request;
    }
    // ...
}

由于这是一项服务，它需要查看页面 ( details here) 而不是内容页面。

在 RockStars 示例中，我无法确定将为 FallBackResponse 呈现什么 View ，但明确设置 View 应该是您所需要的。
[DefaultView("Index")]我添加到 Any 的属性方法将响应映射到 Views/Index.cshtml 文件。 Index.cshtml 文件可以为空，但用于模板声明，单页应用程序的完整标记可以在模板文件中(即 _Layout.cshtml)

不带 Razor

将 html 读入字符串并返回，同时使用属性将内容类型设置为“text/html”，参见 wiki docs on service return types

public class RockstarsService : Service
{
    static string readContents;

    [AddHeader(ContentType = "text/html")]
    public string Any(Fallback request)
    {

        // check timestamp for changes for production use
        if (readContents == '') {
            using (StreamReader streamReader = new StreamReader(pathFromConfigFile, Encoding.UTF8))
            {
                 readContents = streamReader.ReadToEnd();
            }
        }
        return readContents;
    }
    // ...
}