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:
- 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 ) } 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
Post a Comment