Страницы с угловым шаблоном

Question

Я хочу иметь сайт шаблона в AngularJs с/example/car/id, где в разных идентификаторах есть страница для разных автомобилей. В app.js я писал:

angular 
    .module('carApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/car/:id', { 
     templateUrl: 'views/car.html', 
     controller: 'CarCtrl' 
     }) 
    }); 

В Json я сделал 2 машины:

[{ 
"model": "Audi", 
"year": "1999" 
} 
{ 
"model": "BMW", 
"year": "2005" 
}] 

В car.js

angular.module('carApp') 
.controller('CarCtrl', ['$scope','$http', function($scope, $http) 
{  
    $http.get('scripts/controllers/cars.json').success (function(data){ 
    $scope.cars = data; 
}); 

}] 
); 

Где и какой код мне нужно написать, чтобы иметь шаблоны, где в примере/автомобиль/1 будут показаны подробности об Audi, а пример/автомобиль/2 покажет подробности о BMW?

Answer 1

Вы можете прочитать параметры с помощью $routeParams и поместить их в строке запроса на ваш URL или использовать эту версию на $ Http:

$http({ 
    url: user.details_path, 
    method: "GET", 
    params: {user_id: user.id} 
}); 

https://stackoverflow.com/a/13760360/20126

Answer 2

Предполагая, что вы бы иметь какое-то таблицу или список отображения автомобиля для пользователя, чтобы выбрать вы могли бы иметь что-то вроде

<div ng-controller="carCtrl"> 
    <ul ng-repeat = "car in cars"> 
     <li> <a href ="#/cars/{{car.model}}> {{car.model}} </a></li> 
    </ul>   
</div> 

Так что это создаст список автомобилей, которые пользователь может Село кт. При нажатии на ссылку он перейдет на страницу этой модели. (Обратите внимание, что я не использую идентификатор здесь, потому что вы не имеете идентификатор в вас JSON)

Answer 3

Я изменил CarCrl, чтобы выглядеть следующим образом:

angular.module('motoApp') 
.controller('CarCtrl', ['$scope','$http', '$routeParams', function($scope, $http, 
     $routeParams) {  
    $http.get('scripts/controllers/cars.json').success (function(data){ 
     $scope.car = data[$routeParams.id]; 
    }); 

}] 
); 

И изменил JSON в словарь:

{ 
"1": { 
    "model": "Audi", 
    "year": "2012", 

"2": { 
    "model": "BMW", 
    "year": "2012", 
} 
} 

и это то, чего я хотел достичь. Теперь в HTML у меня есть:

<p>{{ car.model }}</p> 
<p>{{ car.year }}</p> 

и когда я посещаю/автомобиль/1 он показывает подробную информацию о Audi и/автомобиля/2 есть BMW