Question

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

使用file：//协议加载文件而不是通过网络服务器加载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：//”开头。当我通过命令行使用 essential 选项“--allow-file-access-from-files”启动时，也会发生这种情况。

如何让routeProvider按照预期的方式使用file：//？除非我在index.html

中添加以下标题，否则它目前无法识别“其他”路线

<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中，它会将对file://的Ajax请求处理为file://，即使是来自app.run(function($templateCache) { $templateCache.put('views/MainView.html', 'In the MainView partial <strong>{{message}}</strong>'); });，也称为跨域。

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

file://

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

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

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

1 个答案: