Dynamique de la Directive de chargement en utilisant AngularJS - Erreur: l'Accès restreint à des URI refusé

Je suis en train de développer un petit projet éducatif à l'aide de HTML5, CSS, JS et AngularJS.

Problème: le Chargement d'un AngularJS Directive dans mon index.html fichier

Code d'erreur [1] - navigateur Local

Error: Access to restricted URI denied

Quelques réponses à cette question, a proposé de déployer le projet sur un serveur web. Je l'ai fait et l'erreur a été très intéressante:

Code d'erreur [2] - Serveur web

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

Structure du fichier

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

Désolé pour le long post, mais j'ai essayé de la rendre plus claire, plus compréhensible et plus facile à trouver le problème.

Après tout, je suis coincé sur cette erreur et je ne peux pas le faire réparer.

J'ai essayé pour déplacer tous la fichiers dans un dossier et la magie œuvres! Mais quand je séparer dans différents dossiers = ERREUR. Je ne peux pas l'obtenir vers le haut et en cours d'exécution!

Merci de m'aider 🙂

############################ RÉPONSE

Après avoir changer les chemins d'accès relatifs à un plein qualificatif devant eux, comme il est suggéré dans le prochain post, tout était parfait!

Merci!

OriginalL'auteur Stuci | 2014-11-07

  1. 13

    En supposant que c'est jeter de l'erreur:

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

    Vous devez utiliser le chemin d'accès complet.

    angular.module('MyApp.View1App', [])
.directive('qwe', function() {
        return {
            restrict: 'E',
            templateUrl: 'app/components/view1/fullView.html'
        }
    });
    Je vais essayer cela demain et si ça marche, je vais vérifier cela ici!!
    Cela a fonctionné pour moi!

    OriginalL'auteur theJoeBiz