Created
October 23, 2012 12:50
-
-
Save jrmoran/3938567 to your computer and use it in GitHub Desktop.
AngularJS - basic async request
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var App = angular.module('App', []); | |
App.controller('TodoCtrl', function($scope, $http) { | |
$http.get('todos.json') | |
.then(function(res){ | |
$scope.todos = res.data; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{ "text":"learn angular", "done":true }, | |
{ "text":"build an angular app", "done":false}, | |
{ "text":"something", "done":false }, | |
{ "text":"another todo", "done":true }] |
Short, sweet, to the point. Thank you!
How to combine this three code??
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.
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
This was tremendously helpful. Thanks for posting!