Chuyển biến qua URL với js góc

Question

Tôi đang sử dụng góc để tạo thương mại điện tử và tôi đang đặt cuộn vô hạn vào trang danh sách sản phẩm. Mọi thứ hoạt động tốt, nhưng tôi muốn sử dụng URL để đặt trang, vì vậy người dùng có thể truy cập một trang cụ thể thông qua URL. làm cách nào để đặt biến như "pageNumber" trong URL có góc cạnh? như "www.page.com/page/2/"(I muốn nhận được số 2 và vượt qua nó với bộ điều khiển lưu trữ)

Dưới đây là đoạn code tôi có bây giờ

(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

Bạn sử dụng $routeParams để nhận các giá trị của một nhóm được đặt tên cụ thể theo định nghĩa $route.

REFERENCE

Ví dụ:

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

Liên quan đến mã của bạn, nó sẽ giống như thế này:

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

    }]); 

})();