[英]Pure Local Single-Page App With AngularJS and its RouteProvider
I'm currently trying to build a "web app" that runs off a flash drive, thus there can't be any other environment requires that launching chrome with some launch options and a path to the index.html file on the flash drive. 我目前正在尝试构建一个运行在闪存驱动器上的“Web应用程序”,因此没有任何其他环境需要启动带有一些启动选项的chrome以及闪存驱动器上index.html文件的路径。
I'm having some trouble getting angularJS to play nicely when loading files with the file:// protocol and not through a web server. 我在使用file://协议加载文件而不是通过Web服务器加载angularJS时遇到了一些麻烦。
I've gotten it to load local resources ( like a video) by setting html5 mode to true but I currently am unable to use the route provider. 我已经通过将html5模式设置为true来加载本地资源(如视频)但我目前无法使用路由提供程序。
Here's what I have: var testApp = angular.module("testApp", ['angular-underscore', "ngRoute", "com.2fdevs.videogular"]); 这就是我所拥有的: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:'/'});;
});
Whenever I load up my index.html file in Chrome by double clicking the file, the url starts with as "file://". 每当我通过双击文件在Chrome中加载我的index.html文件时,网址就会以“file://”开头。 This also happens when I launch via command line with the essential option "--allow-file-access-from-files".
当我通过命令行使用必要选项“--allow-file-access-from-files”启动时,也会发生这种情况。
How do I get the routeProvider to work as intended with file://? 如何通过file://使routeProvider按预期工作? It currently isn't recognizing even the "otherwise" route unless I add the following to my head tag in index.html
除非我将以下内容添加到index.html中的head标签,否则它目前无法识别“其他”路径
<base href="/index.html">
But that ends up with 但最终结果是
file:///
in the URL field of Chrome. 在Chrome的网址字段中。 All other resources fail to load.
所有其他资源都无法加载。 Below is an example of the error I'm seeing with just one controller combo.
下面是一个我只看到一个控制器组合的错误的例子。
GET file:///index.html net::ERR_FILE_NOT_FOUND
Thanks SO! 谢谢! (I know all my problems would disappear if I was willing to use a webserver but I'm not allowed to on this project at the moment)
(我知道如果我愿意使用网络服务器,我的所有问题都会消失,但我现在不允许进入这个项目)
You can get the Angular side of things to work, by using a dynamic base
tag: 通过使用动态
base
标记,您可以获得Angular方面的工作:
<script>document.write('<base href="' + document.location + '" />');</script>
as Plunkr does it. 正如普兰克所做的那样。 You can then remove the first
/
from the path to the templates to make them relative to the base, and Angular attempts to fetch the template from the correct location. 然后,您可以从模板的路径中删除第一个
/
以使它们相对于基础,并且Angular尝试从正确的位置获取模板。 However you then run up against browser security constraints, at least in Chrome, which treat Ajax requests to file://
, even if from file://
, as cross-domain. 然而,您会遇到浏览器安全限制,至少在Chrome中,它将Ajax请求处理为
file://
,即使是从file://
作为跨域。
Barring any changes to the browser security settings, the solution to that is to write (or have some Grunt-type build process to build) the templates right into the JS, so Angular doesn't have to make any Ajax requests. 除非对浏览器安全设置进行任何更改,否则解决方案是将模板编写(或将一些Grunt类型的构建过程构建)模板直接放入JS中,因此Angular不必进行任何Ajax请求。 For example
例如
app.run(function($templateCache) {
$templateCache.put('views/MainView.html', 'In the MainView partial <strong>{{message}}</strong>');
});
I've also found the the HTML5 routing doesn't appear to work with file://
, so that must be disabled. 我还发现HTML5路由似乎不适用于
file://
,因此必须禁用它。
I've constructed a simple plunkr that shows this , that also works when downloaded, at least onto a Mac with Chrome. 我已经构建了一个简单的plunkr来显示这个 ,这个也可以在下载时使用,至少在使用Chrome的Mac上。 I've also made a slightly more complicated plunkr , that shows you can navigate between routes like
#/
<-> #/inner
, when downloaded to a file. 我还制作了一个稍微复杂一点的plunkr ,它表明你可以在下载到文件时在
#/
< - > #/inner
类的路线之间导航。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.