Currently, I am working on a project using AngularJS and encountering difficulties with my services. I have developed a service that provides two functions - one to retrieve the user's current location and another to fetch an API URL. The issue lies in the fact that the API URL requires latitude and longitude coordinates. I aim to extract the current location data and inject it into the URL for data binding purposes in my view. How do I establish scope references between these services?
angular.module('myApp', [])
.controller('HomeCtrl', ['$scope', '$q', '$http', 'myService',
function($scope, $q, $http, myService) {
myService.getLocation().then(function(data) {
$scope.lat = data.coords.latitude;
$scope.long = data.coords.longitude;
console.log($scope.lat, $scope.long);
});
myService.getAirports().then(function(data) {
});
}
])
//MYSERVICE FACTORY
.factory('myService', function($http, $q, $cordovaGeolocation) {
return {
getLocation: function() {
var deferred = $q.defer();
$cordovaGeolocation.getCurrentPosition().then(function(position) {
var lat = position.coords.latitude;
console.log(lat);
deferred.resolve(position)
});
return deferred.promise;
},
getAirports: function() {
var deferred = $q.defer();
var url = 'https://api.flightstats.com/flex/airports/rest/v1/jsonp/withinRadius/' + PLACE LONGITUDE HERE + '/' + PLACE LONGITUDE HERE + '/10?appId=02a5e867&appKey=1f2075112529890985b1dd8ea0f0a419' + '&callback=JSON_CALLBACK';
var config = {
method: 'GET',
callback: 'JSON_CALLBACK'
}
$http.jsonp(url, config)
.then(function(data) {
var lat = data.data.airports[0].latitude;
deferred.resolve(data)
});
return deferred.promise;
}
}
});If you have any suggestions on simplifying my code, please feel free to share them.