How can I use HTML5 geolocation in angularjs
You can use ngGeolocation
. It is simple and does the job.
angular.module('appName', ['ngGeolocation'])
.controller('appCtrl', function($scope, $geolocation) {
$geolocation.getCurrentPosition().then(function(position) {
console.log(position, 'current position');
});
});
I'd suggest abstracting this into a service so your controller doesn't have a dependency on window.navigator, and to avoid the unnecessary use of $scope.$apply(). Here's what I'm using in my project:
angular.module('app', []).factory('geolocationSvc', ['$q', '$window', function ($q, $window) {
'use strict';
function getCurrentPosition() {
var deferred = $q.defer();
if (!$window.navigator.geolocation) {
deferred.reject('Geolocation not supported.');
} else {
$window.navigator.geolocation.getCurrentPosition(
function (position) {
deferred.resolve(position);
},
function (err) {
deferred.reject(err);
});
}
return deferred.promise;
}
return {
getCurrentPosition: getCurrentPosition
};
}]);
Then I consume it in my controller like this:
function captureUserLocation() {
geolocationSvc.getCurrentPosition().then(onUserLocationFound);
}
you can do something
myApp.controller('fooCtrl', function($scope){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.position = position;
});
});
}
})
you need to do $scope.$apply to trigger the digest cycle when the geolocation arrives and to update all the watchers.