我正在使用角度来制作电子商务,而我正在设置无限滚动到产品列表页面.一切正常,但我想使用URL来设置页面,因此用户可以通过URL访问特定页面.如何在URL中设置像“pageNumber”这样的变量？比如“www.page.com/page/2/\”(我想得到2号并将其传递给商店控制员)
这是我现在的代码
(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;
};
}]);
})();
您使用$routeParams来获取$route定义中特定命名组的值.
例：
.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
});
关于你的代码,它应该看起来像这样：
(function() {
var app = angular.module('concurseirosUnidos',{templateUrl: 'partials/products-list.html'})
.when("/page/:page_number"),{
templateUrl: 'partials/page.html',// I made this up
controller: 'StoreController'
})
.otherwise({redirectTo:'/'});;
}
});
app.controller('StoreController','$routeParams',$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;
};
}]);
})();
