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

Question

我目前正在尝试构建一个运行在闪存驱动器上的"Web应用程序",因此没有任何其他环境需要启动带有一些启动选项的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文件时,网址就会以"file://"开头.当我通过命令行使用基本选项"--allow-file-access-from-files" 启动时,也会发生这种情况.

如何通过file://使routeProvider按预期工作？除非我将以下内容添加到index.html中的head标签,否则它目前无法识别"其他"路径

<base href="/index.html">

但最终结果是

file:///

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

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

谢谢!(我知道如果我愿意使用网络服务器,我的所有问题都会消失,但我现在不允许进入这个项目)

Answer 1

通过使用动态base标记,您可以获得Angular方面的工作:

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

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

除非对浏览器安全设置进行任何更改,否则解决方案是将模板编写(或将一些Grunt类型的构建过程构建)模板直接放入JS中,因此Angular不必进行任何Ajax请求.例如

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

我还发现HTML5路由似乎无法使用file://,因此必须禁用.

我已经构建了一个简单的plunkr来显示这个,这个也可以在下载时使用,至少在使用Chrome的Mac上.我还制作了一个稍微复杂一点的plunkr,它表明你可以在下载到文件时在#/< - >之类的路线之间导航#/inner.