AngularJS Directive - YouTube DATA API example

Developer
Fabio Biondi
Size
2,309 Kb
Views
24,288
  1. AngularJS Directive - YouTube DATA API example Previews
  2. AngularJS Directive - YouTube DATA API example HTML Codes
  3. AngularJS Directive - YouTube DATA API example JS Codes

How do I make an angularjs directive - youtube data api example?

What is a angularjs directive - youtube data api example? How do you make a angularjs directive - youtube data api example? This script and codes were developed by Fabio Biondi on 13 October 2022, Thursday.

AngularJS Directive - YouTube DATA API example Previews
IQ Test

AngularJS Directive - YouTube DATA API example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Directive - YouTube DATA API example</title>
</head>
<body> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> </head>
<body class="jumbotron" ng-app="myApp"> <h3>AngularJS Directive - YouTube DATA API example </h3> <div ng-controller="MyCtrl"> <input type="text" ng-model="search" class="form-control" placeholder="Search on YouTube"> <youtube-list search="search"></youtube-list> </div>
</body>
<!-- TEMPLATE FOR YOUTUBE LIST DIRECTIVE -->
<script type="text/ng-template" id="youtube-list.tpl.html"> <div>	<div class="media list-group-item" ng-repeat="item in entries"> <a class="media-left" ng-href="{{item.link[0].href}}" target="_blank"> <img ng-src="{{item.media$group.media$thumbnail[0].url}}"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> {{item.media$group.media$description.$t}} </div>	</div>
</div>
</script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Directive - YouTube DATA API example - Script Codes JS Codes

angular.module('myApp', [])
.controller('MyCtrl', function($scope){	// Empty
})
.directive('youtubeList', function($http, $timeout){	return {	restrict: 'E',	scope: {	search: '='	},	templateUrl: 'youtube-list.tpl.html',	link: function($scope, iElm, iAttrs, controller) {	var timer ;	var timerDelay = 500;	// Watch 'search' updates	$scope.$watch('search', function(newVal, oldVal) {	// Remove previous timers	$timeout.cancel(timer);	// Avoid too many multiple YouTube requests	timer = $timeout(function() {	if (newVal) {	// Ottieni video tramite YouTube API	var url = 'https://gdata.youtube.com/feeds/api/videos?q=';	url += newVal ;	url += ' &start-index=21&max-results=10&v=2&alt=json';	$http.get(url)	.success(function(data) { $scope.entries = data.feed.entry;	});	}	}, timerDelay); }, true);	}	};
});
AngularJS Directive - YouTube DATA API example - Script Codes
AngularJS Directive - YouTube DATA API example - Script Codes
Home Page Home
Developer Fabio Biondi
Username fabiobiondi
Uploaded October 13, 2022
Rating 3
Size 2,309 Kb
Views 24,288
Do you need developer help for AngularJS Directive - YouTube DATA API example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fabio Biondi (fabiobiondi) Script Codes
Name
AngularJS 1.2.x - FullScreen Directive
AngularJS Form Validation
FlexBox - Grid 2x2
Realtime todo-list in AngularJS and Firebase in 20 lines
Responsive DOM elements distribution with D3 and Scales
FlexBox - Grid 2 rows with different columns
Resizable directive in AngularJS and jQueryUI
D3.js Multi-Foci Force layout animated example
AngularJS - Day 1 - Boilerplate
D3 Pack Layout with transitions and tooltips
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!