Traditional Data Service
app.controller('Ctrl1', function($scope, DataFactory) { | |
// bind the controller property to the service collection | |
this.items = DataFactory.items; | |
// watch the collection for changes | |
$scope.$watch(watchSource, function(current, previous){ | |
this.items = current; | |
}); | |
function watchSource(){ | |
return DataFactory.items; | |
} | |
}); | |
app.factory('DataFactory', function($q, $timeout) { | |
var svc = {}; | |
svc.items = []; | |
svc.getDataStream = function() { | |
var fakeData = [ | |
{ id: 1, name: 'name 1' }, | |
{ id: 2, name: 'name 2' }, | |
{ id: 4, name: 'name 4' } | |
]; | |
// using $q to fake async data grab | |
return $q.when(fakeData) | |
.then(function(data) { | |
svc.items = data; | |
}); | |
}; | |
return svc; | |
}); |
app.controller('Ctrl1', function(DataFactory) { | |
// bind the controller property to the service collection | |
this.items = DataFactory.items; | |
// invoke the call to get data | |
DataFactory | |
.getDataStream() | |
.then(function() { | |
// update the controller collection property | |
this.items = DataFactory.items; | |
}.bind(this)); | |
}); | |
// sample "service" for getting data | |
app.factory('DataFactory', function($q, $timeout) { | |
var svc = {}; | |
svc.items = []; | |
svc.getDataStream = function() { | |
var fakeData = [ | |
{ id: 1, name: 'name 1' }, | |
{ id: 2, name: 'name 2' }, | |
{ id: 4, name: 'name 4' } | |
]; | |
// using $q to fake async data grab | |
return $q.when(fakeData) | |
.then(function(data) { | |
svc.items = data; | |
}); | |
}; | |
return svc; | |
}); |
app.controller('Ctrl1', function(DataFactory) { | |
// bind the controller property to the service collection | |
this.items = DataFactory.items; | |
// but wouldn't it be so much better | |
// to just call it and let it work | |
DataFactory.getDataStream(); | |
}); |
svc.getDataStream = function() { | |
return $q.when(fakeData) | |
.then(function(data) { | |
// here we are clearly reseting the data | |
// to the response of the call.. Why doesn't | |
// it just databind? | |
svc.items = data; | |
}); | |
}; |
var app = angular.module('app', []); | |
app.controller('Ctrl1', function(DataFactory) { | |
this.items = DataFactory.items; | |
DataFactory.getDataStream(); | |
}); | |
app.controller('Ctrl2', function($timeout, DataFactory) { | |
// when this eventually fires and gets *remote* data again | |
// our other controller will automatically sync up | |
// without the need for the $watch function | |
$timeout(DataFactory.getDataStream, 2000); | |
}); | |
app.factory('DataFactory', function($q) { | |
var svc = {}; | |
svc.items = []; | |
svc.getDataStream = function() { | |
var fakeData = [ | |
{ id: 1, name: 'name 1' }, | |
{ id: 2, name: 'name 2' }, | |
{ id: 4, name: 'name 4' } | |
]; | |
// using $q to fake async data grab | |
return $q.when(fakeData) | |
.then(function(data) { | |
// this is the magic | |
angular.copy(data, svc.items); | |
}); | |
}; | |
return svc; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment