Javascript AngularJS routeProvider重定向不'；行不通_Javascript_Angularjs

Javascript AngularJS routeProvider重定向不'；行不通

javascript angularjs

Javascript AngularJS routeProvider重定向不'；行不通,javascript,angularjs,Javascript,Angularjs,我有一个索引页，看起来像这样： <!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">&l

我有一个索引页，看起来像这样：

<!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>

控制器：

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);
                }
            };  
        });

和services.js：

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;
});

我的问题是，当我使用showDetails（）ng click函数单击按钮时，我向Spring Rest控制器发送请求，以获取指定的书籍数据。一切正常，我得到了JSON对象，但我的routeProvider没有将我重定向到page/bookDetails.html页面

正如您所看到的，Http GET请求是正确的。我不明白为什么它不能将我重定向到bookDetails.html页面。有什么想法吗，伙计们？我卡住了

基本上，发出ajax请求不会改变浏览器中的URL，您需要使用

$location

服务在路由之间重定向（不要忘记在控制器函数中注入

$location

依赖项）

您应该使用

$location.path

重定向到指定的路径

bookFactory.showDetails = function(bookId){
    var request = 'library/bookDetails/' + bookId;
    return $location.path(request);
};

相反，您可以在锚定标记上使用

href

，而不是使用

ng click

指令

<a ng-href="/library/bookDetails/{{obj.bookId}}">Show Details</a>

现在，

bookDetailsController

将具有通过ajax调用加载书籍详细信息的逻辑。基本上，有一种方法可以使用

$routeParams

服务（如

$routeParams）从URL读取参数。bookId

&会将bookId传递给服务器以检索书籍详细信息。

当您进行HTTP GET调用时不会发生重定向，当您在客户端更改URL时会发生重定向：

将

$location

注入控制器：

libraryControllers.controller('booksListController', function($scope, $http, BookFactory, $location){

然后按原样使用：

$scope.showDetails = function(){
   if ($scope.selectedBook.id == 0){
      $scope.bookIsNotSelected = true;
   }
   else {
     BookFactory.showDetails($scope.selectedBook.id).then(function(res) {
        // Redirect occurs here..
        $location.path('library/bookDetails/' + $scope.selectedBook.id);
     });
   }
 };

这将抛出一个错误，因为您没有将

$location

注入控制器。@AvijitGupta先生，这是一条经验法则，您应该在使用依赖项之前注入依赖项。。我不认为我应该在回答中提到这一点。你知道，我知道，但也许其他看到这篇文章的人不知道。@AvijitGupta没关系，我没有回答（仍然毫无意义）。。谢谢：）你完全正确，谢谢。当然，我已经为bookDetails创建了新的控制器，如下SRP:）

libraryControllers.controller('booksListController', function($scope, $http, BookFactory, $location){

$scope.showDetails = function(){
   if ($scope.selectedBook.id == 0){
      $scope.bookIsNotSelected = true;
   }
   else {
     BookFactory.showDetails($scope.selectedBook.id).then(function(res) {
        // Redirect occurs here..
        $location.path('library/bookDetails/' + $scope.selectedBook.id);
     });
   }
 };