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') - ＆gt;获取已注册的名为fooApp的模块，您可以将控制器/服务/指令等添加到同一模块中。

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

模块无法加载

2 个答案: