web-dev-qa-db-ja.com

angular jsを使用してURLを介して変数を渡す

angularを使用してeコマースを作成し、商品リストページに無限スクロールを設定しています。すべて正常に機能しましたが、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;
    };

  }]);

})();
angularjsinfinite-loopinfinite-scrollinfinite
8
Daniel Ortiz

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

  }]);

})();
13
ryeballar