Why isn't my Angular.js GET request working?

Question

Why isn't my Angular.js GET request working?

201 views Asked by GlobalJim At 18 September 2024 at 08:11

My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.

When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.

Is there something missing from my code?

Is there an easier way to accomplish this?

Here is my front-end code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
    <title>winner's cat Feeder</title>
</head>
<body>
    <div ng-controller="ArduinoCtrl" class="container">
        <button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
        <button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
    </div>

</body>
</html>


<script type="text/javascript">

    function ArduinoCtrl($scope, $http)
    {
        $scope.setServo = function (setting)
        {
            var url = "http://192.168.1.79/arduino/" + setting
            $http.get(url);
        }

    }

</script>

If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.

Original Q&A

There are 2 answers

Joao Leal On 11 December 2014 at 13:40

You need to add the ng-app directive and add your controller to a module:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
    <title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
    <div ng-controller="ArduinoCtrl" class="container">
        <button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
        <button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
    </div>

</body>
</html>


<script type="text/javascript">

    function ArduinoCtrl($scope, $http)
    {
        $scope.setServo = function (setting)
        {
            var url = "http://192.168.1.79/arduino/" + setting
            $http.get(url);
        }

    }

    angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);

</script>

**sylwester** · Accepted Answer · 2014-12-11 13:49:47

Please see working demo

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

app.controller('ArduinoCtrl', function($scope, $http) {
  $scope.response = {};
  $scope.progress = false;
  $scope.setServo = function(setting) {
    $scope.progress = true;
    var url = "http://192.168.1.79/arduino/" + setting
    $http.get(url).then(sucess, error).then(function() {
      $scope.progress = false;
    });

    function sucess(response) {

      angular.copy(response, $scope.response)


    }

    function error(response) {

      angular.copy(response, $scope.response)


    }
  }


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
  <div ng-controller="ArduinoCtrl" class="container">
    <button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
    <button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>

    <p ng-show="progress">Please wait</p>
    <div ng-hide="progress">
      <hr/>
      <p>Response</p>
      <pre>{{response | json}}</pre>
    </div>
  </div>
</div>

TechQA.

Why isn't my Angular.js GET request working?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in ARDUINO

Related Questions in ARDUINO-YUN

Popular Questions

Popular Tags

Trending Questions