模塊無法加載

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

您沒有正確注入VideoChannelController控制器。

我建議你宣佈你的控制器是這樣的：

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']); 

您可以刪除VideoChannelController從這個聲明。

此外，你應該參考以下AngularJS開發指南：

• Angular Style Guide

Answer 2

是VideoChannelCtrl控制器或模塊？如果它是一個控制器，那麼你不能將它注入爲模塊依賴。將其從模塊相關性中刪除 - angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);

或者創建單獨的模塊，並將該控制器放入該模塊中，並注入新創建的模塊。檢查是否真的需要在您的應用中使用多個模塊。從我從給定的代碼中假設，你不需要多個模塊。

對於例如，你可以在同一fooApp這樣的服務： angular.module('fooApp').factory('Coub', ....);

angular.module('fooApp') - >獲取已註冊模塊命名fooApp，你可以等，以相同的模塊添加控制器/服務/指令。

所以，如果你把你給控制器，服務和配置的fooApp模塊，那麼你就可以定義模塊 angular.module('fooApp', ['ngRoute']);