在 angularJS CRUD 应用程序中管理数据的最佳方法

Question

首先，我想说英语不是我的母语，如果我不是 100% 清楚，请提前道歉。

假设我想为汽车创建一个基本的 CRUD 应用程序。 将有包含所有汽车列表的路线“/cars”。 要获取这些汽车数据，我必须调用 API，它会一次向我发送有关所有汽车的所有数据，然后显示所有汽车名称。我想我现在是对的？

我遇到的“问题”是用户点击特定汽车时。 它应该将用户重定向到路线“cars/CAR_ID”并显示该特定汽车的数据。但是如何获取这些数据？我的意思是，是的，我可以只进行 API 调用“/api/car/CAR_ID”，但是如果我已经拥有所有汽车的第一次 api 调用中所需的一切，我为什么要这样做？ 我一直在寻找每个线程，无处不在，他们总是会再次调用 api，但这对我来说是一种浪费，我无能为力。 每个人都这样做是有原因的，而我很想念它。 我的意思是，另一种方法是存储第一次调用的数据，而不是进行第二次 api 调用，我们可以从第一次调用中获取数据。

我是 Web 开发的新手，因此最好为每个页面发出请求，而不是第一次存储大量数据并在整个导航过程中使用它。 如果是这样，我可以对这个主题有更多的了解吗，感觉就像向服务器询问我已经知道的东西......

Answer 1

对部分问题的不同答案。

我的意思是，是的，我可以只调用一个 API 调用“/api/car/CAR_ID”，但是如果我已经在所有汽车的第一个 api 调用中拥有了我需要的一切，我为什么要这样做呢？

如果您没有进行第一次 api 调用会发生什么？我的意思是，我不能直接在浏览器中输入/api/car/12345 吗？ 让我们以 stackoverflow 为例，假设我为这个问题添加了书签，然后我直接打开这个页面（假设我没有缓存数据），而不通过问题列表的页面。在您的场景中，我会得到一个空白页面，因为创建者会假设我首先访问其他页面，这是不合理的（并非总是如此）。对每个特定实体进行 api 调用从一开始就避免了这样的陷阱，因为它不假设用户的浏览历史记录。

Answer 2

这是我能想到的选项。

1) 使用ui-router（我的首选）。这是一个示例路线：

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

或

2) 在您的服务中使用缓存

angular.module('carApp')
  .service('Car', function Car($http) {
    return {
      list: function() {
        return $http.get('/cars', {cache: true});
      }
    };
  });

第一次调用 Car.list() 时，它将调用 Web 服务。对 Car.list() 的后续调用将不会调用 Web 服务。在您的控制器中，您可以调用 Car.list 并找到类似于 cars.show 路线的正确汽车，或者向您的服务添加另一个可以通过 ID 查找汽车的功能。