【发布时间】：2016-01-05 12:04:10
【问题描述】：
我正在尝试通过文件传输协议（不在任何服务器上）在本地文件上运行基于 angularjs 的应用程序。
我的项目包含 html 文件 顶层的index.html和template文件夹，以及template文件夹中包含的common.html、main.html等其他子html文件。
此应用触发以下错误，Error: [$compile:tpload] Failed to load template: template/common.html (HTTP status: 404),
只有通过文件传输进入时，file:///C:/Webapp/index.html#common/abc。
但是通过http进入时不会发生。
此外，此文件传输访问会在 Chrome、IE 中触发错误，但在 Firefox 中不会。
第二个奇怪的事情是，只有当 url 以 #common/abc 结尾时才会发生这种情况。
触发 tpload 错误的唯一一个 url 就像
file:///C:/Webapp/index.html#common/abc（仅在 index.html 之后使用 #common/~ 的情况，如果最后没有 'abc'，我不会收到错误消息）。
'abc' 函数之类的参数（在我的项目中称为 channelTag）将在我的应用程序中输入，而不是实际文件。
这个项目打算从获取channelTag的urlfile:///C:/Webapp/index.html#common/abc开始，然后流动
其他子网址。
file:///C:/Webapp/index.html#main 或 file:///C:/Webapp/index.html#sub2 等其他网址都可以。那里没有显示错误。
在搜索了一些相关的答案后， 大多数答案都说包括 bootstrap-tpls.js 而不是 bootstrap.js，但是这种方法显示了相同的结果。
附件是下面的html和javascript代码：
index.html：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="EUC-KR">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="{{metaservice.metaViewport()}}" />
<title>BtvWebApp</title>
<link rel="stylesheet" type="text/css" href="css/btv.css">
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lib/script.js"></script>
<script src="js/view/main/mainController.js"></script>
<script src="js/view/commonController.js"></script>
<script src="js/filters/zerofillFilter.js"></script>
<script src="js/config/constants.js"></script>
<script src="js/config/messages.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
common.html 是一个空的 html 文件。
app.js：
var app = angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.constant',
'myApp.messages'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'template/main.html',
controller: 'mainCtrl'
})
// Containing other sub whens...
/////////////////////////////
.otherwise({redirectTo: '/common/:channelTag'});
}]);
commonController.js：
'use strict';
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/common/:channelTag', {
templateUrl: 'template/common.html',
controller: 'commonCtrl'
});
}])
.controller('commonCtrl', ['$scope', '$location', '$http', '$rootScope', '$routeParams', 'commonConstant', 'information', 'Utils', 'MetaService'
, function($scope, $location, $http, $rootScope, $routeParams, commonConstant, information, Utils, MetaService) {
$scope.isDataLoading = true;
var channelTag = $routeParams.channelTag;
if(!Utils.isEmpty(channelTag)){
information.channelTag = channelTag;
}
}])
.service('MetaService', function() {
var metaViewport = '';
return {
set: function(newViewport) {
metaViewport = newViewport;
},
metaViewport: function() { return metaViewport; }
}
});
即使我使用禁用安全性设置了 chrome 选项，通过文件传输协议运行时会出现什么问题？
为什么只有当 url 以 '~#common/abc' 结尾时我才会收到错误消息？
欢迎大家提出建议。
【问题讨论】：
标签： javascript html angularjs twitter-bootstrap angular-ui-bootstrap