CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Ibtehaz
Ibtehaz

Reputation: 49

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

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.

Upvotes: 1

Views: 622

Answers (2)

Rohan Kangale
Rohan Kangale

Reputation: 971

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.

Upvotes: 0

Artem Petrosian
Artem Petrosian

Reputation: 2954

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)

Upvotes: 2

Related Questions