gpt4 book ai didi

javascript - AngularJS:未捕获的ReferenceError:未定义 Angular app.js:1(匿名函数):

转载 作者:行者123 更新时间:2023-11-28 19:33:42 24 4
gpt4 key购买 nike

我已将 AngularJS 测试项目移至 app.js、controllers.js 和 Services.js 中。之后我的项目无法运行,甚至没有一个页面可以正常工作。

我已在此处附加了我的主要源文件以及异常屏幕截图

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

});

应用程序在服务器上运行时的详细异常:

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

enter image description here

计算器.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>

最佳答案

这是因为您在 Controller 和模块中混合了注入(inject)依赖项的数组表示法。

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

}]);

更新:删除函数doSquaredoCube中的$scopeCalculatorService ,它们已经作为依赖项包含在您的 Controller 中。以上更新版本。

关于javascript - AngularJS:未捕获的ReferenceError:未定义 Angular app.js:1(匿名函数):,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26292970/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com