实例化app模块失败.处理步骤为什么

failed to instantiate app module. why?

本文关键字：为什么处理失败 app 模块实例化更新时间：2023-09-26

当我尝试加载包含AngularJS代码的html页面时，我在Firefox开发控制台得到以下错误:

Error: [$injector:modulerr] Failed to instantiate module bookApp due to:
[$injector:nomod] Module 'bookApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

注意，当我单击index.html中的按钮时，Firefox开发人员控制台中没有输出，因为模块还没有实例化。如何解决此错误?

这是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.module('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;
        });
    };
}]);

下面是Firefox控制台的完整堆栈跟踪:

Error: [$injector:modulerr] Failed to instantiate module bookApp due to:
[$injector:nomod] Module 'bookApp' is not available! You either misspelled the module name or forgot to load it. If registering a module 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
module/<@http://localhost:8080/petclinic/js/lib/angular.js:1764:1
ensure@http://localhost:8080/petclinic/js/lib/angular.js:1688:38
module@http://localhost:8080/petclinic/js/lib/angular.js:1762:1
loadModules/<@http://localhost:8080/petclinic/js/lib/angular.js:4094:22
forEach@http://localhost:8080/petclinic/js/lib/angular.js:323:11
loadModules@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/modulerr?p0=bookApp&p1=%5B%24injector%3Anomod%5D%20Module%20'bookApp'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%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%0Amodule%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%0Amodule%40http%3A%2F%2Flocalhost%3A8080%2Fpetclinic%2Fjs%2Flib%2Fangular.js%3A1762%3A1%0AloadModules%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%0AloadModules%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

你的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>