Angular routing is not working properly

Question

I am building a login page where a user has 2 roles ie student or librarian. When the user enters his credentials and click on submit,the validate function will be called.

Now,

The problem I am facing is :

The routing is not working ie the control reaches to the alert("login successful"); and enters into if ($scope.roles[i].role === "student") { but does not direct the page to $location.path('/home/student');

The login page url is as below :

http://localhost:63342/LabguideExamples/Assignment/Day4/Login.html?_ijt=oa5emr702cenehrs4oosarmg0d

The url after successful login is as below.

http://localhost:63342/LabguideExamples/Assignment/Day4/Login.html?_ijt=oa5emr702cenehrs4oosarmg0d#/home/student

The url still has Login.html and it is not replaced by 'ViewBooks_Student.html',as per app.js.

Any help is much appreciated.

Thanks

controller.js

var Controllers = angular.module('Controllers', ['ngRoute']);
Controllers.controller('LoginCtrl', ['$scope','$http','$location',
function ($scope,$http,$location) {
    $scope.validate=function()
    {
        $http.get('data/roles.json').success(function(data) {
            $scope.roles = data;

        var count=0;
            for (var i = 0, len = $scope.roles.length; i < len; i++) {
if ($scope.username === $scope.roles[i].username && $scope.password === $scope.roles[i].password) {
                    alert("login successful");
                    count = count + 1;
                    if ($scope.roles[i].role === "student") {
                        $location.path('/home/student');
                        break;
                    }
                    else {
                        $location.path('/home/librarian');
                        break;
                    }

                }
            }

        if(count!=1)
        {
            alert("Please provide valid login credentials");
            $location.path( "/main" )
        }
        });
    }

}]);

app.js

var bookApp = angular.module('bookApp',[
'Controllers','ngRoute'
]);
bookApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/main', {
        templateUrl: 'Login',
        controller: 'LoginCtrl'
    }).
    when('/home/student', {
        templateUrl: 'ViewBooks_Student.html',
        controller: 'BookListCtrl_Student'
    }).
    when('/home/librarian', {
        templateUrl: 'ViewBooks_Librarian.html',
        controller: 'BookListCtrl_Librarian'
    }).
    when('/issue/:bookId', {
        templateUrl: 'IssueBook.html',
        controller: 'IssueBookCtrl'
    }).
    when('/return/:bookId', {
        templateUrl: 'ReturnBook.html',
        controller: 'ReturnBookCtrl'
    }).
    otherwise({
        redirectTo: '/main'
    });
}]);

Answer 1

This is kind of in depth problem . as far as i understood after login you need to redirect to a page based on the User Role. so this particular logic which you wrote on the Controller that thing you need to write into Angular Run block

angular.module('myapp').run([],function(){})

basically Angular has a priority execution system run block execute before controller. for more details check Angular documentation. https://docs.angularjs.org/guide/module .