带有 AngularJS 及其 RouteProvider 的纯本地单页应用程序

Question

我目前正在尝试构建一个在闪存驱动器上运行的“网络应用程序”，因此不可能有任何其他环境需要启动带有一些启动选项的 chrome 和指向 index.html 文件的路径闪存驱动器。

当使用 file:// 协议而不是通过 Web 服务器加载文件时，我无法让 angularJS 正常运行。

我已经通过将 html5 模式设置为 true 来加载本地资源（如视频），但我目前无法使用路由提供程序。

这是我所拥有的： var testApp = angular.module("testApp", ['angular-underscore', "ngRoute", "com.2fdevs.videogular"]);

testApp.config(function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
  $routeProvider.when('/', {template: '/views/MainView.html', controller: "VideoPlayerController" })
.otherwise({redirectTo:'/'});;
});

每当我通过双击文件在 Chrome 中加载我的 index.html 文件时，URL 都会以“file://”开头。当我使用 essential 选项“--allow-file-access-from-files”通过命令行启动时也会发生这种情况。

如何让 routeProvider 按预期使用 file://？除非我将以下内容添加到 index.html 中的 head 标记中，否则它目前甚至无法识别“其他”路线

<base href="/index.html">

但结果是

file:///

在 Chrome 的 URL 字段中。所有其他资源都无法加载。 下面是我在一个控制器组合中看到的错误示例。

GET file:///index.html net::ERR_FILE_NOT_FOUND 

非常感谢！ （我知道如果我愿意使用网络服务器，我所有的问题都会消失，但我目前不允许参与这个项目）

Answer 1

您可以通过使用动态的base 标签来让 Angular 方面的工作发挥作用：

<script>document.write('<base href="' + document.location + '" />');</script>

正如 Plunkr 所做的那样。然后，您可以从模板的路径中删除第一个 / 以使它们相对于基础，并且 Angular 会尝试从正确的位置获取模板。但是，您会遇到浏览器安全限制，至少在 Chrome 中，它将 Ajax 请求视为跨域，即使来自 file:// 也是如此。

除非对浏览器安全设置进行任何更改，否则解决方案是将模板直接写入（或使用一些 Grunt 类型的构建过程来构建）到 JS 中，这样 Angular 就不必发出任何 Ajax 请求。例如

app.run(function($templateCache) {
  $templateCache.put('views/MainView.html', 'In the MainView partial <strong>{{message}}</strong>');
});

我还发现 HTML5 路由似乎不适用于 file://，因此必须禁用它。

我已经构建了一个simple plunkr that shows this，下载后也可以使用，至少在带有 Chrome 的 Mac 上。我还制作了一个slightly more complicated plunkr，它表明您可以在下载到文件时在#/ #/inner 等路线之间导航。