AngularJS : Fetching data from the server
In all previous blogs on AngularJS, we used hard coded data. Now, its the time to get more dynamic and play with the data fetched from the server. For this, we will use AngularJS dependency injection which injects various services into the controller. To use a service is even more simpler. We just declare the name of the service as an argument to the controller function and AngularJS makes that service available for us. To fetch data from the server, we will use $http service.
[java]
<!Doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function YoutubeController($http,$scope){
$http.get(‘ytdata.json’).success(function(ytdata) {
$scope.data = ytdata;
});
}
</script>
<style type="text/css">
li{list-style:none;float:left;padding:20px;}
a{text-decoration:none;}
</style>
</head>
<body>
<div ng-controller="YoutubeController">
<ul>
<li ng-repeat="datum in data">
<a href="http://www.youtube.com/v/{{datum.id}}">
<img ng-src="{{datum.thumbUrl}}" />
<br />Id : {{datum.id}}
<br />Views : {{datum.views}}
</a>
</li>
</ul>
</div>
</body>
</html>
[/java]
In line 7, we are using $http service of AngularJS to fetch data from a url and on success event, we assign the data fetched to our local variable using $scope.data=ytdata. Here, the data is a list of youtube videos where every video has an id, a thumbUrl and total number of views and it is in JSON format.
[javascript]
[
{
"id":"yZxrao3zou4",
"thumbUrl":"http://img.youtube.com/vi/yZxrao3zou4/default.jpg",
"views":20000
},
{
"id":"wqQ6BF50AT4",
"thumbUrl":"http://img.youtube.com/vi/wqQ6BF50AT4/default.jpg",
"views":249
},
{
"id":"_oyI0C2kBRc",
"thumbUrl":"http://img.youtube.com/vi/_oyI0C2kBRc/default.jpg",
"views":3833
},
{
"id":"ExW4FisGlYk",
"thumbUrl":"http://img.youtube.com/vi/ExW4FisGlYk/default.jpg",
"views":54355
}
]
[/javascript]
In line 20, we loop over the JSON data using ng-repeat attribute of AngularJS and create clickable thumbnail for every video and display its associated id and number of views.
In line 22, we use ng-src attribute instead of normal src attribute of image tag, so that the AngularJS expression {{datum.thumbUrl}} is evaluated correctly. If we use src, sometimes the AngularJS expression cannot be evaluated correctly and {{datum.thumbUrl}} is placed literally as image source, which is obviously wrong.
The final output looks something like :
I will be back with more on AngularJS.
Till then, Have Fun. 🙂
Read Further on AngularJS Series
- AngularJS : A “Write Less Do More” JavaScript Framework
- AngularJS : Updating a Label Dynamically with User Input
- AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
- AngularJS : Text Suggestions
- AngularJS : Sorting objects on various attributes
- AngularJS : Fetching data from the server
- AngularJS : Multiple Views, Layout Template and Routing
- AngularJS : Implementing Routes And Multiple Views
- Building Intuitive Frontend Interfaces with AngularJS
Hi there,
the example does not run. I guess the youtube access has changed.
how to get the mysql DB table values using AngularJS without using any backend programming..
Hello! Thank you for this helpful video. By the way, I notice lots of people keep on talking about iPhonezilax Secrets (do a google search), but I’m not sure if it is good. Have you tried this step by step guide called iPhonezilax Secrets? I have heard several great things about it and my buddy get his first iphone apps made without any programming experience at all with it, but he refuses to tell me 🙁
here you go Bro, John Debney-Resurrection can you check out my halo 4 gun sync 😀
I was guna hate on ur page, but wen I heard ya song dankwo trump, I was bumpin lol. good shit my nigga. keep grindin. check this dude out
There is a way to make my own web application for making online transactions with credit cards?