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:

screenshot

i'm looking elegant solution sharing data between parent , child views. here considerations:

  1. i want avoid data becoming stale within cached angular app;
  2. $scope allegedly going away angular 2.0 in favor of controlleras.
  3. i'd reusable pattern minimize copy/paste code.

here solutions i've thought of (and pointed out downsides), i'm not super happy any:

  1. 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); }; 
  2. 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); }; 
  3. 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

Popular posts from this blog

android - Gradle sync Error:Configuration with name 'default' not found -

java - Andrioid studio start fail: Fatal error initializing 'null' -

html - jQuery UI Sortable - Remove placeholder after item is dropped -