Home/ Questions/What can I do with the ''uncaught referenceerror: angular is not defined'' error?
Next
Answered
ozellahammes
  • 3
Asked: 2022-08-04T04:02:12+00:00 In:

What can I do with the ”uncaught referenceerror: angular is not defined” error?

  • 3

. Advertisement .

..3..

. Advertisement .

..4..

When I run my code, I encounter the error ”uncaught referenceerror: angular is not defined”.

<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div >
<button my-directive>Click Me!</button>
</div>

<script>
var app = angular.module('myApp',[]);

app.directive('myDirective',function(){

return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};

});
</script>

<h1>{{2+3}}</h1>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

Can someone help me to solve the issue?

Share

1 Answer

  1. Best Answer
    Expert

    The cause: This error appears because at the time your angular code runs, angular does not exist yet. 

    Solution:  Before accessing angular.module, you must have make it available by using

     <script src="lib/angular/angular.js"></script>

     after then you can call angular.module  as the following:

    <html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

<script>
var app = angular.module('myApp',[]);

app.directive('myDirective',function(){

return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};

});
</script>
</head>
<body ng-app="myApp">
<div >
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>

</body>
</html>

     

    • 3

Leave an answer

You must login to add an answer.

Need An Account,