AngularJS routeProvider重定向不起作用

我有索引頁，它看起來像這樣：AngularJS routeProvider重定向不起作用

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

我也有app.js：

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

控制器：

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單擊函數單擊按鈕時，我向Spring Rest Controller發送請求以獲取指定的書籍數據。一切工作正常，我得到JSON對象，但我的routeProvider不會將我重定向到page/bookDetails.html頁面。

正如你所看到的HTTP GET請求是適當的。我不知道爲什麼它不會將我重定向到bookDetails.html頁面。任何想法的傢伙？我卡住了。

來源

2016-01-07 G.Spansky

基本上做一個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>

這將完全解決您的問題。您應該爲bookDetails頁面創建一個新的控制器，而不是使用booksListController（違反單一責任原則），該控制器可命名爲bookDetailsController，因此詳細路徑將更改爲以下。

.when('/library/bookDetails/:bookId', { 
    templateUrl: 'page/bookDetails.html', 
    controller: 'bookDetailsController' 
});

現在bookDetailsController將不得不通過Ajax調用加載在本書的詳細邏輯。基本上會有一種方法會從URL讀取參數，使用$routeParmas這樣的服務，例如$routeParams.bookId &會將bookId傳遞給服務器以檢索書的詳細信息。

進樣$location到控制器中：

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

然後用它

來源

2016-01-07 14:45:01

由於您沒有在控制器中注入'$ location'，所以會出現錯誤。 –

@AvijitGupta先生這是角度的拇指規則，您應該在使用它之前注入依賴關係..我不認爲應該在答案中提及.. –

您瞭解這一點，我知道這一點，但也許其他人看到這個帖子不要。 –

當你做出一個HTTP GET調用重定向不會發生，當你改變對客戶端的URL發生原因如下：

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

來源

2016-01-07 14:46:23

AngularJS routeProvider重定向不起作用

回答

相關問題