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 }]
@dcaponi
Copy link

dcaponi commented Jul 1, 2016

Short, sweet, to the point. Thank you!

@rashmivsharan
Copy link

How to combine this three code??

@idbytes
Copy link

idbytes commented Jan 28, 2017

These all are already connected by controller name and json file name, only instead of todos.json inside get full path of the file should be given.

@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