Javascript AngularJS: Uncaught ReferenceError: angular is not defined app.js:1(anonymous function):
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26292970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: Uncaught ReferenceError: angular is not defined app.js:1(anonymous function):
提问by vicky
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.
我已将我的 AngularJS 测试项目移至 app.js、controllers.js 和 Services.js。之后我的项目没有运行，甚至没有一个页面正常工作。
i have attached my main source files here along with exception screenshot
我在这里附上了我的主要源文件以及异常截图
index.html
索引.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
应用程序.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
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
控制器.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
计算器.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>
回答by ryeballar
This is because you have mixed the array notation for injected dependencies in your controller and in your module.
这是因为您在控制器和模块中混合了注入依赖项的数组符号。
Controller.js
控制器.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 $scopeand CalculatorServicein functions doSquareand doCube, they are already included as dependencies in your controller. Updated version above.
更新：删除$scope和CalculatorService在函数doSquare和中doCube，它们已经作为依赖项包含在您的控制器中。上面的更新版本。
回答by Arpit Srivastava
You can fix it by
你可以通过
'use strict';
var app = angular.module('app.controllers');
var 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);
}
};
CalculatorCtrl.$inject = ['$scope', '$http', 'CalculatorService']; //old technique to add dependencies
app.controller('CalculatorCtrl', CalculatorCtrl);
回答by Mohammad Kermani
I got the same error:
我得到了同样的错误：
Uncaught ReferenceError: getList is not defined
未捕获的 ReferenceError：未定义 getList
Note:In your case, the error says Angular is not defined, but for me, a function could not be find.
注意：在您的情况下，错误表示未定义 Angular，但对我而言，找不到函数。
that was because I forgot a simple thing, my code was like this:
那是因为我忘记了一个简单的事情，我的代码是这样的：
<a onclick="getList();"> Get List</a>
I called the Angular function by onclick, and it should be ng-click, in my case, I just needed to change that to this:
我调用了 Angular 函数onclick，它应该是ng-click，在我的情况下，我只需要将其更改为：
<a ng-click="getList();"> Get List</a>
