通过与角度JS URL传递变量

问题描述

我使用的角度进行电子商务，而我设置一个无限滚动的产品列表页面。一切工作正常，但我想用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 来获得在 $路线定义。

<一个href=\"https://docs.angularjs.org/api/ngRoute/provider/$routeProvider\">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;
    };

  }]);

})();

这篇关于通过与角度JS URL传递变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！