Question

我在ngRoute中使用angularjs来委派不同的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
  }]);

问题：我想要一个共同的网址，例如localhost/my-app?myparam=Nokia。

我想将myparam与映射表进行比较。如果参数名称是电话公司，我想委托给/phones。如果它是一家汽车公司，我想委托给/cars等。你明白了。

另外，我必须按如下方式重写网址：localhost/myapp/phones?myparam=Nokia。因此，ngRoute会自动捕获正确的模板和控制器。

问题：如何拦截初始加载，并根据url param重定向？

旁注：我无法重写routeProvider配置，例如使用其他插件，如angular-ui-router。

Answer 1

听起来你可能想退后一步并重新考虑为什么你会尝试以这种方式解决它，但考虑到你的限制，你最好的选择可能是让一个服务返回正确的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'
});

Answer 2

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

Answer 3

如果我们将其作为 / my-app / Nokia 或 my-app / Samsung 等REST调用而非查询参数，我认为我们可以动态地将其设置为配置本身。

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
  }]);

例如，

如果网址为 / my-app / Nokia ，则TemplateMappingFunction（诺基亚）将返回partials / phone-list.html'，
如果网址为 / my-app / Nokia ，则TemplateMappingFunction（诺基亚）将返回partials / phone-list.html'，
如果网址为 / 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
          }]);

因此，如果网址为 localhost / my-app？myparam = Nokia ，则TemplateMappingFunction（'Nokia'）将返回'partials / phone-list.html'

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

3 个答案: