Услуги Angular.js

Question

Это было решено с использованием службы, а не фабрики, как описано на плунжере: http://plnkr.co/edit/uh23lrXz2mI4ukvJvxws?p=preview, предоставленной компанией @Incognos. Принятый ответ был @Tomislav, как он впервые упомянул об использовании сервиса.

Я создал контроллер для обработки сохраняет элементы, они хранятся как такие (удалены повторений, чтобы сэкономить место здесь):

'use strict'; 

angular.module('angularStoreApp') 
    .controller('storeCtrl', function($scope){ 
    $scope.product = { 
     items: [ 
     { 
      qty: 0, 
      stock: 5, 
      price: 99.00, 
      name: 'Almond Toe Court Shoes, Patent Black', 
      category: 'Womens Footerwear' 
     } 
     ] 
    }; 
    }); 

Мне нужно создать службу для хранения этих данных так к нему можно получить доступ с другого вида/контроллера. (Это будет последняя страница корзины). Я попытался использовать .factory, затем в контроллере $ scope.products = serviceName.items; но безрезультатно. Я также добавил эту услугу через контроллер. Мне дана ошибка инжектора: modulerr.

Чтобы уточнить, услуга я создал это то этот

var app = angular.module("angularStoreApp", []); 

app.factory("StoreService", function() { 
    var products = { 
    items: [ 
     { 
     qty: 0 
     } 
    ] 
    }; 
    return products; 
}); 

Контроллер как таковой:

'использовать строгое';

angular.module('angularStoreApp') 
     .controller('storeCtrl', function($scope, StoreService){ 
    $scope.product = StoreService.items; 
    }); 

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

Answer 1

Не используйте фабрику, создайте службу, которая всегда является одноэлементной и будет хранить ваши данные:

var app = angular.module('angularStoreApp',[]); 

app.service('StoreService',function(){ 

    var products={ 
    items:[] 
    }; 

    this.save=function(item){ 
    products.items.push(item); 
    }; 

    this.get=function(){ 

    return products; 

    }; 
}); 

Вводят его в контроллере:

app.controller('storeCtrl',function($scope,StoreService){ 

    var item={qty:0} 

    StoreService.save(item); 

    $scope.product=StoreService.get(); 

    console.log($scope.product); 

}); 

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

Answer 2

Попробуйте это,

angular.module('angularStoreApp') 
     .controller('storeCtrl', function($scope, StoreService){ 
     $scope.product = StoreService; 
     }); 

но убедитесь, ваше приложение инициализируется только один раз.

var app = angular.module("angularStoreApp", []); 

эту линию, потом, должно быть,

angular.module("angularStoreApp"); 

Answer 3

App сверху вниз с помощью службы:

// main.js 
var app = angular.module('app', []) 
.controller('buyerCtrl', function($scope, StoreService) { 
    $scope.items = StoreService.items(); 
    $scope.buyMe = function(item) { 
    StoreService.add(item); 
    }; 
}) 

.service("StoreService", function() { 
    var products = []; 
    var items = [{ 
    qty: 0, 
    stock: 5, 
    price: 99.00, 
    name: 'Almond Toe Court Shoes, Patent Black', 
    category: 'Womens Footerwear' 
    }, { 
    qty: 0, 
    stock: 5, 
    price: 99.00, 
    name: 'Black Lace Shoes, Patent Black', 
    category: 'Mens Footerwear' 
    }]; 
    this.items = function() { 
    return items; 
    }; 
    this.add = function(product) { 
    products.push(product); 
    }; 
    this.count = function() { 
    return products.length; 
    }; 
    this.cart = function() { 
    return products; 
    }; 
}) 

.controller('cartCtrl', function($scope, StoreService) { 
    $scope.cart = StoreService.cart(); 
    $scope.cartCount = StoreService.count(); 
}); 

см Plunkr (plunker обновлен, чтобы показать мульти-файл)

Answer 4

Просто сделайте прямую ссылку на открытую коллекцию item, содержащуюся в каждом из контроллеров потребления, и непосредственно манипулируйте ссылкой.

Следующий пример использует эту модель и два контроллера, чтобы продемонстрировать поведение:

var module = angular.module('myapp', []); 
 
    
 
module.service('StoreService', function(){ 
 
this.items = 
 
    [ 
 
     { 
 
      qty: 0, 
 
      stock: 5, 
 
      price: 99.00, 
 
      name: 'Almond Toe Court Shoes, Patent Black', 
 
      category: 'Womens Footerwear' 
 
     } 
 
     ] 
 
    ; 
 
}); 
 
      
 
     
 
module.controller('element1Controller', function($scope, StoreService){ 
 
    $scope.items = StoreService.items; 
 
    
 
    $scope.add = function(){ 
 
    
 
    $scope.items.push({ 
 
      qty: 2, 
 
      stock: 10, 
 
      price: 9.00, 
 
      name: 'Random Item', 
 
      category: 'Womens Footerwear' 
 
     }); 
 
       
 

 
} 
 
}); 
 

 
module.controller('element2Controller', function($scope, StoreService){ 
 
    $scope.items = StoreService.items; 
 
});

<html ng-app='myapp'> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-controller="element1Controller"> 
 
    Controller 1<br /> 
 
    {{items}} 
 
    <br /> 
 
    <button ng-click='add()'>Add Item to Cart</button> 
 
    
 
</div> 
 

 
    <br /> 
 

 
    <div ng-controller="element1Controller"> 
 
    Controller 2<br /> 
 
    {{items}} 
 
</div> 
 
</html>