我使用的角度进行电子商务,而我设置一个无限滚动的产品列表页面。一切工作正常,但我想用URL设置页面,因此用户可以通过URL访问特定页面。我怎么样设置与棱角分明的URLPAGENUMBER变量?像www.page.com/page/2/\"(I想要得到2号,并将其传递到存储控制器)
这里的code现在我有
(函数(){VAR应用= angular.module('concurseirosUnidos',['存储指令','ngRoute']); 的app.config(函数($ routeProvider,$ locationProvider){ $ locationProvider.html5Mode(真); $ routeProvider 。当('/',{templateUrl:'谐音/产品-list.html'}) 。当(/页/ $ PAGENUMBER){ //也许我需要把这里的东西吗? }) 不然的话({redirectTo:'/'});; }}); app.controller('StoreController',['$ HTTP,$范围',函数($ HTTP,$范围){ VAR店=这一点; store.products = []; $ http.get('/应用/产品/ products.json')。成功(功能(数据){ store.products =数据; }); 如果(typeof运算页面===未定义){ VAR页面= 1; }其他{ //如果它通过URL定义页= pageNumberFromURL } $ scope.myLimit = 3 *页; $ scope.nextPage =功能(){ ++页面; //我想这个函数来实际更新的网址,并从那里得到的变量 $ scope.myLimit = 3 *页; }; }]);})();
解决方案
您使用 $ routeParams
来获得在 $路线定义。
REFERENCE
示例:
的.config(函数($ routeProvider){ $ routeProvider.when('/页/:PAGE_NUMBER',{ //你的路线详情 });}).controller(Ctrl键,功能($范围,$ routeParams){ 的console.log($ routeParams.page_number); //打印页面数});
在关系到code,它应该是这个样子:
(函数(){VAR应用= angular.module('concurseirosUnidos',['存储指令','ngRoute']); 的app.config(函数($ routeProvider,$ locationProvider){ $ locationProvider.html5Mode(真); $ routeProvider 。当('/',{templateUrl:'谐音/产品-list.html'}) 。当(/页/:PAGE_NUMBER){ templateUrl:'谐音/ page.html即可',//我做这件事 控制器:'StoreController }) 不然的话({redirectTo:'/'});; }}); app.controller('StoreController',['$ HTTP,$范围,$ routeParams',函数($ HTTP,$范围,$ routeParams){ VAR店=这一点; VAR页= $ routeParams.page_number; store.products = []; $ http.get('/应用/产品/ products.json')。成功(功能(数据){ store.products =数据; }); 如果(typeof运算页面===未定义){ VAR页面= 1; }其他{ //如果$ routeParams.page_number被定义为你实现吧! } $ scope.myLimit = 3 *页; $ scope.nextPage =功能(){ ++页面; //我想这个函数来实际更新的网址,并从那里得到的变量 $ scope.myLimit = 3 *页; }; }]);})();
I am using angular to make an e-commerce, and I'm setting an infinite scroll to the products list page. Everything worked fine, but I want to use the URL to set the page, so the user can access an specific page through URL. how do I set a variable like "pageNumber" in the URL with angular? like "www.page.com/page/2/"(I want to get the number 2 and pass it to the store controller)
Here's the code I have now
(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;
};
}]);
})();
解决方案
You use $routeParams
to get the values of a specific named group in a $route
definition.
REFERENCE
Example:
.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 relation to your code, it should look something like this:
(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;
};
}]);
})();