Uncaught ReferenceError: angular is not defined (anonymous function)
Question
I am trying to test an example with AngularJS to evaluation expressions but an error is show: 'Uncaught ReferenceError: angular is not defined' (anonymous function) i have two files : index.html and expression.js index.html:
<script src="/home/mohamed/Desktop/AngularJS/expression.js"></script>
<script src="/home/mohamed/Desktop/AngularJS/angular.min.js"></script>
<div ng-controller="ExampleController" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs track by $index">
[ <a href="" ng-click="removeExp($index)">X</a> ]
<code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
expression.js :
angular.module('expressionExample', []).controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
4 answers
solution1
3 ACCPTED 2016-04-13 13:48:09
Make this change
<script src="/home/mohamed/Desktop/AngularJS/angular.min.js"></script>
<script src="/home/mohamed/Desktop/AngularJS/expression.js"></script>
The reason being your expression.js is dependent on angualarjs framework. When you do angular.module it looks for an interface for configuring the modules. Since expression js is loaded prior to angularjs it is not able to find the interface.
This is equally applicable for other library & framework. If your js file has dependency on library like jquery the jquery.js file should be loaded before your custom files
To get rid of such error you can take look at asynchronous module definition(AMD) or CommonJS .Can also explore module loader like webpack
solution2
1 2016-04-13 13:52:05
Scripts you include are loaded in the order that they are included. So you need to include angular.min.js before you include the expression.js file, as that depends on the angular.min.js file.
<script src="/home/mohamed/Desktop/AngularJS/angular.min.js"></script>
<script src="/home/mohamed/Desktop/AngularJS/expression.js"></script>
solution3
0 2016-04-13 13:45:18
You're running that script before you include Angular itself.
That's not going to work.
solution4
0 2016-04-13 14:27:28
The problem is into the file 'index.html'
First: the include of source of 'angularjs.min.js' must be written before the include of 'expression.js'
Then : you should specified the ng-app='expressionExample' ; for exemple into the balise html
This is the correction :
<html ng-app='expressionExample'>
<script src="/home/mohamed/Desktop/AngularJS/angular.min.js"></script>
<script src='/home/mohamed/Desktop/AngularJS/expression.js'></script>
<div ng-controller="ExampleController" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs track by $index">
[ <a href="" ng-click="removeExp($index)">X</a> ]
<code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.