AngularJS - данные API обработки данных

Question

В настоящее время разрабатывается приложение, которое требует вытягивания данных с использованием API и выполнения следующей задачи.

В моем контроллере я втягиваю список продуктов из API, добавляю их в $ rootScope, чем цикл, чтобы отображать список всех продуктов.

При просмотре отдельного продукта, I цикл по списку и показать продукт с запрашиваемым ID в вид, как так

getProduct: function(productID) { 
      var products = $rootScope.products; 
      for (var i =0; i<products.length; i++) { 
      if (products[i].id == parseInt(productID)) { 
       return products[i]; 
       } 
      } 
     } 

Это все прекрасно работает, потому что если вы посещаете индивидуальный URL продукта без кроме сначала просматривая главную страницу списка, список продуктов недоступен, так как вызов API никогда не выполняется.

Каков наилучший способ решения этого вопроса?

Создание другого отдельного вызова API из этого представления кажется очень грязным и чрезмерно сложным, и мне было интересно, есть ли стандартный или лучший подход!

Answer 1

Я бы создал угловое обслуживание для продукта, имеющего частный массив для продуктов с геттером & setter. Это позволит вам избегать использования $ rootScope для передачи данных между контроллерами (что очень хорошо).

Затем выполните функцию, которая вызывает вызов API для каждой страницы подробных сведений о продукте. Затем вы можете передать идентификатор на страницу по URL-адресу, используя $routeParams

Поставив это все в сервис, он станет многоразовым для всех ваших контроллеров и достаточно чистым.

var myModule = angular.module('myModule', []); 
myModule.service('productService', function() { 
    var products = [1,2,3,4,5]; 
    this.addProduct = function(id){ 
     products.push(id); 
    } 

    this.getProducts = function(){ 
     return products; 
    } 

    this.getProductDetail = function(id){ 
     //$http.get(... 
    } 

}); 

Edit: пример реализации в соответствии с просьбой

// Don't forget to inject your service into your controller 
myModule.controller('myCtrl', ['productService', function (productService) { 
    // Add a product to your array 
    productService.addProduct(6); //products = [1,2,3,4,5,6] 

    // Retrieve products 
    var myProducts = productService.getProducts(); //myProducts = [1,2,3,4,5,6] 

    // You can do this a few different ways but assuming 
    // getProductDetail returns a promise from its $http call 
    productService.getProductDetail(4).then(function (productDetail) { 
     $scope.productDetails = productDetail; 
    }); 

}]); 

Answer 2

Придумал решение на основе вашего ответа (устраняя зависимость от $ rootScope действительно помогло) так маркировки ответ, как хорошо идти, но хотел поделиться тем, что я придумал, на случай, если кто-нибудь найдет это полезным!

По существу, в контроллере детали продукта, который имеет дело с отображением отдельного продукта, мы говорим, что если у нас уже есть информация о продукте в приложении, вытащите его из этого и, если мы не сделаем звонок, API.

У меня есть дополнительный сервис под названием конфигурации, которые мне нужно получить доступ к моей API в случае, если кто-то интересно, что происходит там :)

Сервис

productsApp.factory('$productService', function($q,$http,$rootScope,$cookies,$state,$configService) { 

var products = ''; 

return { 
    //Get all products 
    getProducts: function() { 
     //$http.get.... 
     //Dont forget to use $q.defer() for your promise 
    }, 
    returnProducts: function() { 
     return products; 
    }, 
    //Get specific product 
    getProduct: function(productID) { 
      for (var i =0; i<products.length; i++) { 
      if (products[i].id == parseInt(productID)) { 
       return products[i]; 
       } 
      } 
    } 
} 
}); 

Контроллер

productsApp.controller('productDetailCtrl', function($scope,$rootScope,$productService,$stateParams,$configService,$cookies) { 

var products = $productService.returnProducts(); 


if (products == '') { 
    $configService.getToken().then(function(response){ 
      $productService.getProducts().then(function(response){ 
       $scope.product=$productService.getProduct($stateParams.productID); 
      }, function(error){ 
       console.log(error); 
      }); 
     }, function(error){ 
      console.log(error); 
     }); 
} else { 
    $scope.product = $productService.getProduct($stateParams.jobID); 
}; 
});