javascript - How can I share data between controllers in an Angular app? -
i have angular app using ui router nested ui-view containers. here, left sidebar part of parent ui-view, , right content area nested inside parent ui-view:
i'm looking elegant solution sharing data between parent , child views. here considerations:
- i want avoid data becoming stale within cached angular app;
- $scope allegedly going away angular 2.0 in favor of controlleras.
- i'd reusable pattern minimize copy/paste code.
here solutions i've thought of (and pointed out downsides), i'm not super happy any:
share data via controlleras + $scope:
productcontroller:
var product = this; product.products = products.data; // array injected via resolve
producteditcontroller:
var productedit = this; productedit.product = product.data; // object injected via resolve productedit.save = function(product) { productservice.save(product); // update shared data. // downside: relies on $scope update parent. var editedproduct = _.find($scope.product, function(item) {return item._id === product._id}); $scope.product.products[$scope.product.products.indexof(editedproduct)] = editedproduct; };
productedit template:
<form ng-submit="productedit.save()">...</form>
productservice:
productservice.save = function(data) { return $http.put('http://my.api.com/products/' + data._id, data); };
share data via shared resolve data:
productcontroller:
var product = this; product.products = products.data; // array injected via resolve
producteditcontroller:
var productedit = this; productedit.products = products.data; // array injected via resolve, defined in productcontroller resolve productedit.product = product.data; // object injected via resolve productedit.save = function(product) { productservice.save(product); // update shared data. // downside: copy/paste , not reusable. var editedproduct = _.find(productedit.products, function(item) {return item._id === product._id}); productedit.products[productedit.products.indexof(editedproduct)] = editedproduct; };
productedit template:
<form ng-submit="productedit.save()">...</form>
productservice:
productservice.save = function(data) { return $http.put('http://my.api.com/products/' + data._id, data); };
share data via service:
routes:
controller: productcontroller resolve: { products: function(productsservice) { return productsservice.all(); } }
productcontroller:
var product = this; product.products = products.data; // array injected via resolve
producteditcontroller:
var productedit = this; productedit.product = product.data; // object injected via resolve productedit.save = function(product) { // service take care of updating shared data. productservice.save(product); };
productedit template:
<form ng-submit="productedit.save()">...</form>
productservice:
// shared store/cache of product data, accessible across controllers. productservice.products = null; productservice.all = function() { // downside: can result in controllers getting stale data. if (productservice.products) { return productservice.products; } var promise = $http.get('http://my.api.com/products'); promise.success(function(data) { productservice.products = data; }); return promise; }; productservice.find = function(id) { var product; if (productservice.products) { // downside: can result in controllers getting stale data. product = productservice.products; } if (!product) { product = $http.get('http://my.api.com/products/' + id); } return product; }; productservice.save = function(data) { var promise = $http.put('http://my.api.com/products/' + data._id, data); promise.success(function(data) { var editedproduct = _.find(productservice.products, function(item) {return item._id === data._id}); productservice.products[productservice.products.indexof(editedproduct)] = editedproduct; }); return promise; };
i've considered using realtime service, don't have time implement across board.
is there another, elegant solution problem?
Comments
Post a Comment