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

Question

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

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

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

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

Answer 1

这是我能想到的选项。

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() 时，它会调用网络服务。对 Car.list() 的后续调用将不会调用 Web 服务。在您的控制器中，您可以调用 Car.list 并找到与 cars.show 路线相似的正确汽车，或者向您的服务添加另一个可以通过 ID 找到汽车的功能。

Answer 2

您的部分问题的不同答案。

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 ?

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

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

Best way to manage datas in an angularJS CRUD app

api

optimization

crud

data-manipulation

angularjs