Variable über URL mit Winkel js übergeben

Question

Ich benutze eckig, um einen E-Commerce zu machen, und ich setze einen unendlichen Scroll auf die Produktlistenseite. Alles hat gut funktioniert, aber ich möchte die URL verwenden, um die Seite festzulegen, damit der Benutzer über URL auf eine bestimmte Seite zugreifen kann. Wie setze ich eine Variable wie "pageNumber" in der URL mit angular? wie „www.page.com/page/2/"(I die Nummer 2 und gibt sie an den Speicher-Controller)

Hier ist der Code, den ich habe jetzt

(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

Sie verwenden $routeParams erhalten möchten Abrufen der Werte einer bestimmten benannten Gruppe in einer $route Definition.

REFERENCE

Beispiel:

.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 Bezug auf den Code, sollte es in etwa so aussehen:

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

    }]); 

})();