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

我在

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参数重定向

---

旁注：我无法使用不同的插件（如

angular ui router

）重写routeProvider配置，我不知道这是否是正确的解决方案。。但您可以创建一条新路线

/myapp

。。使用

$location

服务写入控制器并重定向。。在使用

$location.query（）

找到查询参数值并相应地重定向它之后

听起来您可能想后退一步，重新考虑为什么要尝试以这种方式处理它，但考虑到您的限制，您最好的选择可能是使用一个返回正确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'
});

---

如果我们使用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（诺基亚）将返回partials/phone list.html'
• 如果URL为/my app/Nokia，TemplateMappingFunction（诺基亚）将返回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（“诺基亚”）将返回“partials/phone list.html”

Hm，这是否可取？特别是从性能的角度来看？我是个新手。。所以我的知识是有限的，但我认为性能不会有太大影响，但如果您是针对特定路线重定向。您也可以在

angular.run

中编写它，但我不推荐它，因为

run

将在控制器之前为每个加载的视图运行。因此，如果打开其他不需要重定向的URL，代码将运行，但是如果每个URL用户访问需要重定向，那么U可以考虑运行，因为它将在任何控制器或指令之前加载。您可以将重定向代码保存在不同的模块中，并将其导入到原始模块中，然后在angular run中重定向它，以便在加载其他元素之前拦截url。（我猜性能不会受到影响..但您需要检查一下）我只需要在第一次访问时运行一次重定向。在我的页面导航期间，它不应该再次运行。但是这种方法会自动将

模板链接到
控制器吗？这就是我最喜欢ngroute的地方，将它们显式地链接在一起，并仅通过url路径调用它们。@membersound-是的。假设myparam是“诺基亚”。它会将用户重定向到partials/phone-list.html，此时$routeProvider会意识到这一点，并知道如何使用相应的模板和控制器，因此我必须保留我的ngRoute的
.config
，并另外使用servicecontroller方法调用这些路由？如果是，我如何确保您的控制器在评估ngRoutes之前进行拦截？此外：我是否应该返回
case“Nokia”：return“/手机”在switch语句中？正确，保留.config，然后调用服务。您不必担心ngRoute会执行任何意外的评估，因为您将首先将所有流量引导到trafficCtrl控制器，然后将它们转发到正确的路径，此时ngRoute开始工作。这是一种很好的方法，但不幸的是，我对url没有影响，因此我必须坚持按查询参数进行评估.在这种情况下，应使用上述代码（查询参数方法）进行操作。