understanding controllers and modules angularJs

Question

I have this code in app.js, and work fine. I want to put each controller in a diferent file, but if put the controller in other file. I recived the message: Argument 'visorController' is not a function, got undefined

angular.module('appVisorMapa', [
    'ngCookies',    // Cookies
    'ui.bootstrap', // AngularUI Botstrap
    'ui.router',    // Routing
    'ngRoute'       // Routing
])

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/login");
    $stateProvider
    .state("/login", {
        url: "/login",
        templateUrl: "views/login.html",
        controller: "loginCtrl"
    })
    .state("/dashboard", {
        url: "/dashboard",
        templateUrl: "views/dashboard.html",
        controller: "visorController"
    })
})

.controller('visorController', function($scope) {
    console.log("controller it's Ok");
})

This is the way that I put the controller in other file. I know that it's wrong but I dont understand how to declare it. I mind why I need to make a new module?

angular.module('visor',[])

.controller('visorController', function($scope) {
    console.log("controller it's Ok");
});

I add the new file to my index.html but doesn't work. I don't understand how to declare the controllers in separate files. Why not recognize my controller or what is the correct way to make it. I feel confused about how angujarJs organize the modules and controllers.
Thanks in advance.

score 3 · Answer 1 · answered Apr 16 '15 at 14:25

In both the files you're using two different module names angular.module('visor',[]) and angular.module('appVisorMapa', [])

As both belong to same module, you must use the getter to get the previous module.

angular.module('appVisorMapa')

.controller('visorController', function($scope) {
    console.log("controller it's Ok");
});

understanding controllers and modules angularJs

1 Answers1