Last active
March 24, 2016 20:41
-
-
Save justinobney/3d9df40f64a7a40c4908 to your computer and use it in GitHub Desktop.
Traditional Data Service
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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