使用angular js通过URL传递变量

Posted 2023-03-11

【中文标题】使用angular js通过URL传递变量

【英文标题】：Passing variable through URL with angular js

【发布时间】：2014-10-25 21:55:18

【问题描述】：

我正在使用 Angular 进行电子商务，并且我正在设置无限滚动到产品列表页面。一切正常，但我想使用 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;
    ;

  ]);

)(); 

【参考方案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;
    ;

  ]);

)(); 

【讨论】：

当然 =D，我只是在检查我是否没有更多问题...再次感谢您