Angular.js Services

这是通过使用服务而不是工厂解决的问题解决的：http://plnkr.co/edit/uh23lrXz2mI4ukvJvxws?p=preview由@Incognos提供。接受的答案是@Tomislav，他首次提到使用服务。Angular.js Services

我创建了一个控制器来处理商店的物品，它们存储像这样的（除去叠架，以节省空间，在这里）：

'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; 
    });

我卡在如何把我的数据从原来的控制器到该服务，然后注入到服务控制器再次显示的项目。要注意的是，不使用服务，数据在视图中显示得非常好。

来源

2015-07-03 Billy Purvis

不要使用工厂，创建一个总是单身的服务，并将保存您的数据：

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); 

});

因为服务是单它在整个应用一种全球性的。您可以将它注入任何控制器，并且它会记住您保存的值。

来源

2015-07-03 22:30:41 Tomislav

在此展开。服务是“新”的，然后保存相同的实例。工厂只是每次都返回函数，所以如果你愿意，你可以自己调用'new'。 – Seer

@托米斯拉夫，谢谢你。尽管如此，为了清楚起见，我需要存储数据，例如存储数量，以便稍后在另一个视图中使用此数据，例如购物车。我可以看到数据正在存储在控制器中？纠正我，如果我错了，我是新角度。 –

它存储在整个wab页面生命周期中，而不是在控制器中，而是在服务中。您可以稍后在任何其他控制器中注入该服务 – Tomislav

试试这个，

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

但要确保，你的应用程序被初始化一次。

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

这行，后来，应该是，

angular.module("angularStoreApp");

来源

2015-07-03 22:04:58

OP已经在做那件事 –

嘿，Z.a，我已经做了第一。我假设你想要我添加 var app = angular.module（“angularStoreApp”，[]）; 进入控制器？它已经在服务文件中仅被初始化一次。要注意，它们位于同一个子目录内的单独文件中。所以services.js和StoreCtrl.js是在“商店”相同的目录.. –

并不重要，它真的。你应该使用这一行一次，并最好在别的之前， angular.module（“angularStoreApp”，[]）; 从不再次使用括号。你可以做到这一点，创建控制器，服务等 angular.module（“angularStoreApp”）。控制器，工厂等 –

应用从上到下使用服务：

// 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更新，以显示多文件）

来源

2015-07-03 22:19:29 Incognos

嘿，谢谢你，我已经添加了代码到我的控制器，但它不允许任何内要加载的商店视图，该视图或任何其他视图。此外，var产品仍然被作为冗余变量抛出。 –

我编辑并将工厂转换为服务，如@tomislav所述 - 您需要发布其他代码，以便我可以进一步提供帮助。 – Incognos

你需要什么代码？ –

只需在每个消耗控制器内直接引用该服务公开的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>

来源

2015-07-03 23:29:39 OnoSendai

Angular.js Services

回答

相关问题