title: AngularJS: Uncaught ReferenceError: angular is not defined app.js:1(anonymous function):
body: <p>I have moved my AngularJS test project into app.js, controllers.js and Services.js. After it my project is not running and not even a single page is being working properly. </p>
  
  <p>i have attached my main source files here along with exception screenshot</p>
  
  <p>index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="ISO-8859-1"&gt;
  
          &lt;!-- bootstrap App.js --&gt;
          &lt;script src="includes/assets/app.js"&gt;&lt;/script&gt;
  
          &lt;script src="includes/angular.js"&gt;&lt;/script&gt;
          &lt;script src="includes/angular-ui-router.js"&gt;&lt;/script&gt;
  
          &lt;script src="includes/ui-bootstrap-0.11.0.js"&gt;&lt;/script&gt;
          &lt;script src="includes/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;
  
  
          &lt;script src="js/CalculatorService.js"&gt;&lt;/script&gt;
          &lt;script src="js/Controller.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="includes/assets/bootstrap.css" /&gt;
          &lt;!-- demo.css is related to model window --&gt;
          &lt;link rel="stylesheet" type="text/css" href="includes/assets/demo.css" /&gt;
  
          &lt;title&gt;AngularJS Tutorial&lt;/title&gt;
          &lt;/head&gt;
  
          &lt;body ng-app="app"&gt;
          &lt;div width="100%"&gt;
          &lt;!-- NAVIGATION --&gt;
          &lt;nav class="navbar navbar-inverse" role="navigation" title="Navigation Bar"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" ui-sref="#"&gt;AngularJS Tutorial&lt;/a&gt;
              &lt;/div&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a ui-sref="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ui-sref="model-window"&gt;Model Window&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ui-sref="simple-form"&gt;Simple Form&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ui-sref="basic-form-validation"&gt;Basic Form validation&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a ui-sref="calculater"&gt;Calculator&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
  
  
          &lt;!-- MAIN CONTENT --&gt;
          &lt;div class="container" width="100%" style='padding-top: 50px'&gt;
  
              &lt;!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== --&gt;
              &lt;div ui-view&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('app', [ 
                           'ui.router', 
                           'ui.bootstrap',
                           'app.controllers',
                           'app.services'
                         ]);
  
  app.config(function($stateProvider, $urlRouterProvider) {
      console.log('in app config...');
      $urlRouterProvider.otherwise('/home');
  
      $stateProvider
                  .state('home', {
                          url : '/home',
                          templateUrl : 'home.html'
                  })
  
                  .state('model-window', {
                          url : '/model-window',
                          templateUrl : 'model-window.html',
                          controller: 'ModalDemoCtrl'
                  })
  
                  .state('simple-form', {
                      url: '/simple-form',
                      templateUrl: 'simple-form.html',
                      controller: 'SimpleFormCtrl'
                  })
  
                  .state('basic-form-validation', {
                          url: '/basic-form-validation',
                          templateUrl: 'basic-form-validation.html',
                          controller: 'BasicFormValidationCtrl'
                  })
  
                  .state('calculater' , {
                      url: '/calculator',
                      templateUrl: 'calculator.html',
                      controller: 'CalculatorCtrl'
  
                  });
  
  }); // closes $app.config()
  
  //let's define the scotch controller that we call up in the about state
  app.controller('ModalDemoCtrl', function($scope, $modal) {
  
      console.log('in app controller...');
       // code for bootstrap angular-ui
      $scope.items = ['item1', 'item2', 'item3'];
  
        $scope.open = function (size) {
  
          var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: ModalInstanceCtrl,
            size: size,
            resolve: {
              items: function () {
                return $scope.items;
              }
            }
          });
  
          modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
          }, function () {
            $log.info('Modal dismissed at: ' + new Date());
          });
        };
      var ModalDemoCtrl = function ($scope, $modal) {
  
  
          };
  
          // Please note that $modalInstance represents a modal window (instance) dependency.
          // It is not the same as the $modal service used above.
  
          var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  
            $scope.items = items;
            $scope.selected = {
              item: $scope.items[0]
            };
  
            $scope.ok = function () {
              $modalInstance.close($scope.selected.item);
            };
  
            $scope.cancel = function () {
              $modalInstance.dismiss('cancel');
            };
          };
  
  });
  
  // Start of a SimpleFormController
  app.controller('SimpleFormCtrl', ['$scope', function($scope) {
      $scope.master = {};
  
      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };
  
      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
        $scope.master = {};
      };
  
      $scope.reset();
    }]); // End of SimpleFormController
  
  app.controller('BasicFormValidationCtrl', ['$scope', function($scope) {
       $scope.master = {};
  
          $scope.update = function(user) {
            $scope.master = angular.copy(user);
          };
  
          $scope.reset = function() {
            $scope.user = angular.copy($scope.master);
          };
  
          $scope.isUnchanged = function(user) {
            return angular.equals(user, $scope.master);
          };
  
          $scope.reset();
  }]);
  </code></pre>
  
  <p><strong>CalculatorService.js</strong></p>
  
  <pre><code>    'use strict';
  
      var app = angular.module('app.services', []);
  
      console.log('in angular-tutorial-app Server...');
  
  
      app.service('MathService', function() {
          this.add = function(a, b) { return a + b };
  
          this.subtract = function(a, b) { return a - b };
  
          this.multiply = function(a, b) { return a * b };
  
          this.divide = function(a, b) { return a / b };
      });
  
      app.service('CalculatorService', function(MathService){
  
          this.square = function(a) { return MathService.multiply(a,a); };
          this.cube = function(a) { return MathService.multiply(a, MathService.multiply(a,a)); };
  
      });
  </code></pre>
  
  <p><strong>Controller.js</strong></p>
  
  <pre><code>'use strict';
  
  var app = angular.module('app.controllers', ['$scope', '$http', 'CalculatorService']);
  
  app.controller('CalculatorCtrl', function($scope, $http, CalculatorService){
  
              console.log('in CalculatorCtrl...');
              doSquare = function($scope, CalculatorService) {
                  $scope.answer = CalculatorService.square($scope.number);
              }
  
              doCube = function($scope, CalculatorService) {
                  $scope.answer = CalculatorService.cube($scope.number);
              }
  
          });
  </code></pre>
  
  <p><strong>Detail Exception when application runs on server:</strong></p>
  
  <pre><code>![screen shot of error and resultant page][1]
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/5DFTB.jpg" alt="enter image description here"></p>
  
  <p>calculator.html</p>
  
  <pre><code>&lt;div ng-controller="CalculatorCtrl"&gt;
          Enter a number:
          &lt;input type="number" ng-model="number" /&gt;
          &lt;button ng-click="doSquare()"&gt;X&lt;sup&gt;2&lt;/sup&gt;&lt;/button&gt;
          &lt;button ng-click="doCube()"&gt;X&lt;sup&gt;3&lt;/sup&gt;&lt;/button&gt;
  
          &lt;div&gt;Answer: {{answer}}&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>