What do you want to know about Angular JS $http request?

Question

What do you want to know about Angular JS $http request?

My goal is to send a request using $http with angular js in order to retrieve a json object from google maps.

$http.get('http://maps.googleapis.com/maps/api/geocode/json?address=' + data[ 'street' ] + ',' + data[ 'city' ] + ',Deutschland' + '&sensor=true').success(function(mapData) {
                        angular.extend($scope, mapData);
    });

I have come across information suggesting that I need to "inject" $http first. However, I am struggling to understand how this process works. I attempted the following:

angular.module('wmw', [])
.run(['$scope', '$http', function($scope, $http){
    function getTargetCords(data, $scope, $http) {
        var city = data[ 'city' ];
        return $http.get('http://maps.googleapis.com/maps/api/geocode/json?address=' + data[ 'street' ] + ',' + data[ 'city' ] + ',Deutschland' + '&sensor=true').success(function(mapData) {
                    angular.extend($scope, mapData);
        });
    }
}]);

However, when trying to use it outside of this context, I receive an error message stating that "getTargetCords is not defined." Despite attempting various solutions, I am unable to grasp how to make this work.

Furthermore, here is additional code explaining why I require this function:

var onSuccess = function(position) {
    currentLat = position.coords.latitude ;
    currentLng = position.coords.longitude;
    var thecoords = [];
    $('#filter-list').empty();
    for(i = 0; i<locations.length;i++){
            thecoords = getTargetCords(locations[i]);
            var distance = calculateDistance(currentLat, currentLng, thecoords[0], thecoords[1]);
            addItemToList(locations[i], distance);
    }   
};

// onError Callback receives a PositionError object
function onError(error) {
    alert('Aktueller Standort konnte nicht berechnet werden');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

The objective is to obtain the distance of each location from our current position.

Please keep in mind: as I have yet to finalize the angular aspect, the values of "thecoords[0]," and "thecoods[1]" are currently incorrect.

javascript angularjs

Answer 1

Answer №1

UPDATE 2

http://pastebin.com/WUuYFAnX

Incorporating AngularJS code into a legacy application involves treating the AngularJS code as a self-contained mini-application within a secure container in the existing legacy app. Direct calls to it are not permitted, but remote calls can be made.

To target the HTML element where the Controller is located, you can consider the following method (though not recommended):

Required HTML modifications: Include ng-controller and ng-app

<html ng-app="wmw">
<body ng-controller="MainCtrl" id="MainCtrlId">
   ...
</body>
</html>

Angular Code & Native JS

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

    app.controller('MainCtrl', function ($scope, $http) {

               $scope.getTargetCords = function (data) {

               $http.get(data).success(function (response) {
                    var responseData = JSON.parse(response);
                    console.log(responseData);
               });
            };
    });



function getCords() {
    var city = activeDest['city'];
    var destUrl = 'http://maps.googleapis.com/maps/api/geocode/xml?address=' + activeDest['street'] + ',' + activeDest['city'] + ',Deutschland' + '&sensor=true';

    var MyAngularScope = angular.element($("#MainCtrlId")).scope();
    //Now call your angular method.
    MyAngularScope.getTargetCords(destUrl);
}

For a detailed demonstration of this technique, refer to this JSFiddle Example.

It is highly advisable to restructure the application to operate within the Angular Ecosystem instead of resorting to the above methods.

A simple Angular setup involves separating Angular Controllers into their respective JS files and importing them in the HTML just like any other JS file.

var app = angular.module('wmw', []);
app.controller('YourCtrlName', function ($scope, $http) {

    //You can define the "scope functions" inside your controller.
    $scope.getTargetCords= function(){

          $http.get('urlToGet').success(function(response) {
               var responseData = JSON.parse(response);
               console.log(responseData); 
          });

    };
});

In the HTML, you can implement something similar to this:

<div ng-app="wmw">
  <div ng-controller="YourCtrlName">
      <button ng-click="getTargetCords()">GET DATA</button>
  </div>
</div>

You encountered the error:

getTargetCords is not defined

This issue arose from attempting to access an Angular controller method from outside the Angular Application.

Answer 2

UPDATE 2

http://pastebin.com/WUuYFAnX

Incorporating AngularJS code into a legacy application involves treating the AngularJS code as a self-contained mini-application within a secure container in the existing legacy app. Direct calls to it are not permitted, but remote calls can be made.

To target the HTML element where the Controller is located, you can consider the following method (though not recommended):

Required HTML modifications: Include ng-controller and ng-app

<html ng-app="wmw">
<body ng-controller="MainCtrl" id="MainCtrlId">
   ...
</body>
</html>

Angular Code & Native JS

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

    app.controller('MainCtrl', function ($scope, $http) {

               $scope.getTargetCords = function (data) {

               $http.get(data).success(function (response) {
                    var responseData = JSON.parse(response);
                    console.log(responseData);
               });
            };
    });



function getCords() {
    var city = activeDest['city'];
    var destUrl = 'http://maps.googleapis.com/maps/api/geocode/xml?address=' + activeDest['street'] + ',' + activeDest['city'] + ',Deutschland' + '&sensor=true';

    var MyAngularScope = angular.element($("#MainCtrlId")).scope();
    //Now call your angular method.
    MyAngularScope.getTargetCords(destUrl);
}

For a detailed demonstration of this technique, refer to this JSFiddle Example.

It is highly advisable to restructure the application to operate within the Angular Ecosystem instead of resorting to the above methods.

A simple Angular setup involves separating Angular Controllers into their respective JS files and importing them in the HTML just like any other JS file.

var app = angular.module('wmw', []);
app.controller('YourCtrlName', function ($scope, $http) {

    //You can define the "scope functions" inside your controller.
    $scope.getTargetCords= function(){

          $http.get('urlToGet').success(function(response) {
               var responseData = JSON.parse(response);
               console.log(responseData); 
          });

    };
});

In the HTML, you can implement something similar to this:

<div ng-app="wmw">
  <div ng-controller="YourCtrlName">
      <button ng-click="getTargetCords()">GET DATA</button>
  </div>
</div>

You encountered the error:

getTargetCords is not defined

This issue arose from attempting to access an Angular controller method from outside the Angular Application.

What do you want to know about Angular JS $http request?

Answer №1

Similar questions

Currently, only the initial button is functional. I am uncertain if it is due to a script issue or if there is a rule that I inadvertently

Encountering an "Error: Invalid string length" while attempting to iterate over the JavaScript object

The OrbitControls function is not able to be instantiated as a constructor

Tips for validating the input type "password"

Converting a JavaScript animation into a video through server-side processing: A step-by-step guide

Tips for retrieving the ID value of the <li> element using JavaScript and AJAX

The callback function for ajax completion fails to execute

"Discovering the referring page URL in Next.js: A Step-by-Step

Is it possible to remove individual items from a FlatList by clicking on them and updating the state?

Creating a connection to an external website through a JavaScript function within an Angular application

The complete page gets re-rendered when Nuxt child routes are used

Creating Positioning Magic with HTML Elements

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

Display the personalized list of user items on the MERN dashboard

How can an external style sheet be inserted into an iframe?

Can orbit controls be tweened in three.js?

How to make a form in PHP that can be saved?

Steer clear of wrapping ng-repeat in nested indexes for routing purposes

The element event does not trigger an update on the view

Unexpected next() error occurred