vicky vicky - 2 months ago 10
AngularJS Question

AngularJS: Uncaught ReferenceError: angular is not defined app.js:1(anonymous function):

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.

i have attached my main source files here along with exception screenshot

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

<!-- bootstrap App.js -->
<script src="includes/assets/app.js"></script>

<script src="includes/angular.js"></script>
<script src="includes/angular-ui-router.js"></script>

<script src="includes/ui-bootstrap-0.11.0.js"></script>
<script src="includes/ui-bootstrap-tpls-0.11.0.js"></script>


<script src="js/CalculatorService.js"></script>
<script src="js/Controller.js"></script>
<script src="js/app.js"></script>

<link rel="stylesheet" type="text/css" href="includes/assets/bootstrap.css" />
<!-- demo.css is related to model window -->
<link rel="stylesheet" type="text/css" href="includes/assets/demo.css" />

<title>AngularJS Tutorial</title>
</head>

<body ng-app="app">
<div width="100%">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation" title="Navigation Bar">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularJS Tutorial</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="model-window">Model Window</a></li>
<li><a ui-sref="simple-form">Simple Form</a></li>
<li><a ui-sref="basic-form-validation">Basic Form validation</a></li>
<li><a ui-sref="calculater">Calculator</a>
</ul>
</nav>
</div>


<!-- MAIN CONTENT -->
<div class="container" width="100%" style='padding-top: 50px'>

<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>

</div>
</html>


app.js

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


CalculatorService.js

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

});


Controller.js

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

});


Detail Exception when application runs on server:

![screen shot of error and resultant page][1]


enter image description here

calculator.html

<div ng-controller="CalculatorCtrl">
Enter a number:
<input type="number" ng-model="number" />
<button ng-click="doSquare()">X<sup>2</sup></button>
<button ng-click="doCube()">X<sup>3</sup></button>

<div>Answer: {{answer}}</div>
</div>

Answer

This is because you have mixed the array notation for injected dependencies in your controller and in your module.

Controller.js

'use strict';

var app = angular.module('app.controllers', []);

app.controller('CalculatorCtrl', ['$scope', '$http', 'CalculatorService', function($scope, $http, CalculatorService){

   console.log('in CalculatorCtrl...');
    $scope.doSquare = function() {
     $scope.answer = CalculatorService.square($scope.number);
   };

    $scope.doCube = function() {
     $scope.answer = CalculatorService.cube($scope.number);
   };

}]);

UPDATE: Remove $scope and CalculatorService in functions doSquare and doCube, they are already included as dependencies in your controller. Updated version above.