通过带角js的URL传递变量

Question

我正在使用angular来创建电子商务，并且我将无限滚动设置为产品列表页面。一切正常，但我想使用URL来设置页面，所以用户可以通过URL访问特定页面。如何在URL中设置像“pageNumber”这样的变量？像“www.page.com/page/2/"(I想要得到的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; 
    }; 

    }]); 

})(); 

Answer 1

您使用$routeParams来获取$route定义中特定命名组的值。

REFERENCE

例子：

.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', ['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; 
    }; 

    }]); 

})();