请求REST服务

时间:2014-12-07 19:05:45

标签: javascript angularjs

我目前处于初学者级别的javascript和angular.js框架。 我的问题是我不能让ngResource工作。

Plunker

我的代码:

JS:

var geolocationControllers = angular.module('geolocationControllers', ['ngResource']);

geolocationControllers.controller('geolocationControllers', ['$scope', '$resource',
  function($scope, $resource) {

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        $scope.$apply(function() {
          $scope.position = $resource('http://nominatim.openstreetmap.org/reverse?format=json', {}, {
            query: {
              method: 'GET',
              params: {
                lat: position.coords.latitude,
                lon: position.coords.longitude
              }
            }
          });
          console.log($scope.position);
        });
      });
    }
  }
]);

HTML:

<div class="container" ng-controller="geolocationControllers">
    <label for="location">Your location:</label>
    <input type="text" id="location" size="120" ng-model="position"/>
</div>

这输出到控制台并且也在输入元素中:

function Resource(value) {          shallowClearAndCopy(value || {}, this);        }

1 个答案:

答案 0 :(得分:1)

你可以这样做......这样可行,我在浏览器中测试过......你必须重命名你需要的部分......

<强> HTML

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>untitled</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="myController">

    <label for="location">Your location:</label><br>
    <input type="text" id="location" size="120" ng-model="positionText"/>

</body>
</html>

和Javascript

var myApp = angular.module('myApp', []);

myApp.controller('myController', function ($scope, $http) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (curPosition) {
            var curLongi = curPosition.coords.longitude;
            var curLati = curPosition.coords.latitude;

            $http.get('http://nominatim.openstreetmap.org/reverse?format=json&lat='+curLati.toString()+'&lon='+curLongi.toString()).success(function (data) {
                    alert(JSON.stringify(data));
                    $scope.positionText = data.display_name;
            });


        });
    } 
});