JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<div ng-app="youtubeApp">
    <div ng-controller="searchCtrl">
        <input type="search" ng-model="term">
        <button ng-if="term" ng-click="doSearch()">Cerca {{term}}</button>
        <span ng-if="loading">loading..</span>
        <div ng-if="entries">
            <img ng-repeat="entry in entries | orderBy:'title.$t'" ng-src="{{entry.media$group.media$thumbnail[3].url}}" title="{{entry.title.$t}}">
        <div>
   </div>
</div>

JavaScript

angular.module('youtubeApp',[])
.constant('searchUrl', 'http://gdata.youtube.com/feeds/api/videos?alt=json&q=')
.factory('Youtube', function($http, $q, searchUrl){
    return {
        doSearch: function(term){
            var search = $q.defer();
            $http.get(searchUrl +  encodeURIComponent(term))
            .success(function(res){ search.resolve(res); });
            return search.promise;
        }
    }
})
.controller('searchCtrl', function($scope, Youtube){
    $scope.doSearch = function(){
        $scope.loading = true;
        Youtube.doSearch($scope.term).then(function(res){
            $scope.loading = false;
            $scope.entries = res.feed.entry
        });
    }
});