Angular 根据url 参数选择html 文件

Question

我对 angular 了解不多，我正在尝试了解有关使用 URL 路由和状态等的最佳实践。我有一个场景。这是一个简单的问题，但我正在使用它来了解我可用的内容。

假设我有两个完全独立的网页来显示福特汽车和丰田汽车的信息。当您访问这些页面时，您所拥有的只是汽车 ID 号，因此您只需点击 url "cars.com/info/id:198273918273"。最好的方法是什么，使用 angular.js，立即从 url 中删除 ID 号，用它来查找汽车品牌，并显示适当的 html 页面，所有这些都无需更改url 显示在浏览器顶部？

Answer 1

假设您正在使用 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',
});

这是 Angular-ui Router

的入门教程

Answer 2

您可以在路由模板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 参数选择html 文件

Angular choose html file based on url parameter

angularjs

url-routing