A module fails to load - angularjs

Question

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

Answer 1

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 :
Angular Style Guide

Answer 2

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