CODEWITHSUNDEEP
javascripthtmlangularjs
membersound
membersound

Reputation: 86637

How to redirect url by query parameters in angularjs?

I'm using ngRoute in angularjs to delegate different html templates, eg:

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

Problem: I want to have a common url, like localhost/my-app?myparam=Nokia.

I want to compare the myparam to a mapping table. If the param name is a phone company, I want to delegate to /phones. If it's a car company, I want to delegate to /cars, etc. You get the idea.

Also I have to rewrite the url as follows: localhost/myapp/phones?myparam=Nokia. Thereby the ngRoute would automatically catch the correct template and controller.

Question: how can I intercept the initial loading, and redirect based on the url param?

Sidenote: I cannot rewrite the routeProvider config eg by using a different plugin like angular-ui-router.

Upvotes: 3

Views: 4386

Answers (3)

Elliott
Elliott

Reputation: 2205

It sounds like you might want to take a step back and reconsider why you're trying to tackle it this way but given your constraints, your best bet may be to have a service that returns the correct URL and call it from the controller:

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

Also, you have to add the following (generic) route to the provider:

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

Upvotes: 3

kensplanet
kensplanet

Reputation: 494

If we make it a REST call like /my-app/Nokia or my-app/Samsung instead of Query params, I think we can dynamically route it in the config itself.

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

For example,

  • if the URL is /my-app/Nokia, TemplateMappingFunction(Nokia) will return partials/phone-list.html',
  • if the URL is /my-app/Nokia, TemplateMappingFunction(Nokia) will return partials/phone-list.html',
  • if the URL is /my-app/BMW, TemplateMappingFunction(BMW) will return partials/car-details.html',

Query Param approach

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

So, if the URL is localhost/my-app?myparam=Nokia, then TemplateMappingFunction('Nokia') will return 'partials/phone-list.html'

Upvotes: 0

raj
raj

Reputation: 694

I don't know if this is right solution.. But you can create a new route /myapp .. Write a controller and redirect using $location service .. After finding the query para value using $location.query() and redirect it accordingly

Upvotes: 1

Related Questions