Search code examples
javascriptangularjsroutesangularjs-routing

Routing based on country

I am trying to display unique pages based on country. I am referring to the Nike website. https://www.nike.com/sg/en_gb/. Here the user has the option to select a region/country:

How to implement using Routing Param instead of the path. I would like to implement using the Routing params or a better solution if any.

View

<body ng-controller="CountryController">
    <form>
      <select name="naver" id="naver" ng-model="route.selectedRoute" ng-change="RedirecttoCountry(route.selectedRoute)">
        <option value="/" >Home</option>
        <option value="/US">US</option>
        <option value="/UK">UK</option>
        <option value="/India">India</option>
      </select>
    </form>
    <div ng-view=""></div>

I have separate htmls for each country.

Controller

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: "US.html",
            controller: 'CountryController'
        })
        .when('/UK', {
            templateUrl: "UK.html",
            controller: 'CountryController'
        })
        .when('/India', {
            templateUrl: "India.html",
            controller: 'CountryController'
        })
        .otherwise({ redirectTo: '/' });
});

app.controller('CountryController', function($scope, $location){
    $scope.RedirecttoCountry = function( path ){
        $location.path(path);
    }
});
Solution

  • I hope you need single route dynamically handling all countries, in that you could use templateUrl as function with :country defined as parameter.

    .when('/:country', {
    templateUrl: function(params){
        return (params.country || 'US')+'.html';
    },
    controller: 'CountryController'
})