How to get angular app to access backend-API

Question

So, Ive made a backend API for a todo-app Im working on, I know that http://localhost:3000/api/todo/done is working and returns two objects, looking like this:

[{"_id":"54d6485357a52fc640bb3814","text":"Hämta tårta","completed":true},{"_id":"54d648ae57a52fc640bb3815","text":"Köpa dricka till Antons kalas","completed":true}]

Ive now written a first attempt at a frontend in angular. It all runs well in node, with no errors but I do not get any todos listed in my todo-list div. Can you please advise on this?

HTML:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="../javascripts/core.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </script>
  </head>
  <body ng-controller"mainController">
    <div class="container">

          <!-- HEADER AND TODO COUNT -->
          <div class="jumbotron text-center">
              <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
          </div>

          <!-- TODO LIST -->
          <div id="todo-list" class="row">
              <div class="col-sm-4 col-sm-offset-4">

                  <!-- LOOP OVER THE TODOS IN $scope.todos -->
                  <div class="checkbox" ng-repeat="todo in todos">
                      <label>
                          <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                      </label>
                  </div>

              </div>
          </div>
  </body>
</html>

ANGULAR CODE:

var nodeTodo = angular.module('node-todo', []);

function mainController($scope, $http) {
  $scope.formData = {};

  // when landing on the page, get all todos and show them
  $http.get('/api/todo/done')
      .success(function(data) {
          $scope.todos = data;
          console.log(data);
      })
      .error(function(data) {
          console.log('Error: ' + data);
      });
}

I dont even get anything printed in the console and I dont understand why...

You should put a breakpoint on the angular code, and test if $scope.todos its getting the value — Ricardo Umpierrez
– Ricardo Umpierrez, Commented Feb 8, 2015 at 20:55
You are missing your API-Base in your http.get; you should check your network console to see if your HTTP methods return with status 200 OK. — Bricktop
– Bricktop, Commented Feb 8, 2015 at 20:59

Stubb0rn · Accepted Answer · 2015-02-08 21:33:51Z

1

Check if your angular app is correctly wired up. I don't see an ng-app directive in your html snippet and there is probably a typo in ng-contoller="mainController" (= is missing). Also your controller is not registered with module (but in this case it shouldn't make any difference). Here is JSFiddle that at least shows error message when requesting data. Hope this helps to solve your problem

answered Feb 8, 2015 at 21:33

Stubb0rn

1,40213 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andreas Over a year ago

Ive added the = now and it seems to work better, at least I get two checkboxes that match up with the number of todos in the database right now. However I dont get any text on the todo. Any tips?

Andreas Over a year ago

I also see that todos are added to scope... seems to be a problem with {{ todo.text }}

uonchiu · Accepted Answer · 2015-02-08 21:59:21Z

1

Try this in the html (note the ng-app atribute) to reference your module.

<body ng-app="node-todo">
<div class="container" ng-controller="mainController">

and then connect your controller to your app/module like this:

 var nodeTodo = angular.module('node-todo', []);

 nodeTodo.controller('mainController', 
  ['$scope', '$http', function($scope, $http){

     $scope.formData = {};

  // when landing on the page, get all todos and show them
  $http.get('/api/todo/done')
  .success(function(data) {
      $scope.todos = data;
      console.log(data);
  })
  .error(function(data) {
      console.log('Error: ' + data);
  });

}]);

Hope this helps.

edited Feb 8, 2015 at 21:59

answered Feb 8, 2015 at 21:50

uonchiu

1412 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to get angular app to access backend-API

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related