Menu
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 :)
############################ ANSWERAfter changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine!
Thank you!
323
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'
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
