chrisma/data_fetching_service_callback.js

## data_fetching_service_callback.js
/*
 * Using callbacks to set scope variables (Not as nice)
 */

var app = angular.module("MyApp", []);

app.factory('sourceService', function($http, $q, $log) {
	return {
		get : function(){
			var endpoint = 'data.json';
			var deferred = $q.defer();
			$http.get(endpoint)
				.success(function (data, status, headers, config) {
					//Additional data processing, e.g. return subset of data
					$log.debug('sourceService::get', status);
					deferred.resolve(data);
				})
				.error(function(data, status, headers, config){
					$log.error('sourceService::get', status)
					deferred.reject("Couldn't fetch sources.");
				});
			// Return the promise to the controller
			return deferred.promise;
		}
	}
});

app.controller('SourceCtrl',function($scope, sourceService){
	// the service returns a promise, so we have to assign
	// $scope.lines in a callback
	sourceService.get().then(
		// success
		function(data){
			console.log('controller response', data);
			$scope.lines = data;
		},
		// error
		function(reason){
			console.log(reason);
		}
	);
});

## data_fetching_service_clean.js
/*
 * Return an empty array (instead of a promise) and fill it with data as it arrives.
 * This is close to AngularJS' $resource paradigm and seems cleaner.
 *
 * "Having an empty object results in no rendering, once the data arrives from the server
 * then the object is populated with the data and the view automatically re-renders itself"
 * https://docs.angularjs.org/api/ngResource/service/$resource
 */

var app = angular.module("MyApp", []);

app.factory('SourceService', function ($http, $log) {
	function query() {
		var result = [];
		var endpoint = 'data.json';
		$http.get(endpoint)
			.success(function (data, status, headers, config) {
				$log.debug('SourceService::query', status, 'len:', data.length);
				data.forEach(function (item) {
						result.push(item);
				});
			})
			.error(function(data, status, headers, config){
				$log.error('SourceService::query', status, config);
			});
		return result;
	}

	return {
			query: query
	};
});

app.controller('SourceCtrl',function($scope, SourceService){
	$scope.lines = SourceService.query();
});

## myapp.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
		<script src="script.js"></script>
	</head>
	<body ng-app="MyApp">
		<div ng-controller="SourceCtrl">
			<ul ng-repeat="line in lines">
				<li>{{line.number}} {{line.text}}</li>
			</ul>
		</div>
	</body>
</html>
	/*
	* Using callbacks to set scope variables (Not as nice)
	*/

	var app = angular.module("MyApp", []);

	app.factory('sourceService', function($http, $q, $log) {
	return {
	get : function(){
	var endpoint = 'data.json';
	var deferred = $q.defer();
	$http.get(endpoint)
	.success(function (data, status, headers, config) {
	//Additional data processing, e.g. return subset of data
	$log.debug('sourceService::get', status);
	deferred.resolve(data);
	})
	.error(function(data, status, headers, config){
	$log.error('sourceService::get', status)
	deferred.reject("Couldn't fetch sources.");
	});
	// Return the promise to the controller
	return deferred.promise;
	}
	}
	});

	app.controller('SourceCtrl',function($scope, sourceService){
	// the service returns a promise, so we have to assign
	// $scope.lines in a callback
	sourceService.get().then(
	// success
	function(data){
	console.log('controller response', data);
	$scope.lines = data;
	},
	// error
	function(reason){
	console.log(reason);
	}
	);
	});
	/*
	* Return an empty array (instead of a promise) and fill it with data as it arrives.
	* This is close to AngularJS' $resource paradigm and seems cleaner.
	*
	* "Having an empty object results in no rendering, once the data arrives from the server
	* then the object is populated with the data and the view automatically re-renders itself"
	* https://docs.angularjs.org/api/ngResource/service/$resource
	*/

	var app = angular.module("MyApp", []);

	app.factory('SourceService', function ($http, $log) {
	function query() {
	var result = [];
	var endpoint = 'data.json';
	$http.get(endpoint)
	.success(function (data, status, headers, config) {
	$log.debug('SourceService::query', status, 'len:', data.length);
	data.forEach(function (item) {
	result.push(item);
	});
	})
	.error(function(data, status, headers, config){
	$log.error('SourceService::query', status, config);
	});
	return result;
	}

	return {
	query: query
	};
	});

	app.controller('SourceCtrl',function($scope, SourceService){
	$scope.lines = SourceService.query();
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body ng-app="MyApp">
	<div ng-controller="SourceCtrl">
	<ul ng-repeat="line in lines">
	<li>{{line.number}} {{line.text}}</li>
	</ul>
	</div>
	</body>
	</html>