基于国家/地区的路由
Routing based on country
我正在尝试显示基于国家/地区的独特页面。我指的是耐克网站。
https://www.nike.com/sg/en_gb/。在这里,用户可以选择 select a region/country:
如何使用路由参数而不是路径来实现。我想使用路由参数或更好的解决方案来实现。
查看
<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>
每个国家/地区都有单独的 html。
控制器
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);
}
});
您的代码似乎运行良好。只需确保您已包含所有依赖项并正确关闭所有 HTML 标签。
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);
}
});
使用参数的工作 Plunker:https://plnkr.co/edit/hFLCyGgo91GwQhpagvAz?p=preview
我希望您需要一条动态处理所有国家/地区的路由,因为您可以将 templateUrl
用作将 :country
定义为参数的函数。
.when('/:country', {
templateUrl: function(params){
return (params.country || 'US')+'.html';
},
controller: 'CountryController'
})
templateUrl
可以是参数的函数,例如:
$routeProvider
.when('/:country', {
templateUrl: function(params) {
return params.country + '.html';
}
})
.when('/', {
template: 'default'
})
.otherwise({ redirectTo: '/' });
我正在尝试显示基于国家/地区的独特页面。我指的是耐克网站。 https://www.nike.com/sg/en_gb/。在这里,用户可以选择 select a region/country:
如何使用路由参数而不是路径来实现。我想使用路由参数或更好的解决方案来实现。
查看
<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>
每个国家/地区都有单独的 html。
控制器
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);
}
});
您的代码似乎运行良好。只需确保您已包含所有依赖项并正确关闭所有 HTML 标签。
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);
}
});
使用参数的工作 Plunker:https://plnkr.co/edit/hFLCyGgo91GwQhpagvAz?p=preview
我希望您需要一条动态处理所有国家/地区的路由,因为您可以将 templateUrl
用作将 :country
定义为参数的函数。
.when('/:country', {
templateUrl: function(params){
return (params.country || 'US')+'.html';
},
controller: 'CountryController'
})
templateUrl
可以是参数的函数,例如:
$routeProvider
.when('/:country', {
templateUrl: function(params) {
return params.country + '.html';
}
})
.when('/', {
template: 'default'
})
.otherwise({ redirectTo: '/' });