Question

当我尝试加载包含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

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

无法实例化app模块。为什么？

1 个答案: