Create a gist now

Instantly share code, notes, and snippets.

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