モジュールがロードされない

Question

AngularJS v1.6.0。

読み込みに失敗したモジュールを理解するにはどうすればよいですか？なぜ、どのようにそれを修正するには？

私は次のエラーを取得：

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.0/$injector/modulerr?p0=fooApp&p1=Error%…c%20(http%3A%2F%2Fviic.com%2Flibs%2Fangular%2Fangular.min.js%3A21%3A332)(…)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4756q @ angular.js:357g @ angular.js:4717eb @ angular.js:4639c @ angular.js:1838Lc @ angular.js:1859oe @ angular.js:1744(anonymous function) @ angular.js:32890b @ angular.js:3314 
www-embed-player.js:218 GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENTRd @ www-embed-player.js:218Vd @ www-embed-player.js:222(anonymous function) @ www-embed-player.js:249L @ www-embed-player.js:173re @ www-embed-player.js:246xk @ www-embed-player.js:654(anonymous function) @ www-embed-player.js:705(anonymous function) @ S0Q4gqBUs7c?controls=0&showinfo=0&enablejsapi=1&showsearch=0&rel=0:10 

マイアプリのフロントエンド構造：

- public 
    - js/controllers/VideoChannelCtrl.js 
    - js/services/CoubService.js 
    - js/app.js 
    - js/appRoutes.js 
    - index.html 
    - views/player.html 
    - libs/angular/angular.min.js 
    - libs/angular-route/angular-route.min.js 
    ... 

index.htmlを

... 
<script src="libs/angular/angular.min.js"></script> 
<script src="libs/angular-route/angular-route.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers/VideoChannelCtrl.js"></script> 
<script src="js/services/CoubService.js"></script> 
<script src="js/appRoutes.js"></script> 
... 

JS/app.js

var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']); 

をの

JS/appRoutes.js

angular.module('appRoutes', []) 
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 

    $routeProvider 

     // home page 
     .when('/', { 
      templateUrl: 'views/player.html', 
      controller: 'VideoChannelController' 
     }); 

    $locationProvider.html5Mode(true); 

}]); 

JS /コントローラ/ VideoChannelCtrl.js

fooApp.controller('VideoChannelController', ['$scope', 'Coub', function($scope, Coub) { 

    $scope.tagline = 'To the moon and back!'; 

    Coub.get().success(function(data) { 
     $scope.videolink = data[0].url; 
    }); 
}]); 

JS /サービス/ CoubService.js

angular.module('CoubService', []).factory('Coub', ['$http', function($http) { 
    return { 
     get : function() { 
      return $http.get('/api/videolinks'); 
     }, 
     delete : function(id) { 
      return $http.delete('/api/videolinks/' + id); 
     }; 
}]); 

Answer 1

としてモジュールを定義することができます。私はあなたがこのようなあなたのコントローラーを宣言することをお勧め

：

JS /コントローラ/ VideoChannelCtrl.js

angular.module('fooApp') 
    .controller('VideoChannelController', VideoChannelController); 

VideoChannelController.$inject = ['$scope', 'Coub']; 

function VideoChannelController($scope, Coub) { 

    $scope.tagline = 'To the moon and back!'; 

    Coub.get().success(function(data) { 
     $scope.videolink = data[0].url; 
    }); 
} 

VideoChannelControllerコントローラがfooAppモジュールアプリケーションのコントローラとして宣言されているとして、あなたはしないでください

var fooApp = angular.module('fooApp', ['ngRoute', 'appRoutes', 'VideoChannelCtrl', 'CoubService']); 

この宣言の。

また、次のAngularJS開発ガイドラインを参照してください：

• Angular Style Guide

Answer 2

がVideoChannelCtrlコントローラまたはモジュールです？それがコントローラなら、それをモジュール依存として注入することはできません。モジュールの依存関係から削除する - angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);

または、別のモジュールを作成し、そのモジュール内にこのコントローラを置き、新しく作成したモジュールを挿入します。アプリに複数のモジュールが必要かどうかを確認してください。与えられたコードから推測すると、複数のモジュールは必要ありません。

は例えば、次のようにして、同じfooAppでサービスを持つことができます。 angular.module('fooApp').factory('Coub', ....);

angular.module('fooApp') - >fooAppという名前の登録済みのモジュールを取得し、あなたが同じモジュールになどをコントローラ/サービス/ディレクティブを追加することができます。あなたはfooAppモジュールにあなたの指定したコントローラ、サービスおよび設定を追加した場合

そう、あなたはあなたが正しくVideoChannelControllerコントローラを注入しなかった angular.module('fooApp', ['ngRoute']);