javascript - Angularjs Uncaught エラー: [$injector:modulerr]

Question

この問題は非常に一般的な問題のようです。しかし、私は長い間問題を見つけることができませんでした。以下のように、アプリケーション、コントローラー、サービスモジュールを個別の js ファイルに配布しました。

app.js

    /** Main AngularJS Web Application */
var app = angular.module('ngdemo', [ 'ngdemo.controllers', 'ngdemo.services' ]);

app
        .config([
                '$routeProvider',
                '$httpProvider',
                function($routeProvider, $httpProvider) {

                    $routeProvider.when('/documents', {
                        templateUrl : 'documents.html',
                        controller : 'documentListCtrl'
                    }).when('/documents/:id', {
                        templateUrl : 'edit_document.html',
                        controller : 'documentDetailCtrl'
                    }).when('/document', {
                        templateUrl : 'create_document.html',
                        controller : 'documentCreationCtrl'
                    }).otherwise({
                        redirectTo : '/home'
                    });

                    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
                } ]);

および document_controllers.js

var controllers = angular.module('ngdemo.controllers', []);

/* ... */
controllers.controller( 'navigation', ['$rootScope', '$scope', '$http', '$location', '$route', function($rootScope, $scope, $http, $location, $route) {

    $scope.tab = function(route) {
        return $route.current && route === $route.current.controller;
    };

    var authenticate = function(credentials, callback) {

        var headers = credentials ? {
            authorization : "Basic "
                    + btoa(credentials.username + ":"
                            + credentials.password)
        } : {};

        $http.get('user', {
            headers : headers
        }).success(function(data) {
            if (data.name) {
                $rootScope.authenticated = true;
            } else {
                $rootScope.authenticated = false;
            }
            callback && callback($rootScope.authenticated);
        }).error(function() {
            $rootScope.authenticated = false;
            callback && callback(false);
        });

    }

    authenticate();

    $scope.credentials = {};
    $scope.login = function() {
        authenticate($scope.credentials, function(authenticated) {
            if (authenticated) {
                console.log("Login succeeded")
                $location.path("/documents");
                $scope.error = false;
                $rootScope.authenticated = true;
            } else {
                console.log("Login failed")
                $location.path("/home");
                $scope.error = true;
                $rootScope.authenticated = false;
            }
        })
    };

    $scope.logout = function() {
        $http.post('logout', {}).success(function() {
            $rootScope.authenticated = false;
            $location.path("/");
        }).error(function(data) {
            console.log("Logout failed")
            $rootScope.authenticated = false;
        });
    }

}]);

/* ... */
controllers.controller('documentListCtrl', ['$scope', 'DocumentsFactory', 'DocumentFactory', '$location',
    function ($scope, DocumentsFactory, DocumentFactory, $location) {

        // callback for ng-click 'editDocument':
        $scope.editDocument = function (documentId) {
            $location.path('/documents/' + documentId);
        };

        // callback for ng-click 'deleteDocument':
        $scope.deleteDocument = function (userId) {
            DocumentFactory.delete({ id: userId });
            $scope.documents = DocumentsFactory.query();
        };

        // callback for ng-click 'createDocument':
        $scope.createNewDocument = function () {
            $location.path('/document');
        };

        $scope.documents = DocumentsFactory.query();
    }]);


/* ... */
controllers.controller('documentDetailCtrl', ['$scope', '$routeParams', 'DocumentFactory', '$location',
    function ($scope, $routeParams, DocumentFactory, $location) {

        // callback for ng-click 'updateDocument':
        $scope.updateDocument = function () {
            DocumentFactory.update($scope.document);
            $location.path('/documents');
        };

        // callback for ng-click 'cancel':
        $scope.cancel = function () {
            $location.path('/documents');
        };

        $scope.document = DocumentFactory.show({id: $routeParams.id});
    }]);

/* ... */
controllers.controller('documentCreationCtrl', ['$scope', 'DocumentsFactory', '$location',
    function ($scope, DocumentsFactory, $location) {

        // callback for ng-click 'createNewUser':
        $scope.createNewDocument = function () {
            DocumentsFactory.create($scope.document);
            $location.path('/documents');
        }
    }]);

そして最後に document_services.js

var services = angular.module('ngdemo.services', ['ngResource']);

services.factory('DocumentsFactory', function ($resource) {
    return $resource('/rest/documents', {}, {
        query: { method: 'GET', isArray: true },
        create: { method: 'POST' }
    })
});

services.factory('DocumentFactory', function ($resource) {
    return $resource('/rest/documents/:id', {}, {
        show: { method: 'GET' },
        update: { method: 'PUT', params: {id: '@id'} },
        delete: { method: 'DELETE', params: {id: '@id'} }
    })
});

私のindex.htmlファイルでは、

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">

<title>Sample Project</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron.css" rel="stylesheet">

</head>



<body ng-app="ngdemo" class="ng-cloak">

    <nav class="navbar navbar-inverse navbar-fixed-top">

        <!-- ng-controller="navigation" -->
        <div class="container">
            <div class="navbar-header">

                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    <li ng-class="{active:tab('home')}"><a href="#/">Home</a></li>
                    <li ng-show="authenticated" ng-class="{active:tab('document')}"><a
                        href="#/documents">Document</a></li>
                </ul>

                <form ng-show="!authenticated" ng-submit="login()"
                    class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" id="username"
                            name="username" ng-model="credentials.username" />
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="password"
                            name="password" ng-model="credentials.password" />
                    </div>
                    <button type="submit" class="btn btn-success">Sign in</button>
                </form>

                <div ng-show="authenticated" ng-submit="login()"
                    class="navbar-form navbar-right">
                    <button type="submit" class="btn btn-success" ng-click="logout()">Log
                        Out</button>
                </div>

            </div>
        </div>
    </nav>

    <div ng-view class="container"></div>

    <script src="js/angular-bootstrap.js" type="text/javascript"></script>


    <script src="js/app.js"></script>
    <script src="js/document_controllers.js"></script>
    <script src="js/document_services.js"></script>

</body>
</html>

私のプロジェクトでは、wro4j-maven-pluginJavaScriptファイルを生成するために使用しています

<groups xmlns="http://www.isdc.ro/wro">
  <group name="angular-bootstrap">
    <css>webjar:bootstrap/3.2.0/less/bootstrap.less</css>   
    <css>file:${project.basedir}/src/main/wro/main.less</css>
    <js>webjar:jquery/2.1.1/jquery.min.js</js>
    <js>webjar:angularjs/1.3.8/angular.min.js</js>
    <js>webjar:angularjs/1.3.8/angular-route.min.js</js>
    <js>webjar:angularjs/1.3.8/angular-cookies.min.js</js>
   </group>
</groups>

したがって、この生成されangular-bootstrapたファイルは html ファイルで適切に参照されますが、モジュールのロードはまだ失敗しているようです。どんな助けでも大歓迎です。

ありがとう

score 0 · Accepted Answer

おそらく、ルートプロバイダーをインストールngRouteし、app.jsに依存関係を含める必要があります。

ドキュメントは次のとおりです。$routeProvider

そして、インストールについて：ngRoute

javascript - Angularjs Uncaught エラー: [$injector:modulerr]

1 に答える 1

Related

Reference