On my index page, I have the following code:
<!DOCTYPE html>
<html ng-app="libraryApp">
<head>
<meta charset="UTF-8">
<title>Angular Library</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="page/js/angular-route.js"></script>
<script src="page/js/app.js"></script>
<script src="page/js/controllers.js"></script>
<script src="page/js/services.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I also have an app.js file with the following content:
var app = angular.module('libraryApp', ['ngRoute', 'libraryControllers']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'page/booksList.html',
controller: 'booksListController'
})
.when('/library/bookDetails/:bookId', {
templateUrl: 'page/bookDetails.html',
controller: 'bookListController'
});
}]);
This is the controller code snippet:
var libraryControllers = angular.module('libraryControllers', ['libraryServices']);
libraryControllers.controller('booksListController', function($scope, $http, BookFactory){
BookFactory.getAllBooks()
.success(function(response){
$scope.books = response;
});
$scope.bookIsNotSelected = false;
$scope.selectedBook = { id: 0 };
$scope.showDetails = function(){
if ($scope.selectedBook.id == 0){
$scope.bookIsNotSelected = true;
}
else {
BookFactory.showDetails($scope.selectedBook.id);
}
};
});
And here's the services.js snippet:
var services = angular.module('libraryServices', []);
services.factory('BookFactory', function($http) {
var bookFactory = {};
bookFactory.getAllBooks = function() {
return $http.get('getBooksList');
}
bookFactory.showDetails = function(bookId){
var request = 'library/bookDetails/' + bookId;
return $http.get(request);
};
return bookFactory;
});
Whenever I click the button with the `showDetails()` ng-click function, it sends a request to the Spring Rest Controller to retrieve specific book data. While the JSON object is retrieved successfully, the routeProvider doesn't redirect me to the `bookDetails.html` page.
https://i.sstatic.net/wudo6.png
The HTTP GET request seems correct. I'm trying to understand why it fails to redirect me to the `bookDetails.html` page. Any suggestions or ideas on what might be causing this issue? I'd appreciate any help as I'm currently stuck.