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]
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>
