Bonjour, je rencontre un actuellement un problème sur angularJS pour afficher le changement de page dans mon url.
Je m'explique, j'ai un système de pagination et j'aimerai quand je clique sur la page 3 que dans mon url, s'affiche, http://localhost:9000/?#!/popular/**3**, malheureusement je n'y arrive pas..
J'ai essayé avec $location.path() mais ça change directement je ne comprends pas très bien..
Si quelqu'un sait m'aider pour m'expliquer :)
Voici mes différents services, controller, vue et route
Route:
.when('/popular/:page?', {
templateUrl: 'views/movies.html',
controller: 'PopularCtrl',
controllerAs: 'popular'
})
Mon controller:
'use strict';
/**
* @ngdoc function
* @name cineAngularApp.controller:PopularCtrl
* @description
* # PopularCtrl
* Controller of the cineAngularApp
*/
angular.module('cineAngularApp')
.controller('PopularCtrl', function ($scope, serviceAjax, $routeParams, $location, $route){
$scope.currentPage = $routeParams.page;
$scope.totalPages = 0;
var loadMovies = function(){
$scope.loading = true;
serviceAjax.popular($scope.currentPage).then(function(data){
$scope.movies = data.data.results;
$scope.totalPages = data.data.total_pages;
console.log($scope.currentPage);
$scope.loading = false;
$routeParams.page = $scope.currentPage;
});
};
$scope.pageChanged = function(){
loadMovies();
console.log("scope: " + $scope.currentPage);
console.log("route: " + $routeParams.page);
};
loadMovies();
});
Mon service:
'use strict';
/**
* @ngdoc service
* @name cineAngularApp.serviceAjax
* @description
* # serviceAjax
* Factory in the cineAngularApp.
*/
angular.module('cineAngularApp')
.factory('serviceAjax', function serviceAjax($http) {
return{
search: function(query){
return $http.get("http://localhost:3000/search?q=" + query);
},
popular: function(page){
return $http.get("http://localhost:3000/popular?page=" + page);
}
}
});
Et ma ma vue:
<div class="movies-container" id="top">
<div class="row">
<div ng-repeat="movie in movies">
<div ng-if="$index % 3 == 0" class="clearfix"> </div>
<div class="col-md-4" style="margin-top: 5%;">
<a ng-href="#/info/{{movie.id}}"><img ng-src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}" alt="" width="200" height="300"/></a>
<a ng-href="#/info/{{movie.id}}"><h4 ng-bind="movie.title"></h4></a>
<label>Année: </label><span class="date" ng-bind="movie.release_date | date: 'yyyy' "></span></br>
<label>Notes: </label><rating ng-model="movie.votre_average" max="10" readonly="true"></rating>(<span ng-bind="movie.votre_count"></span> avis)</br>
</div>
</div>
</div>
<div class="row">
<div class="col-md-9 col-md-offset-3">
<ul uib-pagination total-items="totalPages" ng-model="currentPage" ng-change="pageChanged()" items-per-pages="20" max-size="5" boundary-links="true">
</ul>
</div>
</div>
</div>
Merci d'avance :)