2

Angular 1.5 を使用するアプリ用に次の 3 つのファイルがあります。

app.js

angular.module('myApp', ['ngRoute', 'myApp.service'])
    .controller('AppController', AppController);

AppController.$inject = ['$scope', 'GreeterService'];

function AppController($scope, GreeterService) {
    $scope.greeting = GreeterService.greet("World");
}

service.js

angular.module('myApp.service', [])
.factory('GreeterService', function() {
    return {
        salutation: 'Hello',
        greet: function(name) {
            return this.salutation + ' ' + name + '!';
        }
    };
});

およびindex.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="">

</head>
<body>
    <header>

    </header>

    <main ng-app='myApp'>
        <div ng-controller="AppController">
            {{ greeting }}
        </div>
    </main>

    <footer>
        <script src="libs/angular.js" charset="utf-8"></script>
        <script src="libs/angular-route.min.js" charset="utf-8"></script>
        <script src="js/app.js" charset="utf-8"></script>
    </footer>
</body>
</html>

アプリを正しくロードできません。理由がわかりません。app.js と service.js は同じディレクトリにあります。私は両方のモジュールを作成しました。myApp.service を myApp の依存関係に注入しています。myApp.service は、シングルトンとして使用するオブジェクトを返すファクトリを定義しており、すべての名前が一致しています。コンソールに表示されるエラーは、myApp.service が利用できないためロードできなかったことを示しています。私の知る限り、 myApp と myApp.service は DI を正しく使用していますが、それほど遠くまで到達していないため、コントローラーではないと思います。問題が何であるかが本当にわかりません。助けていただければ幸いです。

4

1 に答える 1

2

service.jsサービスの定義を定義するための参照を追加していませんindex.html

<!DOCTYPE html>


</header>

<main ng-app='myApp'>
    <div ng-controller="AppController">
        {{ greeting }}
    </div>
</main>

<footer>
    <script src="libs/angular.js" charset="utf-8"></script>
    <script src="libs/angular-route.min.js" charset="utf-8"></script>
    <script src="js/app.js" charset="utf-8"></script>
    <script src="js/service.js" charset="utf-8"></script>
</footer>

于 2016-04-29T21:49:19.807 に答える