title: Dynamic Directive loading using AngularJS - Error: Access to restricted URI denied
body: <p>I'm currently developing a small educational project using HTML5, CSS, JS and <strong>AngularJS</strong>.</p>
  
  <p><strong>Problem: Loading of a AngularJS Directive in my index.html file</strong></p>
  
  <p>Error code [1] - Local browser</p>
  
  <p><code>Error: Access to restricted URI denied</code></p>
  
  <p>Some answers to this question, suggested to deploy the project on a web server. I did it and the error was very interesting:</p>
  
  <p>Error code [2] - Webserver</p>
  
  <p><code>Failed to load resource: the server responded with a status of 404 (Not Found)</code></p>
  
  <hr>
  
  <p><strong>File structure</strong></p>
  
  <pre><code>app/
  ---- app.js
  ---- components/
  ---------- view1/
  -------------- fullView.html
  -------------- fullViewApp.js
  -------------- partialViews/
  ------------------ partsOfFullView.html
  ------------------ morePartsOfFullView.html
  assets/
  ---- libs/
  ---- css/
  ---- ...
  ---- ...
  index.html
  </code></pre>
  
  <hr>
  
  <p><strong>Code</strong></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My Example&lt;/title&gt;
  
      &lt;!-- CSS --&gt;
      &lt;link href="./assets/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="./assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt;
      &lt;!-- Libs --&gt;
      &lt;script src="./assets/libs/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="./assets/libs/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="./assets/libs/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="./assets/libs/moment-with-locales.js"&gt;&lt;/script&gt;
      &lt;script src="./assets/libs/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
      &lt;!-- App's modules --&gt;
      &lt;script type="text/javascript" src="./app/app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./app/components/view1/fullViewApp.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="MyAppTranslationCtrl"&gt;
      &lt;!-- my custom directive --&gt;
      &lt;qwe&gt;&lt;/qwe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('MyApp', ['MyApp.View1App'])
      .controller('MyAppTranslationCtrl', function($scope) {
          console.log('-&gt; MyApp Translation example');
      });
  </code></pre>
  
  <p><strong>fullView.html</strong></p>
  
  <pre><code>&lt;div ng-app="MyApp.View1App" ng-controller="..."&gt;
      &lt;div ng-controller="..."&gt;
          &lt;!-- content, other directives, etc... --&gt;
          ...
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>fullViewApp.js</strong></p>
  
  <pre><code>angular.module('MyApp.View1App', [])
  .directive('qwe', function() {
          return {
              restrict: 'E',
              templateUrl: 'fullView.html'
          }
      });
  </code></pre>
  
  <hr>
  
  <p><em>Sorry for the long post, but I tried to make it clear, understandable and easier to find the problem.</em></p>
  
  <hr>
  
  <p>After all I am stuck on this error and I can't get it fixed.</p>
  
  <p>I have <strong>tried</strong> to move <strong>all</strong> the <strong>files</strong> in <strong>one folder</strong> and it magically <strong>works</strong>! But when I <strong>separate them</strong> in <strong>different folders</strong> = <strong>ERROR</strong>. I can't get it up and running!</p>
  
  <p><strong>Please assist me :)</strong></p>
  
  ############################ <strong>ANSWER</strong>
  
  <p>After changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine! </p>
  
  <p>Thank you!</p>