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);
  };
}]);

Possible duplicate of [What is the cause for "angular is not defined"](http://stackoverflow.com/questions/18044519/what-is-the-cause-for-angular-is-not-defined) — Sebastian Simon, Apr 13 '16 at 13:52

brk · Accepted Answer · 2016-04-13T13:57:33.573

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

Alex Logan · Answer 2 · 2016-04-13T13:59:46.397

1

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>

edited Apr 13 '16 at 13:59

answered Apr 13 '16 at 13:52

Alex Logan

1,221
3
18
27

score 0 · Answer 3 · answered Apr 13 '16 at 13:45

0

You're running that script before you include Angular itself.

That's not going to work.

answered Apr 13 '16 at 13:45

SLaks

868,454
176
1,908
1,964

so haw can i correct ? i am a beginner at angularjs – Mohamed Ali Benmansour Apr 13 '16 at 13:46
You can't use Angular before running the Angular script file. – SLaks Apr 13 '16 at 13:47

score 0 · Answer 4 · answered Apr 13 '16 at 14:27

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>

Uncaught ReferenceError: angular is not defined (anonymous function)

4 Answers4