Check out this interactive Plunker showcasing your code. A crucial element you're missing is the ng-view, which ngRoute utilizes to swap content based on your configuration. In essence, your index.html should resemble:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ng-view></ng-view>
</body>
Essentially, ng-view serves as an Angular directive that injects the current route's template (/main or /home/student) into the primary layout file. To elaborate, it fetches the corresponding file based on the route and embeds it within the main layout (index.html).
In your setup, 'main' in ng-view corresponds to Login.html within the config. I've tweaked '/home/student/' to map to a distinct page 'dic.html' to prevent an endless loop previously tied to index.html
var app = angular.module('plunker', ['ngRoute', 'Controllers']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'Login.html',
controller: 'LoginCtrl'
}).
when('/home/student', {
templateUrl: 'dic.html',
controller: 'DictionaryController'
}).
otherwise({
redirectTo: '/main'
});
}
]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Similar to your scenario, upon logging in with credentials like 'harish' for both email and password, the successCallback triggers navigation to '/home/student', replacing ng-view with dic.html:
$scope.validate = function() {
$http.get('credentials.json').then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
console.log('Data: ' + JSON.stringify(response));
$scope.users = response.data;
var count = 0;
for (var i = 0, len = $scope.users.length; i < len; i++) {
if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) {
alert("login successful");
count = count + 1;
if ($scope.users[i].role === "student") {
$location.path('/home/student');
break;
}
}
}
if (count != 1) {
alert("Please provide valid login credentials");
$location.path("/main")
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log("Error: " + JSON.stringify(response));
alert(JSON.stringify(response));
});
};
If you require further assistance, feel free to reach out.