模块无法加载

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 ChannelCtrl.j

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/services/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/controllers/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开发准则：

• 角型导轨

Answer 2

VideoChannelCtrl是控制器还是模块？如果它是一个控制器，那么您就不能将它作为模块依赖注入。从模块依赖项中删除它- angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);

或者创建单独的模块，并在该模块中包含此控制器，并注入新创建的模块。检查你的应用程序中是否真的需要有多个模块。根据我从给定代码中假设的情况，您不需要多个模块。

例如，您可以在相同的fooApp中获得这样的服务：angular.module('fooApp').factory('Coub', ....);

angular.module('fooApp') ->获取已经注册的fooApp模块，您可以将控制器/服务/指令等添加到同一个模块中。

因此，如果将给定的控制器、服务和配置添加到fooApp模块中，则可以将该模块定义为angular.module('fooApp', ['ngRoute']);。