Question

我目前正在使用HTML5，CSS，JS和 AngularJS 开发一个小型教育项目。

问题：在我的index.html文件中加载AngularJS指令

错误代码[1] - 本地浏览器

Error: Access to restricted URI denied

这个问题的一些答案，建议在Web服务器上部署项目。我做到了，错误非常有趣：

错误代码[2] - 网络服务器

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'
        }
    });

对于这篇长篇文章感到抱歉，但我试图说清楚，理解并且更容易找到问题。

毕竟我遇到了这个错误，我无法修复它。

我已尝试在一个文件夹中移动所有文件，并且神奇地工作< / STRONG>！但是当我在不同的文件夹 = 错误中将它们分开时。我无法启动并运行！

请帮助我：）
############################ ANSWER
在改变相对路径以在它们之前有一个完整的限定符后，如下一篇文章中所建议的，一切都很好！

谢谢！

Answer 1

假设这是抛出错误：

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'
        }
    });

使用AngularJS加载动态指令 - 错误：访问受限制的URI被拒绝

1 个答案: