HTTP-Get

An example of an HTTP Get code via promise use function, using Google Maps JSON API.

by Sinh Nguyen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-controller="Controller" style="padding:50px;">
    <form class="form">
        <div class="form-group">
        <label>Address</label>
        <input type="text" ng-model="address" placeholder="Enter address here ..."/>        
        </div>
        <input type="button" class="btn btn-default" value="Get" ng-click="getData()" />
    </form>
    <hr />
    <code>
        {{data}}
    </code>
</div>

JavaScript

var myapp = angular.module('project', [])
.factory('Service', function($http) {
    return {
        get: function(url, address) {
            return $http({
                method: 'GET',
                url: url,
                params: {
                    address: address
                }
            });
        }
    };
})
.controller('Controller', function ($scope, Service) {    
    $scope.data = 'nothing yet!';
    $scope.url = 'https://sw-hcm-2.vngcloud.vn/v1/AUTH_caab399529764e80b6741fdb975ea56b/vcloudcam-ai/3rd/147/b375ae54-546e-461d-b9c6-6d666bf1366e.jgp?temp_url_sig=8d7ae397e6160c01dacb73fb2505090653f1ca64&temp_url_expires=1713344720';
    
    $scope.getData = function() {
        Service.get($scope.url, $scope.address)
        .then(function(data){
               $scope.data = data.data.results[0].geometry.location;
        });
    };
    
});