-
-
Save jrmoran/3938567 to your computer and use it in GitHub Desktop.
| var App = angular.module('App', []); | |
| App.controller('TodoCtrl', function($scope, $http) { | |
| $http.get('todos.json') | |
| .then(function(res){ | |
| $scope.todos = res.data; | |
| }); | |
| }); |
| <!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> |
| [{ "text":"learn angular", "done":true }, | |
| { "text":"build an angular app", "done":false}, | |
| { "text":"something", "done":false }, | |
| { "text":"another todo", "done":true }] |
This was tremendously helpful. Thanks for posting!
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/
hey nice post! I'm an angular newbie and I assigned myself a little test, to help me learn angular. For learning, I'm creating an open source ruby on rails application that I will post on github when I finish the initial version. It's going to be an NFL Weekly Pickem using Ruby on Rails, AngularJS, and Twitter-Bootstrap . I feel like I can learn a ton building this project. Anyways! I was able to find a nice JSON file of the entire NFL 2013 schedule. I'm trying to figure out how to parse through it, because the JSON output has so many different hashed objects, inside of hashed objects, inside of more hashed objects. https://gist.github.com/egeriis/5420789 is the JSON I am working with. I have some snippets on plnkr of me trying to creating client objects with angular (I used your example above!). http://plnkr.co/edit/ZF939uiC3qemA9zqrlc3?p=preview I'm just trying to get a good feel of parsing and creating objects. Once I get that down, I have some UI bootstrap switch sliders/pickers that I want to users to click on for their weekly picks, and later I want to add some pagenation for each weeks pickem. With Rails I'll let people create their own pickem groups and manage user / group creations inside rails. That's later though, first I need to parse through this big JSON file locally in angularjs. Any advice is much appreciated!
update:
--yikes, I spent the past 2 hrs playing with it, doing ng-repeat inside the next object, I think I got it working somewhat to what I want. I keep playing with it http://plnkr.co/edit/ZF939uiC3qemA9zqrlc3?p=preview if you ever happened to have time and look at it let me know if maybe there's a better way thanks!