AngularJS : Fetching data from the server

AngularJS : Fetching data from the server

Posted by: Nhan Chau | September 21, 2012
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
{
"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
}
]
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.
Source From tothenew
Read Further on AngularJS Series
Get image dimensions with ng-flow
Get a base64 encoded image using ng-flow in AngularJS
How to trigger a method with the keyboard shortcut in AngularJS
Moving a page element without affecting its scope in AngularJS
Launch Ionic app with a web or email link
Braintree and Angular.JS drop in integration
Minification safe Angular.js
AngularJS : Multiple Views, Layout Template and Routing
AngularJS: Implementing Routes And Multiple Views
AngularJS : Fetching data from the server
Building Intuitive Frontend Interfaces with AngularJS – An Overview!

Comment