{"id":7844,"date":"2012-09-21T11:52:28","date_gmt":"2012-09-21T06:22:28","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=7844"},"modified":"2017-08-03T14:06:27","modified_gmt":"2017-08-03T08:36:27","slug":"angularjs-fetching-data-from-the-server","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-fetching-data-from-the-server\/","title":{"rendered":"AngularJS : Fetching data from the server"},"content":{"rendered":"

In all previous blogs<\/a> 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<\/a> 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<\/strong> service.<\/p>\n

[java]
\n&lt;!Doctype html&gt;
\n&lt;html ng-app&gt;
\n&lt;head&gt;
\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.1\/angular.min.js&quot;&gt;&lt;\/script&gt;
\n&lt;script type=&quot;text\/javascript&quot;&gt;
\n\tfunction YoutubeController($http,$scope){
\n $http.get(‘ytdata.json’).success(function(ytdata) {
\n \t\t\t\t$scope.data = ytdata;
\n \t\t});
\n\t}
\n&lt;\/script&gt;
\n&lt;style type=&quot;text\/css&quot;&gt;
\n\tli{list-style:none;float:left;padding:20px;}
\n\ta{text-decoration:none;}
\n&lt;\/style&gt;
\n&lt;\/head&gt;
\n&lt;body&gt;
\n&lt;div ng-controller=&quot;YoutubeController&quot;&gt;
\n\t&lt;ul&gt;
\n\t\t&lt;li ng-repeat=&quot;datum in data&quot;&gt;
\n\t\t\t&lt;a href=&quot;http:\/\/www.youtube.com\/v\/{{datum.id}}&quot;&gt;
\n\t\t\t\t&lt;img ng-src=&quot;{{datum.thumbUrl}}&quot; \/&gt;
\n\t\t\t\t&lt;br \/&gt;Id : {{datum.id}}
\n\t\t\t\t&lt;br \/&gt;Views : {{datum.views}}
\n\t\t\t&lt;\/a&gt;
\n\t\t&lt;\/li&gt;
\n\t&lt;\/ul&gt;
\n&lt;\/div&gt;
\n&lt;\/body&gt;
\n&lt;\/html&gt;
\n[\/java]<\/p>\n

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.<\/p>\n

[javascript]
\n[
\n\t\t\t{
\n\t\t\t\t&quot;id&quot;:&quot;yZxrao3zou4&quot;,
\n\t\t\t\t&quot;thumbUrl&quot;:&quot;http:\/\/img.youtube.com\/vi\/yZxrao3zou4\/default.jpg&quot;,
\n\t\t\t\t&quot;views&quot;:20000
\n\t\t\t},
\n\t\t\t{
\n\t\t\t\t&quot;id&quot;:&quot;wqQ6BF50AT4&quot;,
\n\t\t\t\t&quot;thumbUrl&quot;:&quot;http:\/\/img.youtube.com\/vi\/wqQ6BF50AT4\/default.jpg&quot;,
\n\t\t\t\t&quot;views&quot;:249
\n\t\t\t},
\n\t\t\t{
\n\t\t\t\t&quot;id&quot;:&quot;_oyI0C2kBRc&quot;,
\n\t\t\t\t&quot;thumbUrl&quot;:&quot;http:\/\/img.youtube.com\/vi\/_oyI0C2kBRc\/default.jpg&quot;,
\n\t\t\t\t&quot;views&quot;:3833
\n\t\t\t},
\n\t\t\t{
\n\t\t\t\t&quot;id&quot;:&quot;ExW4FisGlYk&quot;,
\n\t\t\t\t&quot;thumbUrl&quot;:&quot;http:\/\/img.youtube.com\/vi\/ExW4FisGlYk\/default.jpg&quot;,
\n\t\t\t\t&quot;views&quot;:54355
\n\t\t\t}
\n]
\n[\/javascript]<\/p>\n

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.<\/p>\n

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.<\/p>\n

The final output looks something like :<\/p>\n

I will be back with more on AngularJS.
\nTill then, Have Fun. \ud83d\ude42<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n