2017-08-09 4 views
2

Ich versuche, einzigartige Seiten basierend auf Land anzuzeigen. Ich beziehe mich auf die Nike-Website. https://www.nike.com/sg/en_gb/. Hier hat der Benutzer die Möglichkeit, eine Region/Land auszuwählen:Routing basierend auf Land

So implementieren Sie mit Routing Param anstelle des Pfades. Ich würde gerne mit den Routing-Parametern oder einer besseren Lösung implementieren, wenn überhaupt.

Ansicht

<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> 

Ich habe getrenntes htmls für jedes Land.

-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); 
    } 
}); 
+0

Wenn ich richtig bin können Sie eine param hinzufügen, indem Sie '/: country' –

Antwort

2

Ich hoffe, dass Sie dynamisch einzelne Route benötigen alle Länder Handhabung, indem Sie templateUrl als Funktion mit :country definiert als Parameter verwenden können.

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

scheint Ihr Code funktioniert gut werden. Stellen Sie nur sicher, dass Sie alle Abhängigkeiten einbezogen und alle Ihre HTML-Tags ordnungsgemäß geschlossen haben.

var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: "main.html", 
     controller: 'CountryController' 
    }).when('/:country', { 
     templateUrl: function(params) { 
      return (params.country) + '.html'; 
     }, 
     controller: 'CountryController' 
    }).otherwise({ 
     redirectTo: '/' 
    }); 
}); 
app.controller('CountryController', function($scope, $location) { 
    $scope.RedirecttoCountry = function(path) { 
     $location.path(path); 
    } 
}); 

Arbeits Plunker mit params: https://plnkr.co/edit/hFLCyGgo91GwQhpagvAz?p=preview

+0

der link ist nicht aktualisiert ich glaube, ich sehe nicht die params –

+0

Der Link wird nur aktualisiert. Überprüfen Sie die Datei script.js – Vivz

1

templateUrl kann eine Funktion der Parameter sein, für ex .:

$routeProvider 
    .when('/:country', { 
    templateUrl: function(params) { 
     return params.country + '.html'; 
    } 
    }) 
    .when('/', { 
    template: 'default' 
    }) 
    .otherwise({ redirectTo: '/' }); 

See: https://plnkr.co/edit/rNQutPGZ5b4B0NK5g4Wz?p=preview

Verwandte Themen