如何在angularjs中通过查询参数重定向url

How to redirect url by query parameters in angularjs?

本文关键字：查询 参数 重定向 url angularjs      更新时间：2023-09-26

我在angularjs中使用ngRoute来委托不同的html模板，例如:

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/cars', {
        templateUrl: 'partials/car-detail.html',
        controller: 'CarDetailCtrl'
      });
    //many more routes
  }]);

问题:我想有一个共同的url，如localhost/my-app?myparam=Nokia。

我想将myparam与映射表进行比较。如果参数名是一个电话公司，我想委托给/phones。如果是汽车公司，我想委托/cars等等。你懂的。

我还必须重写url如下:localhost/myapp/phones?myparam=Nokia。因此，ngRoute将自动捕获正确的模板和控制器。

问题:如何拦截初始加载，并根据url参数重定向?

旁注:我不能重写routeProvider配置，例如使用不同的插件，如angular-ui-router。

听起来你可能想后退一步，重新考虑为什么你试图以这种方式解决它，但考虑到你的约束，你最好的选择可能是有一个返回正确URL的服务，并从控制器调用它:

phonecatApp.controller("trafficCtrl", function ($routeParams,trafficService,$location) {
    if ($routeParams.myparam) {
        var destination = trafficService.getDestination($routeParams.myparam);
        $location.path(destination);
    }
})
.service("trafficService", function () {
    this.getDestination = function (paramValue) {
        switch(paramValue) {
            case "Nokia":
                return "/phones";
            case "Ford":
                return "some/car/url";
            // etc...
        }
    }
});

同样，你必须添加以下(通用)路由到提供者:

$routeProvider.when("/", {
      template: '',
      controller: 'trafficController'
});

我不知道这是否是正确的解决方案。但是你可以创建一个新的路由/myapp ..写一个控制器和重定向使用$location服务。在使用$location.query()找到查询参数值并相应地重定向后

如果我们使它成为一个REST调用，如/my-app/Nokia或my-app/Samsung而不是查询参数，我认为我们可以在配置本身动态路由它。

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/my-app/:myparam', {
        templateUrl: function(params){
         return TemplateMappingFunction(params.myparam) +'.html'
    },
        controller: function(params){
         return ControllerMappingFunction(params.myparam)
    }
      })
    //many more routes
  }]);
例如,

    如果URL是/my-app/Nokia， TemplateMappingFunction(Nokia)将返回partials/phone-list.html'，如果URL是/my-app/Nokia， TemplateMappingFunction(Nokia)将返回partials/phone-list.html'，如果URL是/my-app/BMW， TemplateMappingFunction(BMW)将返回partials/car-details.html'，

查询参数方法

 phonecatApp.config(['$routeProvider',
          function($routeProvider) {
           /* Function to retrieve Query parameters*/
           function getParameterByName(name) {
                name = name.replace(/['[]/, "''[").replace(/[']]/, "'']");
                var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
                    results = regex.exec(location.search);
                return results === null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
            }
            $routeProvider.
              when('/my-app', {
                templateUrl: TemplateMappingFunction(getParameterByName('myparam'))
            },
                controller: ControllerMappingFunction(getParameterByName('myparam'))
            }
              })
            //many more routes
          }]);
所以，如果URL是localhost/my-app?myparam=Nokia，那么TemplateMappingFunction('Nokia')将返回'partials/phone-list.html'
相关文章：