Angular 根据url 参数选择html 文件
Angular choose html file based on url parameter
我对 angular 了解不多,我正在尝试了解有关使用 URL 路由和状态等的最佳实践。我有一个场景。这是一个简单的问题,但我正在使用它来了解我可用的内容。
假设我有两个完全独立的网页来显示福特汽车和丰田汽车的信息。当您访问这些页面时,您所拥有的只是汽车 ID 号,因此您只需点击 url "cars.com/info/id:198273918273"。最好的方法是什么,使用 angular.js,立即从 url 中删除 ID 号,用它来查找汽车品牌,并显示适当的 html 页面,所有这些都无需更改url 显示在浏览器顶部?
假设您正在使用 angular-ui 路由器
$stateProvider
.state('car-get', {
url:'/info/{car_id}/',
controller: ['$scope','$stateParams',function($scope,$stateParams){
var car_id = $stateParams.car_id;
// now you can get your car info
// and bind it to your template.
$scope.car = myservice.getcarinfo(car_id) //Here goes your service or your api calls to get car info
}],
templateUrl: 'path_to_detail_car_page.html',
});
的入门教程
您可以在路由模板Url 中使用函数
.when('/your_url/:car_id', {
templateUrl: function(attrs){
//Example of the login yours will be complex i guess :P
if(attrs.car_id == 1) { return 'template_ford.html' }
if(attrs.car_id == 2) { return 'template_toyota.html' }
},
controller : 'someController'
})
这样您的模板就可以在页面呈现之前进行更改,而无需将用户发送到不同的 url
我对 angular 了解不多,我正在尝试了解有关使用 URL 路由和状态等的最佳实践。我有一个场景。这是一个简单的问题,但我正在使用它来了解我可用的内容。
假设我有两个完全独立的网页来显示福特汽车和丰田汽车的信息。当您访问这些页面时,您所拥有的只是汽车 ID 号,因此您只需点击 url "cars.com/info/id:198273918273"。最好的方法是什么,使用 angular.js,立即从 url 中删除 ID 号,用它来查找汽车品牌,并显示适当的 html 页面,所有这些都无需更改url 显示在浏览器顶部?
假设您正在使用 angular-ui 路由器
$stateProvider
.state('car-get', {
url:'/info/{car_id}/',
controller: ['$scope','$stateParams',function($scope,$stateParams){
var car_id = $stateParams.car_id;
// now you can get your car info
// and bind it to your template.
$scope.car = myservice.getcarinfo(car_id) //Here goes your service or your api calls to get car info
}],
templateUrl: 'path_to_detail_car_page.html',
});
的入门教程
您可以在路由模板Url 中使用函数
.when('/your_url/:car_id', {
templateUrl: function(attrs){
//Example of the login yours will be complex i guess :P
if(attrs.car_id == 1) { return 'template_ford.html' }
if(attrs.car_id == 2) { return 'template_toyota.html' }
},
controller : 'someController'
})
这样您的模板就可以在页面呈现之前进行更改,而无需将用户发送到不同的 url