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; 但无济于事。 我也通过控制器注入了服务。 我给了$ 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();
});

看Plunkr （plunker更新显示多文件）

Answer 3

试试这个，

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

但请确保您的应用只初始化一次。

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

这条线，之后，应该是，

angular.module("angularStoreApp");

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>

Angular.js服务

问题描述

4 个解决方案

解决方案1
3 已采纳 2015-07-03 22:30:41

解决方案2
1 2015-07-03 22:19:29

解决方案3
0 2015-07-03 22:04:58

解决方案4
0 2015-07-03 23:29:39

Angular.js服务

问题描述

4 个解决方案

解决方案1 3 已采纳 2015-07-03 22:30:41

解决方案2 1 2015-07-03 22:19:29

解决方案3 0 2015-07-03 22:04:58

解决方案4 0 2015-07-03 23:29:39

解决方案1
3 已采纳 2015-07-03 22:30:41

解决方案2
1 2015-07-03 22:19:29

解决方案3
0 2015-07-03 22:04:58

解决方案4
0 2015-07-03 23:29:39