Skip to content

Instantly share code, notes, and snippets.

@jrmoran

jrmoran/app.js

Created October 23, 2012 12:50
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save jrmoran/3938567 to your computer and use it in GitHub Desktop.
Save jrmoran/3938567 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - basic async request
Raw
app.js
var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
$http.get('todos.json')
.then(function(res){
$scope.todos = res.data;
});
});
Raw
index.html
<!doctype html>
<html ng-app="App" >
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos">
{{todo.text}} - <em>{{todo.done}}</em>
</li>
</ul>
</body>
</html>
Raw
todos.json
[{ "text":"learn angular", "done":true },
{ "text":"build an angular app", "done":false},
{ "text":"something", "done":false },
{ "text":"another todo", "done":true }]
@guicuton
Copy link

guicuton commented Jul 2, 2018

I'm not quite sure if this is async request because if you put this on webserver and try to execute another action, the server will not respond your command until the $http request done and the then(res) get some results.

To work with a real async request with angular, its important read about promises and $q to handle async calls.
Here a link with a beautiful and simple digest about this - https://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment