Error injecting $state into controller

Question

I have a problem injecting the $state in my controller.

angular.module('myApp', ['ngMaterial'])
.controller('LoginController', function($scope, $rootScope,$state){

    $scope.userlogin = "";
    $scope.userkey = "";
    $scope.access = function(){
        console.log("depois")
        //$state.go('home');
    }

});

The following error is generated (Only when I include the $state):

Error: [$injector:unpr]

Route archive:

var routerApp = angular.module('myApp', []);

routerApp.config(function($stateProvider, $urlRouterProvider,$state) {

    $urlRouterProvider.otherwise('/login');

    $stateProvider

        .state('login', {
            url: '/login',
            templateUrl: 'index.html',
            controller: 'HomeController'
        })


        .state('index', {
            url: '/index',
            templateUrl: 'index.html',
            controller: 'HomeController'
        });

})

---

Good afternoon. I made the adjustments but persists,

Rota archive:

var routerApp = angular.module('myApp', []);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/login');

    $stateProvider

        .state('login', {
            url: '/login',
            templateUrl: 'login.html',
            controller: 'LoginController'
        })


        .state('index', {
            url: '/index',
            templateUrl: 'index.html',
            controller: 'HomeController'
        });

})

Controller:

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


app.controller('HomeController', function($scope,$rootScope,$state){
    console.log('HomeController');

    var nome = "teste";
    var dateAtual = new Date();
    var mensagens = "teste";

    $scope.msg  = mensagens;
    $scope.time = dateAtual;
    $scope.nome = nome;

    console.log(nome);
    console.log(dateAtual);
    console.log(mensagens);
})

// - Este controller sem o $state funciona corretamente.

app.controller('LoginController', function($scope,$rootScope){
    console.log('LOGINCONTROLLER');
});

angular.min.js:118 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr? P0=%24stateProvider%20%3C-%20%24state%20%3C-%20HomeController

Answer 1

The problem is you’re doing the injection of $state in the configuration file, which is not allowed. Remove it by leaving your line like this:

routerApp.config(function($stateProvider, $urlRouterProvider) {

And the problem must be solved.

---

Edited:

Based on your editing, the problem is that you are setting the modules wrong.

Just to clarify, for you to create a module, you must use the following code:

angular.module('meuModulo', []);

If you want to use the same module for several controllers, should always use the same module, but without []. Thus:

angular.module('meuModulo').config(...
angular.module('meuModulo').controller(...

This is what you are missing, because you are creating 1 module for the configuration and another module for the controller.

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

What you can do is like this:

var app = angular.module('myApp', []); //Cria somente 1 módulo

app.config(function($stateProvider, $urlRouterProvider) {...
app.controller('LoginController',...

---

Another important point I’ve noticed now and I believe you’re not making.

In order to use the route system through the .state you need to install the module howling before. So your final code should look something like this:

var app = angular.module('myApp', ['ui.router']); //Cria somente 1 módulo

app.config(function($stateProvider, $urlRouterProvider) {...
app.controller('LoginController',...

<script src="angular-ui-router/release/angular-ui-router.js"></script> //Altere o src para o caminho onde você salvar o script do uiRouter