I want to use AngularJS directives, but they just don’t turn on, I don’t know what to do, HTML

<!DOCTYPE html> <html ng-app="mainModule"> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body ng-controller="mainCtrl"> {{a}} </body> </html>

Javascript (app.js):

  (function(){ angular.module("mainModule", []) .controller("mainCtrl", function($scope){ $scope.a = "Hi!"; }) .directive("Template", function(){ return{ restrict:"E", templateUrl:"template.html" }; }); })();

template.html:

 <div> Hello World </div>

When using my tag, <template></template> turns red and swears for an error. Other Angular features work, if you remove .directive(...) , if you .directive(...) , then neither the module nor the controller works. Everything lies in one folder, no subfolders.

PS I experimented with the code as soon as I start using .directive whole AngularJS stops working.

Output console.log ("directive"):

 directive angular.min1.js:79 XMLHttpRequest cannot load file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/template.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min1.js:79 angular.min1.js:93 Error: [$compile:tpload] http://errors.angularjs.org/1.2.29/$compile/tpload?p0=template.html at Error (native) at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:6:450 at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:61:425 at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:73:70 at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at w (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:102:167) at file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:103:428 at h.$eval (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:114:32) at h.$digest (file:///home/dimonluk/NetBeansProjects/HTML5Application/public_html/angular.min1.js:111:117)(anonymous function) @ angular.min1.js:93
  • Explain to me, is it normal that the scripts are connected in the header? - Mr. Black
  • It is normal that the scripts in the title - Dima Lukashov
  • Template => template ? - Qwertiy ♦
  • Such a change did not help either - Dima Lukashov
  • And where do you <template> </ template> output? Add console.log ('directive'); in the directive code before return and see whether it works or not. - fedornabilkin

2 answers 2

Use a local server. For example, http-server .
(This is due to the Same origin policy )

  • Thanks, already tried. Works - Dima Lukashov
  • one
    @Dima, Can you accept this answer then? (Tick under the response rating) - wop_wops

By simply opening the html file, you can see the file:/// protocol in the address bar, which indicates that no server is used.

Angulyar downloads templates using a regular AJAX request that works only on the http , https protocols, and since in this case the other protocol throws an error.

To solve, you can use the server, as advised in the next answer, or to register the template not in a separate file, but in the same one.

 (function() { angular.module("mainModule", []) .controller("mainCtrl", function($scope) { $scope.a = "Hi!"; }) .directive("customTemplate", function() { return { restrict: "E", templateUrl: "template.html" }; }); })(); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="mainModule"> <div ng-controller="mainCtrl"> {{a}} <custom-template></custom-template> </div> <script id="template.html" type="text/ng-template"> <div> Hello World! I'm template. </div> </script> </div>