Question

我不太了解angular，我正试图掌握关于使用URL路由和状态等等的最佳实践。我有一个场景。这是一个简单的问题，但我正在使用它来处理我可以使用的内容。

假设我有两个完全独立的网页，用于显示有关福特汽车和丰田汽车的信息。当您访问这些页面时，您拥有的只是车辆ID号，所以您只需点击网址“cars.com/info/id:198273918273”即可。什么是最好的方法，使用angular.js，立即从网址中删除ID号，用它来查找汽车制作，并显示相应的html页面，所有这些都不会更改浏览器顶部显示的网址？ / p>

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

您可以使用路线templateUrl

中的功能

.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'
})

并且可以在呈现页面之前对模板进行查询，而无需将用户发送到其他网址

Angular基于url参数选择html文件

2 个答案: