Stu*_*uci 7 html javascript structure file angularjs
我目前正在开发一个使用HTML5,CSS,JS和AngularJS的小型教育项目.
问题:在我的index.html文件中加载AngularJS指令
错误代码[1] - 本地浏览器
Error: Access to restricted URI denied
这个问题的一些答案,建议在Web服务器上部署项目.我做到了,错误非常有趣:
错误代码[2] - Webserver
Failed to load resource: the server responded with a status of 404 (Not Found)
文件结构
app/
---- app.js
---- components/
---------- view1/
-------------- fullView.html
-------------- fullViewApp.js
-------------- partialViews/
------------------ partsOfFullView.html
------------------ morePartsOfFullView.html
assets/
---- libs/
---- css/
---- ...
---- ...
index.html
码
的index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>My Example</title>
<!-- CSS -->
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<link href="./assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Libs -->
<script src="./assets/libs/jquery-2.1.1.min.js"></script>
<script src="./assets/libs/angular.min.js"></script>
<script src="./assets/libs/bootstrap.min.js"></script>
<script src="./assets/libs/moment-with-locales.js"></script>
<script src="./assets/libs/bootstrap-datetimepicker.min.js"></script>
<!-- App's modules -->
<script type="text/javascript" src="./app/app.js"></script>
<script type="text/javascript" src="./app/components/view1/fullViewApp.js"></script>
</head>
<body ng-controller="MyAppTranslationCtrl">
<!-- my custom directive -->
<qwe></qwe>
</body>
</html>
app.js
angular.module('MyApp', ['MyApp.View1App'])
.controller('MyAppTranslationCtrl', function($scope) {
console.log('-> MyApp Translation example');
});
fullView.html
<div ng-app="MyApp.View1App" ng-controller="...">
<div ng-controller="...">
<!-- content, other directives, etc... -->
...
...
</div>
</div>
fullViewApp.js
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'fullView.html'
}
});
对不起,很长的帖子,但我试图说清楚,可以理解,更容易找到问题.
毕竟我被困在这个错误上,我无法修复它.
我曾试图移动所有的文件在一个文件夹中,它神奇的作品!但是当我将它们分隔在不同的文件夹中时 = ERROR.我无法启动并运行!
请帮助我:)
############################ ANSWER在改变相对路径以在它们之前有一个完整的限定符后,如下一篇文章中所建议的,一切都很好!
谢谢!
Joe*_*Joe 13
假设这是抛出错误:
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'fullView.html'
}
});
您需要使用完整路径.
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'app/components/view1/fullView.html'
}
});