Passare la variabile attraverso l'URL con js angolare

Question

Sto usando angolare per fare un e-commerce, e sto impostando uno scroll infinito alla pagina di elenco dei prodotti. Tutto ha funzionato bene, ma desidero utilizzare l'URL per impostare la pagina, in modo che l'utente possa accedere a una pagina specifica tramite URL. come faccio a impostare una variabile come "pageNumber" nell'URL con angolare? come "www.page.com/page/2/"(I vuole ottenere il numero 2 e passarlo al controller negozio)

Ecco il codice che ho adesso

(function() { 
var app = angular.module('concurseirosUnidos', ['store-directives', 'ngRoute']); 
    app.config(function($routeProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider 
    .when('/', {templateUrl: 'partials/products-list.html'}) 
    .when("/page/$pageNumber"), { 
     // probably I'd need to put something here? 
    }) 
    .otherwise({redirectTo:'/'});; 
    } 
}); 

    app.controller('StoreController', ['$http', '$scope', function($http, $scope){ 
    var store = this; 
    store.products = [];  

    $http.get('/app/products/products.json').success(function(data){ 
     store.products = data; 
    }); 

    if(typeof page === 'undefined'){ 
     var page = 1; 
    }else{ 
     //if it's defined through the url, page = pageNumberFromURL 
    } 
    $scope.myLimit = 3 * page; 

    $scope.nextPage = function() { 
     page++; // I want this function to actually update the url and get the variable from there 
     $scope.myLimit = 3 * page; 
    }; 

    }]); 

})(); 

Answer 1

si utilizza $routeParams a ottenere i valori di uno specifico gruppo con nome in una definizione $route.

REFERENCE

Esempio:

.config(function($routeProvider) { 
    $routeProvider.when('/page/:page_number', { 
    // your route details 
    }); 
}) 

.controller('Ctrl', function($scope, $routeParams) { 
    console.log($routeParams.page_number); // prints the page number 
}); 

In relazione al codice, dovrebbe essere simile a questa:

(function() { 
var app = angular.module('concurseirosUnidos', ['store-directives', 'ngRoute']); 
    app.config(function($routeProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $routeProvider 
    .when('/', {templateUrl: 'partials/products-list.html'}) 
    .when("/page/:page_number"), { 
     templateUrl: 'partials/page.html', // I made this up 
     controller: 'StoreController' 
    }) 
    .otherwise({redirectTo:'/'});; 
    } 
}); 

    app.controller('StoreController', ['$http', '$scope', '$routeParams', function($http, $scope, $routeParams){ 
    var store = this; 
    var page = $routeParams.page_number; 
    store.products = [];  

    $http.get('/app/products/products.json').success(function(data){ 
     store.products = data; 
    }); 

    if(typeof page === 'undefined'){ 
     var page = 1; 
    }else{ 
     // if $routeParams.page_number is defined to you implementation here! 
    } 

    $scope.myLimit = 3 * page; 

    $scope.nextPage = function() { 
     page++; // I want this function to actually update the url and get the variable from there 
     $scope.myLimit = 3 * page; 
    }; 

    }]); 

})();