AngularJS : Fetching data from the server

21 / Sep / 2012 by raj 6 comments

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.

<!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.

[
			{
				"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. :)

Read Further on AngularJS Series

FOUND THIS USEFUL? SHARE IT

comments (6)

  1. Liscano

    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 :(

    Reply
  2. Spielman

    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

    Reply

Leave a comment - Kalkwarf Cancel reply