Angular template pages

Question

I want to have template site in AngularJs with /example/car/id where in different ids is a page for different cars . In app.js i wrote :

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

In Json i made 2 cars:

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

In car.js

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

}]
);

Where and what code I need to write to have templates where in example/car/1 will show details about Audi and example/car/2 will show details about BMW ?

You should include an Id in the JSON for each car if you want to use id in the url. Otherwise I would suggest using model. To go on the page jsut use the link — krs8785, Nov 05 '14 at 15:57
and then in html how can i get it ? car[{{id}}].name and the angular will know that if its example/car/1 the id is 1 and read details from the first object ? or i need to do some more magic ? — mateusz-c, Nov 05 '14 at 16:29

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You can read the param using $routeParams and put them as a query string to your URL or use this version on $http :

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

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

edited May 23 '17 at 10:25

Community

1
1

answered Nov 05 '14 at 15:49

Amr Elgarhy

66,568
69
184
301

score 1 · Answer 2 · answered Nov 05 '14 at 16:38

1

Assuming you would have some sort of table or list displaying the car for the user to select you could have something like

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

So this will create a list of cars that the user can select. On clicking on the link it will go to page on that model. (Note I am not using id here because you dont have id in you json)

answered Nov 05 '14 at 16:38

krs8785

1,097
2
14
24

Ok , thanks that helped a lot . I added also ids in Json and just last question how i can write about the car no.1 in html: /car/1 so on that page there will be its shown model and years ? {{cars.model}} {{ cars[id].model }} or what , because it two don't work – mateusz-c Nov 05 '14 at 16:45

score 0 · Answer 3 · answered Nov 06 '14 at 13:57

I've changed the CarCrl to look like this :

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];
    });

}]
);

And changed the JSON to dictionary :

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

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

and that is what i wanted to achive. Now in html i have :

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

and when i visit /car/1 it shows details about Audi and in /car/2 there is BMW

Angular template pages

3 Answers3