Uncaught ReferenceError: angular is not defined - AngularJS not working
Solution 1
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular
does not exist yet. This is an error (see your dev tools console).
In this line:
var app = angular.module(`
you are attempting to access a variable called angular
. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.
<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>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
For completeness, it is true that your directive is similar to the already existing directive ng-click
, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.
Solution 2
Use the ng-click
directive:
<button my-directive ng-click="alertFn()">Click Me!</button>
// In <script>:
app.directive('myDirective' function() {
return function(scope, element, attrs) {
scope.alertFn = function() { alert('click'); };
};
};
Note that you don't need my-directive
in this example, you just need something to bind alertFn
on the current scope.
Update:
You also want the angular libraries loaded before your <script>
block.
Solution 3
Just to complement m59's correct answer, here is a working jsfiddle:
<body ng-app='myApp'>
<div>
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
Calgar99
Updated on June 11, 2020Comments
-
Calgar99 almost 4 years
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one below.The result I am looking for is for the button click to cause an alert. However, there is no response to the button click. Does anybody have any ideas?
<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>
-
jkinkead over 10 yearsAnd what @m59 said - you need the angular libraries first. :)
-
zszep over 10 years@m59. Besides what you stay, he still has to add the ng-app directive to initialize angularjs. See my js-fiddle code below
-
m59 over 10 years@ŽeljkoSzep huh? He has the
ng-app
directive already. It's in the first line of his code. -
zszep over 10 years@m59. What a blunder. I copied only the body part from his code into js-fiddle as it already includes the html tag, so I missed the line with the ng-app directive. Sorry. I deleted my answer.
-
zszep almost 9 yearsSeems the guys from jsfiddle deleted my code snippet,