CODEWITHSUNDEEP
angularjs
srgbnd
srgbnd

Reputation: 5634

A module fails to load

AngularJS v1.6.0.

How to understand what module fails to load? Why and how to fix it?

I get the following error:

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

My app frontend structure:

- 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/controllers/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/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);
        };
}]);

Upvotes: 1

Views: 376

Answers (2)

Mickael
Mickael

Reputation: 4558

You didn't inject the VideoChannelController controller correctly.

I suggest you to declare your controller like this :

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;
    });
}

As VideoChannelController controller is declared as controller of fooApp module application, you don't need injection like :

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

You can remove VideoChannelController from this declaration.

Also, you should refer to the following AngularJS development guideline :

Upvotes: 2

Developer
Developer

Reputation: 6440

Is VideoChannelCtrl a controller or a module? If it's a controller, then you can't inject it as a module dependency. Remove it from module dependencies - angular.module('fooApp', ['ngRoute', 'appRoutes', 'CoubService']);

Or create separate module and have this controller inside that module and inject the newly created module. Check whether it is really required to have multiple modules in your app. From what I assume from the given code, you don't need multiple modules.

For eg, you can have the service in the same fooApp like this: angular.module('fooApp').factory('Coub', ....);

angular.module('fooApp') -> gets the already registered module named fooApp and you can add controllers/services/directives etc to the same module.

So, if you add your given controller, service and config to the fooApp module, then you can define the module as angular.module('fooApp', ['ngRoute']);

Upvotes: 1

Related Questions