Factorising AngularJS - How to properly use a factory to request and update data represent data -


i have been struggling figure out 'angular' way of working using factories represent ajax data (i lot of sharing between controllers using config). have done extensive research , of answers seem fall in 2 categories:

  1. use factory represent data, in controller fetch data , update factory:

{not intended actual runable angular}

var app = angular.module('main', []) app.factory('data', function($http){     var data = []     return data }) app.controller('cntrl', [$scope, $http, data]){     $scope.data = data     $http.get('/data').success(         function(idata){             $scope.data = idata     ) } 
  1. use factory represent http request promise , assign data $scope

    var app = angular.module('main', []) app.factory('data', function ($http, $q){     var factory = {};     factory.getdata = function(){         var defer = $q.defer();         $http.get('/data').success(function(idata) {             defer.resolve(idata);         })         return defer.promise;     }     return factory; }); app.controller('cntrl', [$scope, data]){     $scope.data = []     data.getdata().then(function(idata) { $scope.data = idata }); } 

i have several issues this, in first category factory looks mega lame , not adding value , each controller needs have code manipulate factory. second controller, factory complicated , doesn't store data (for sharing between controllers), represents long winded way write http.get

my question this: how can use factory represent data , manage manipulation of data in clean way? this:

var app = angular.module('main',[]) app.factory('data', function($http){      var factory = {}      factory.data = []      factory.initialise = function(){          $http.get('/data').success(               function(data){                    factory.data = data               }          )      }      return factory }) app.controller('cntrla', [$scope, data]) {     $scope.data = data.data     $data.initialise() } app.controller('cntrlb', [$scope, data]) {     $scope.data = data.data } 

i working on project similar issue. ended doing using service repository of data. instead of initialize function getting fresh data each time, getting fresh data if data repository empty or getfresh flag tripped (manual override). way each controller can call same function data , manipulate controller needs without tampering original data.

var app = angular.module('main',[])  app.factory('dataservice', function($http, $q){      var factory = {}      factory.data = []      factory.getfresh = false       factory.initialise = function(){          var deferred = $q.defer()          if(factory.data.length===0 || factory.getfresh) {              $http.get('/data').success(function(data){                       factory.data = data                       deferred.resolve(data)              })          }          else{              deferred.resolve(factory.data)          }          return deferred.promise      }       return factory })  app.controller('cntrla', [$scope, dataservice]) {     $scope.data = []     dataservice.initialise().then(function(data){        $scope.data = data     } }  app.controller('cntrlb', [$scope, dataservice]) {     $scope.data = []     dataservice.initialise().then(function(data){        $scope.data = data     } } 

Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -