Loading modules in Angularjs

Question

I have a problem trying to load some modules.

controller1.js:

angular.module('LPC')
   .controller('lista_peliculas_controller', ['$scope', function($scope) {
       $scope.hola="hola peliculas";
   }]);

And app.js:

var app = angular.module('mis_peliculas', []);

app.config(function($routeProvider){
    $routeProvider
        .when("/pagina_principal",{
            templateUrl: "views/pagina_principal.html",
            controller: "lista_peliculas_controller"
        })
        .when("/lista_peliculas",{
            templateUrl: "views/lista_peliculas.html",
            controller: "lista_peliculas_controller"
        })
        .when("/lista_series",{
            templateUrl: "views/lista_series.html",
            controller: "lista_series_controller"
        })
        .otherwise({
            redirectTo: "/pagina_principal"
        })
});

The console says that there is a problem with the injector. Can you find the error?

ooozguuur · Accepted Answer · 2017-04-20T15:57:15.223

2

You must add angular-route.js . Reference

The ngRoute module provides routing and deeplinking services and directives for AngularJS apps.

How do you fix it?

var app = angular.module('mis_peliculas', ['ngRoute','LPC']);

And

angular.module('LPC', [])

edited Apr 20 '17 at 15:57

answered Apr 20 '17 at 15:52

ooozguuur

3,396
2
24
42

It worked, thank you very much, it seems that the bug was by ngRoute – David_ult Apr 20 '17 at 16:00

Karim · Answer 2 · 2017-04-20T15:57:44.063

0

without the complete log of the error i can't be more precise, but i think that the injection error could be related to your module not being instantiated.

try to change

angular.module('LPC') //here you get a reference to a module, that could cause your error

to

angular.module('LPC', []) //here you instantiate a module

edited Apr 20 '17 at 15:57

answered Apr 20 '17 at 15:52

Karim

8,454
3
25
33

score 0 · Answer 3 · answered Apr 20 '17 at 15:52

Update your code to use right module name:

angular.module('mis_peliculas')
   .controller('lista_peliculas_controller', ['$scope', function($scope) {
       $scope.hola="hola peliculas";
   }]);

and if you want to use separate modules, you need to initiliaze it first and inject it into your main module

angular.module('LPC',[])
   .controller('lista_peliculas_controller', ['$scope', function($scope) {
       $scope.hola="hola peliculas";
   }]);

var app = angular.module('mis_peliculas', ['LPC']);

I assume your routing is already set correctly.

score 0 · Answer 4 · answered Apr 20 '17 at 16:00

You need to pass in the 'LPC' Module to your app 'mis_peliculas' module for it use the 'lista_peliculas_controller' Controller which is in 'LPC' Module.

Try this code

angular.module('LPC',[])
   .controller('lista_peliculas_controller', ['$scope', function($scope) {
       $scope.hola="hola peliculas";
   }]);

This should be your controller1.js and should be defined before you define your app. Now the app.js should look like

var app = angular.module('mis_peliculas', ['LPC']);

    app.config(function($routeProvider){
        $routeProvider
            .when("/pagina_principal",{
                templateUrl: "views/pagina_principal.html",
                controller: "lista_peliculas_controller"
            })
            .when("/lista_peliculas",{
                templateUrl: "views/lista_peliculas.html",
                controller: "lista_peliculas_controller"
            })
            .when("/lista_series",{
                templateUrl: "views/lista_series.html",
                controller: "lista_series_controller"
            })
            .otherwise({
                redirectTo: "/pagina_principal"
            })
    });

This should remove all the errors and you should be able to use the controller from other module.

Hope it helps

Loading modules in Angularjs

4 Answers4