Angular.js服务

Question

这是通过使用服务来解决的，而不是使用柱塞上描述的工厂：@Incognos提供的http://plnkr.co/edit/uh23lrXz2mI4ukvJvxws?p=preview。被接受的回答是@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中使用，但没有效果。我也通过控制器注射了服务。给我一个$injector: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

使用服务从上到下的应用程序：

// 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();
});

参见普朗克 (柱塞更新以显示多文件)

Answer 3

尝尝这个,

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

但是要确保你的应用程序只初始化了一次。

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

这条线，后来，应该是，

angular.module("angularStoreApp");