Best way to manage datas in an angularJS CRUD app - angularjs

Question

First, i want to say that English is not my native language, so sorry by advance if i'm not 100% clear.
So let say i want to create a basic CRUD app for cars.
There would be the route "/cars" with the list of all cars.
To get those cars data, i would have to make a call to the API, which will send me all the data about all cars at once, and then display all the cars name. I think i'm right for now ?
The "problem" i have is when the user click on a specific car.
It should redirect the user to the route "cars/CAR_ID" and display this specific car's data. But how to get those data ? I mean, yes i could just make an API call "/api/car/CAR_ID", but why would i do that if i already have everything i need in the first api call with all the cars ?
I've been looking every thread, everywhere and they always make another api call, but it feel like a waste to me, i cant help it.
There got to be a reason why everyone does that and i'm missing it.
I mean, the other way would be to store the first call's data and instead of making the second api call, we could just fetch the data from the first call.
I'm new to web development so it may be better to make a request for every page than store a big set of data the first time and work with it all along the navigation.
If so, can i have some more insight on the subject, it feels like asking to the server something i already know...

Answer 1

A different answer to part of your question.
I mean, yes i could just make an API call "/api/car/CAR_ID", but why would i do that if i already have everything i need in the first api call with all the cars ?
What would happen if you didn't make the first api call? I mean, could't I directly type in my browser /api/car/12345?
Let's consider stackoverflow as an example, let's say I bookmark this question, and later on I open this page (lets assume I have no cached data) directly without going through the page with the questions list. In your scenario I would get a blank page because the creator would assume that I visit some other page first, which is unresonable (not always). Making an api call for each particular entity saves as from such a pitfall from the start because it doesn't assume anything about the browsing history of the user.

Answer 2

Here are the options I can think of.
1) Use ui-router (my preferred option). Here's an example route:
angular.module('carApp')
.config(function ($stateProvider) {
$stateProvider
.state('cars', {
url: '/cars',
templateUrl: 'app/cars/views/index.html',
controller: 'CarsCtrl',
resolve: {
cars : ['Car', function(Car) {
return Car.list();
}]
}
})
.state('cars.show', {
url: '/{carId}',
views: {
"#" : {
templateUrl: 'app/cars/views/show.html',
controller: 'CarCtrl'
}
},
resolve: { // the cars from the parent route (cars) will be injected into this route
car: ['$stateParams', 'cars', function($stateParams, cars) {
// not hitting the web service, find our car using lodash
return _.find(cars, {_id: $stateParams.carId});
}]
}
})
OR
2) Use caching in your services
angular.module('carApp')
.service('Car', function Car($http) {
return {
list: function() {
return $http.get('/cars', {cache: true});
}
};
});
The first time you call Car.list() it will call the web service. Subsequent calls to Car.list() will not call the web service. In your controller you can either call Car.list and find the correct car similar to the cars.show route or add another function to your service that can find a car by ID.