javascript - AngularJS routeProvider redirecting doesn't work -
i have index page, looks this:
<!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 have 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' }); }]); controller:
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 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; }); my problem when click button showdetails() ng-click function, send request spring rest controller specfied book data. works fine, json object, routeprovider doesn't redirect me page/bookdetails.html page.
as can see http request proper. cant figure out why doesn't redirecting me bookdetails.html page. idea guys? stuck.
basically making ajax request not change url in browser, need use $location service redirect between routes(don't forget inject $location dependency in controller function).
you should use $location.path redirect specified path.
bookfactory.showdetails = function(bookid){ var request = 'library/bookdetails/' + bookid; return $location.path(request); }; rather have href on anchor tag instead of having ng-click directive
<a ng-href="/library/bookdetails/{{obj.bookid}}">show details</a> this solve problem fully. should create new controller bookdetails page rather using bookslistcontroller(which disobey single responsibility principle) can named bookdetailscontroller details route change below.
.when('/library/bookdetails/:bookid', { templateurl: 'page/bookdetails.html', controller: 'bookdetailscontroller' }); now bookdetailscontroller have logic load book details through ajax call. there 1 method read parameter url using $routeparmas service $routeparams.bookid & pass bookid server retrieve book detail.
Comments
Post a Comment