Dynamic Directive loading using AngularJS - Error: Access to restricted URI denied

问题

I'm currently developing a small educational project using HTML5, CSS, JS and AngularJS.

Problem: Loading of a AngularJS Directive in my index.html file

Error code [1] - Local browser

Error: Access to restricted URI denied

Some answers to this question, suggested to deploy the project on a web server. I did it and the error was very interesting:

Error code [2] - Webserver

Failed to load resource: the server responded with a status of 404 (Not Found)

File structure

app/
---- app.js
---- components/
---------- view1/
-------------- fullView.html
-------------- fullViewApp.js
-------------- partialViews/
------------------ partsOfFullView.html
------------------ morePartsOfFullView.html
assets/
---- libs/
---- css/
---- ...
---- ...
index.html

Code

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

Sorry for the long post, but I tried to make it clear, understandable and easier to find the problem.

After all I am stuck on this error and I can't get it fixed.

I have tried to move all the files in one folder and it magically works! But when I separate them in different folders = ERROR. I can't get it up and running!

Please assist me :)

############################ ANSWER

After changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine!

Thank you!

回答1:

Assuming this is throwing the error:

angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'fullView.html'
        }
    });

You need to use the full path.

angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'app/components/view1/fullView.html'
        }
    });

来源：https://stackoverflow.com/questions/26805093/dynamic-directive-loading-using-angularjs-error-access-to-restricted-uri-deni

标签

javascript

html

angularjs

file

structure