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

Post a Comment

Popular posts from this blog

how to do line continuation in perl debugger for entering raw multi-line text (EOT)? -

-
i learning perl. trying in debugger define variable, here-document. not know how enter same code in perl script, in debugger. due new lines present inside eot, makes hard in interactive debugger. here small example. have script: >cat ex1.perl #!/usr/bin/perl -w $s =<<'eot'; first line second line eot print $s now run , gives expected output: >perl ex1.perl first line second line now want same in debugger. tried this: >perl -de0 loading db routines perl5db.pl version 1.39_10 db<1> $s =<<'eot';\ cont: first line\ cont: second line\ cont: eot can't find string terminator "eot" anywhere before eof @ (eval 6) [/usr/share/perl/5.18/perl5db.pl:732] line 2. @ (eval 6)[/usr/share/perl/5.18/perl5db.pl:732] line 2. eval 'no strict; ($@, $!, $^e, $,, $/, $\\, $^w) = @db::saved;package main; $^d = $^d | $db::db_stop; $s =<<\'eot\'; first line second line eot; ' called @ /usr/share/perl...
Read more

javascript - Create websocket without connecting -

-
is there way create websocket without connecting right away? far think var ws = new websocket("ws://ws.my.url.com"); creates , connects right away. i'd create socket, define callbacks, , connect once user clicks connect button. thanks no. creating websocket means you've created connection server (or started process of connecting). there no such thing creating websocket isn't connecting yet. you create object store configuration parameters , tell object connect when wanted to, though i'm not sure why that's better creating actual websocket when connect made. or create function setup work , call function later when user clicks connect button.
Read more

sharepoint - Accessing files across a shared directory using a Windows service -

-
i trying access files on shared directory (sharepoint): \\sitename\sites\path_to_doc\doc.csv so have custom application looks @ files on shared drive , when launch application going folder it's installed - c:\myapp.exe, the application can access them . when corresponding service launched services.msc same user launched executable in previous step, doesn't find files on shared directory. i guess, question is: what general differences launching application interactively double clicking versus launching executable using service , of respect windows permissions , remote shared folders?
Read more