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

回答

相關問題