I'm using Angular and d3 to create a dashboard application. Some important structural pieces are:
- A timeframe controller
- d3 directives (i.e.
d3-choroplethfor example) that are used through specific controllers. - A JSON
$httpservice that grabs data and pushes it to the individual controllers.
That's my structure so far. My question is: How should I go about implementing the timeframe functionality into the rest of my application? The value of the timeframe controller/form is stuck in it's own scope. Should I transfer the timeframe data to a global variable, and then somehow bind the variable to the JSON request service?
Here's my service:
// Service for making JSON requests
myApp.factory('requestService', function($http) {
return {
getDownloadsLineData: function() {
// Return the promise
return $http({
url: base_url + downloads,
method: "GET",
// These parameters are dynamically changed by
// a global timeframe control
params: { start: '2013-01-01',
end: '2013-02-01',
interval: 'month',
country: 'US',
location_bin: 'countries'}
})
.then(function(result) {
// Resolve the promise as the data
return result.data;
});
}
}
});
Timeframe controller:
myApp.controller('TimeframeCtrl', ['$scope',
'$cookieStore',
function ($scope, $cookieStore) {
...
Example of one d3 controller:
myApp.controller('DownloadsLineCtrl', ['$scope',
'requestService',
function($scope, requestService){
$scope.title = 'Downloads over Time';
$scope.tooltip = 'Test tooltip';
requestService.getDownloadsLineData().then(function(data) {
$scope.d3Data = data;
});
}]);