Custom Directive not working in AngularJS error: $injector:modulerr

Question

I was working with jQuery and html and then I found that I have to write the nav bar code for each pages. So I decided to add a custom directive in the file. I have worked with angularJS a long time ago and I was only in basic. Some help would really be appreciating. Thank you.

html file:

<html ng-app="navModule">
<head>
    <link rel="stylesheet" type="text/css" href="css/front.css">
    <script src="js/angular.min.js"></script>
    <script src="js/customDirective.js"></script>
</head>

<body>
<!--    Custom Directive-->
    <div>
        <nav-bar> 
        </nav-bar >
      </div>
<!--  Custom Directive       -->
</body>
</html>

AngularJS code:

(function(){

navModule = angular.module("navModule", []);


navModule.directive("navBar", function() {
 return {
    restrict: 'E',
    templateUrl: "custom/navBar.html"
 };
});


})();

and navBar.html code:

<h2> This is navigation bar </h2>
<h5> this is navigation bar </h5>

and the errors are:

XMLHttpRequest cannot load file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/navBar.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min.js:87
angular.min.js:102 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/navBar.html'.
at Error (native)
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:87:37
at n (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:82:442)
at f (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:80:174)
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:112:113
at n.$eval (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:15)
at n.$digest (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:123:106)
at n.$apply (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:293)
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:479
at Object.e [as invoke] (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:36:315)(anonymous function) @ angular.min.js:102

 angular.min.js:102 Error: [$compile:tpload] http://errors.angularjs.org/1.3.15/$compile/tpload?p0=navBar.html
at Error (native)
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:6:417
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:137:25
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:112:113
at n.$eval (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:15)
at n.$digest (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:123:106)
at n.$apply (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:126:293)
at file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:479
at Object.e [as invoke] (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:36:315)
at d (file:///C:/Users/Ibtehaz/OneDrive/3%20people/HandyUncle/js/angular.min.js:17:400)(anonymous function) @ angular.min.js:102

I know its a simple mistake, I am missing something. Thanks in advance.

is your Angualar JS included in your HTML? I don't see it included anywhere — Andrei CACIO, Apr 26 '15 at 10:31
See the second line in your error, it says that it was unable to fetch the html file. Check if the path specified is correct. Also, chrome normally doesnot allow referencing of files. Try the html in firefox, if that loads. Or use some static server like apache — Kop4lyf, Apr 26 '15 at 12:56

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

Seems like your are using wrong syntax, try following:

<nav-bar></nav-bar>

The next issue occurs because your are trying to load template w/o running local web server. This problem is well described here:

XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless)

edited May 23 '17 at 12:14

Community

1
1

answered Apr 26 '15 at 10:47

Artem Petrosian

2,964
1
22
30

score 0 · Answer 2 · answered Apr 26 '15 at 13:04

0

Make sure that you are using a local server in order to run your application, as the XMLHttpRequest denotes that your application is making an asynchronous call.

Just try deploying your application on a local server(you can use apache tomcat). Else you don't have one, use can make use of any IDE that's having its own local server(like brackets), so will not require to create/install a local server manually.

answered Apr 26 '15 at 13:04

Rohan Kangale

931
4
11
29

I have a local server. I am using XAMPP. I am also using bracket. – Ibtehaz Apr 28 '15 at 03:42
Try to run your code from brackets only. No need to have a separate server. – Rohan Kangale Apr 29 '15 at 05:46

Custom Directive not working in AngularJS error: $injector:modulerr

2 Answers2