Issue with angularJs redirection after login in a mvc controller

Question

I'm facing a issue. Im developing a login form with angular + mvc 4.The problem starts when I try to redirect to another view after the login process.

Code:

This is my factory: This factory execs an ajax call to my action result in a mvc controller, and it works well.

moduloRegistro.factory('loginRepository', function ($resource) {
    return {
        login: function (usuario) {
            return $resource('Acesso/Logar').save(usuario);
        }
    }
});

Below my controller: My controller validate the result and if everything is ok it tries to redirect to the new URL

moduloRegistro.controller('LoginController', function ($scope, loginRepository, $location, toastr) {
    $scope.erroLogin = '';
    $scope.login = function (usuario) {
        loginRepository.login(usuario).$promise.then(
            function (response) {
                if (response.mensagemDeErro != undefined || response.mensagemDeErro != null)
                    toastr.error(response.mensagemDeErro);
                else
                    $location.url('Board/Programa');
            },
            function (erro) {
                toastr.error(erro.mensagemDeErro);
            }
        );
    };
});

And this is my module: Where I configure the routes and templates to be rendered into the ng-view.

var moduloRegistro = angular.module('moduloRegistro', ['ngRoute', 'ngResource']);


moduloRegistro.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/',
        {
            templateUrl: '/Templates/Acesso/login.html', controller: 'LoginController'
        });
    $routeProvider.when('/Board/Programa',
        {
            templateUrl: '/Templates/Board/programa.html', controller: 'BoardController'
        });
    $locationProvider.html5Mode(true)
});

moduloRegistro.value('toastr', toastr);

This is my RouteConfig:

routes.MapRoute(
              name: "Board SPA",
              url: "Board/{*catchall}",
              defaults: new { controller = "Board", action = "Index" }
          );

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Acesso", action = "Index", id = UrlParameter.Optional }
            );

The problem: When he redirect to the new view, the BoardController didnt work and the html from my main view spa page are rendered inside the ng-view.

Bellow the controller and factory of my Board:

//Controller.
moduloRegistro.controller('BoardController', function ($scope, boardRepository, $location, toastr) {
    $scope.partes = boardRepository.getPartes();
});

//Factory
moduloRegistro.factory('boardRepository', function ($resource) {
    return {
        getPartes: function () {
            return $resource('Board/ObterPartesEscola').get();
        }
    }
});

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Take a look at the resolve function that you can use when you define your routes. More info can be found within this answer

edited May 23 '17 at 12:20

Community

1
1

answered Mar 30 '14 at 02:51

Brocco

62,737
12
70
76

score 0 · Answer 2 · answered Mar 30 '14 at 19:59

Not the solution to this specific problem but just a bit of code-style...

This:

moduloRegistro.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/',
    {
        templateUrl: '/Templates/Acesso/login.html', controller: 'LoginController'
    });
$routeProvider.when('/Board/Programa',
    {
        templateUrl: '/Templates/Board/programa.html', controller: 'BoardController'
    });
$locationProvider.html5Mode(true)
});

Looks much better like this:

 moduloRegistro.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/',
        {
            templateUrl: '/Templates/Acesso/login.html', 
            controller: 'LoginController'
        })
    .when('/Board/Programa',
        {
            templateUrl: '/Templates/Board/programa.html', 
            controller: 'BoardController'
        });
    $locationProvider.html5Mode(true)
 });

Whenever you use a service more than once you can chain them together by not using a semicolon and following with '.whatever' .

Issue with angularJs redirection after login in a mvc controller

2 Answers2