未能实例化应用程序的模块.为什么
发布网友
发布时间：2022-04-22 08:20
共1个回答
热心网友
时间：2022-06-18 12:19
标签: HTML AngularJS JavaScript
发布时间: 2017/4/23 6:24:18
当我尝试加载的 html 页中包含 AngularJS 代码时，我在火狐浏览器开发人员控制台中出现以下错误︰
Error: [$injector:molerr] Failed to instantiate mole bookApp e to:
[$injector:nomod] Mole 'bookApp' is not available! You either misspelled the mole name or forgot to load it. If registering a mole ensure that you specify the dependencies as the second argument.
请注意，有没有输出在火狐浏览器开发人员控制台中单击的按钮时 index.html 因为模块不被实例化。 如何可以解决此错误？
这里是 index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find Book By ISBN</title>
<script type="text/javascript" src="bookController.js"></script>
</head>
<body ng-app="bookApp">
<div ng-controller="bookController">
<table>
<tr>
<td width=200>
ISBN:<input type="text" ng-model="book.isbn" />
<br>
<button ng-click="findBook()">Find Book</button>
</td>
<td>
ISBN: <span ng-bind="book.isbn"></span>
<br/>
Title: <span ng-bind="book.title"></span>
<br/>
Author: <span ng-bind="book.author"></span>
</td>
</tr>
</table>
</div>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/lib/angular-ui-router.js"></script>
<script src="js/lib/angular-ui-router-statehelper.js"></script>
<script src="js/lib/angular-animate.js"></script>
<script src="js/lib/angular-cookies.js"></script>
<script src="js/lib/angular-storage.js"></script>
</body>
</html>
这里是 bookController.js ，座落于非常相同的目录 index.html :
// create angular app
var bookApp = angular.mole('bookApp', []);
// create angular controller
bookApp.controller('bookController', ['$scope', '$http', 'context', function($scope, $http,context) {
var bookId = 1;
$scope.findBook = function() {
console.log('test')
$http.get(context + '/api/findbook/' + bookId).then(function(response) {
$scope.book = response.data;
});
};
}]);
在这里是完整的堆栈跟踪从火狐浏览器控制台︰
Error: [$injector:molerr] Failed to instantiate mole bookApp e to:
[$injector:nomod] Mole 'bookApp' is not available! You either misspelled the mole name or forgot to load it. If registering a mole ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.11/$injector/nomod?p0=bookApp
minErr/<@http://localhost:8080/petclinic/js/lib/angular.js:63:12
mole/<@http://localhost:8080/petclinic/js/lib/angular.js:1764:1
ensure@http://localhost:8080/petclinic/js/lib/angular.js:1688:38
mole@http://localhost:8080/petclinic/js/lib/angular.js:1762:1
loadMoles/<@http://localhost:8080/petclinic/js/lib/angular.js:4094:22
forEach@http://localhost:8080/petclinic/js/lib/angular.js:323:11
loadMoles@http://localhost:8080/petclinic/js/lib/angular.js:4078:5
createInjector@http://localhost:8080/petclinic/js/lib/angular.js:4004:11
bootstrap/doBootstrap@http://localhost:8080/petclinic/js/lib/angular.js:1446:20
bootstrap@http://localhost:8080/petclinic/js/lib/angular.js:1467:1
angularInit@http://localhost:8080/petclinic/js/lib/angular.js:1361:5
@http://localhost:8080/petclinic/js/lib/angular.js:26111:5
trigger@http://localhost:8080/petclinic/js/lib/angular.js:2741:7
createEventHandler/eventHandler@http://localhost:8080/petclinic/js/lib/angular.js:3011:9
http://errors.angularjs.org/1.3.11/$injector/molerr?p0=bookApp&p1=%5B%24injector%3Anomod%5D%20Mole%20'bookApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20mole%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20mole%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.11%2F%24injector%2Fnomod%3Fp0%3DbookApp%0AminErr%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A63%3A12%0Amole%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1764%3A1%0Aensure%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1688%3A38%0Amole%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1762%3A1%0AloadMoles%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A4094%3A22%0AforEach%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A323%3A11%0AloadMoles%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A4078%3A5%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A4004%3A11%0Abootstrap%2FdoBootstrap%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1446%3A20%0Abootstrap%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1467%3A1%0AangularInit%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1361%3A5%0A%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A26111%3A5%0Atrigger%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A2741%3A7%0AcreateEventHandler%2FeventHandler%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A3011%3A9%0A
解决方法 1:
你 bookController.js 文件不被包含，所以你只需要将其链接 <script type="text/javascript" src="bookController.js"></script>后角脚本的所有标记。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find Book By ISBN</title>
</head>
<body ng-app="bookApp">
<div ng-controller="bookController">
<table>
<tr>
<td width=200>
ISBN:<input type="text" ng-model="book.isbn" />
<br>
<button ng-click="findBook()">Find Book</button>
</td>
<td>
ISBN: <span ng-bind="book.isbn"></span>
<br/>
Title: <span ng-bind="book.title"></span>
<br/>
Author: <span ng-bind="book.author"></span>
</td>
</tr>
</table>
</div>
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/lib/angular-ui-router.js"></script>
<script src="js/lib/angular-ui-router-statehelper.js"></script>
<script src="js/lib/angular-animate.js"></script>
<script src="js/lib/angular-cookies.js"></script>
<script src="js/lib/angular-storage.js"></script>
<script type="text/javascript" src="bookController.js"></script>
</body>
</html>
