w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home API's

AngularJS: Instant YouTube video search API V3 Version tutorial

W3TWEAKS by W3TWEAKS
October 1, 2019
in API's

In my previous article “instant YouTube video search” tutorial, I just used plain JavaScript with JQuery. In this tutorial I used AngularJS for YouTube instant video search with pagination option and API I used YouTube V3 API.End of the tutorial demo and download option is available for your reference.

You might also like

Login the App using facebook oauth in PHP

Login the App using facebook oauth in PHP

November 29, 2019
Tutorial about how to Create Jobs portal using Indeed API

Tutorial about how to Create Jobs portal using Indeed API

October 1, 2019

Let’s start the tutorial Now.

Step 1: Create the folder structure and files of the project.

Lots of way to organize the file and folder structure in AngularJS project. I used one of the way to organize the folder and Files.

Find the screenshot of the angularJS project folder structure and files

angularJS folder structure and files

Step2: Include all dependent files in index.html

I used bootstrap for styling and for listing the videos. Used angularJS and Angularjs UI router. Include main.js, controller and directives

<!DOCTYPE html> <html>      <head>         <title>Angularjs instant youtube video search API</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, initial-scale=1">         <link rel="stylesheet" href="css/bootstrap.min.css">     </head>     <body ng-app="instantYoutubeSearch" ng-controller="youtubeController">         <div ui-view></div>         <script src="lib/angular.min.js"></script>         <script src="lib/angular-ui-router.min.js"></script>         <script src="js/main.js"></script>         <script src="js/controller/controller.js"></script>         <script src="js/directives/searchBox.js"></script>         <script src="js/directives/pagination.js"></script>     </body> </html>

Step3: Initiate the angular module “instantYoutubeSearch” and route to home page using angular UI router.

“instantYoutubeSearch” is the app name where we have to use it in the template “ng-app=’ instantYoutubeSearch’”. ‘$urlRouterProvider.otherwise(“home”)’ will route to home page.

Past the below code to “main.js” file.

var app = angular.module('instantYoutubeSearch', ['ui.router']);  app.config(function($stateProvider,$urlRouterProvider){     $urlRouterProvider.otherwise("home");     $stateProvider.state("home",{         url:"/home",         templateUrl:"templates/home.html"     }); });

Step4: Create AngularJS controller

Create controller as “youtubeController” and past the below code inside the controller.js

app.controller('youtubeController', function($scope,$http,$filter) {     $scope.youtubeData = [];     $scope.nextPage = "";     $scope.youtubeSearchText = "";     $scope.getYoutubeData = function(searchText){         $http.get('https://www.googleapis.com/youtube/v3/search', {             params: {                 key: "API_KEY",                 type: 'video',                 maxResults: '12',                 pageToken: $scope.nextPage ? $scope.nextPage : '',                 part: 'id,snippet',                 fields: 'items/id,items/snippet/title,items/snippet/description,items/snippet/thumbnails/default,items/snippet/channelTitle,nextPageToken,prevPageToken',                 q: searchText             }         }).success( function (data) {             if (data.items.length === 0) {                 $scope.youtubeData = 'No results were found!';             }             $scope.youtubeSearchText = searchText;             $scope.youtubeData = data.items;             $scope.nextPageToken = data.nextPageToken;             $scope.prevPageToken = data.prevPageToken;         });     };      $scope.checkDataLength = function(data){         return (data.length >=1);     };      $scope.callNextPageFn = function(nextPage){         $scope.nextPage = nextPage;         $scope.getYoutubeData($scope.youtubeSearchText);     }; });

Note: replace the API_KEY to your youtube API Key

Step5: Create the custom directive pagination.js and searchBox.js

Pagination directive is used to navigate to next set of searched videos. Open the pagination.js and past the below code inside it.

(function(){     app.directive("pagination",function(){         return{             templateUrl:"templates/pagination.html",             link:function(scope,elem,attrs){                 console.log(scope);             }         }     }); })();

searchBox.js directive is used for instant search functionality. When user types the search word, it will connect the controller and call the YouTube API v3 version to fetch the videos and display it in the page. Use the below code and past it in searchBox.js

(function(){     app.directive("searchBox",function(){         return{             templateUrl:"templates/searchBox.html",             link:function(scope,elem,attrs){                 console.log(scope);             }         }     }); })();

Step6: Create the templates for instant search box, video list and navigation (YouTube pagination)

Open the searchBox.html and past the below code in it.

<div class="well">  	 <form class="form"> 	  	<input type="search" ng-model="youtubeSearchText" ng-change="getYoutubeData(youtubeSearchText)" name="hyv-search" id="hyv-search" placeholder="Search..." class="ui-autocomplete-input form-control input-lg" autocomplete="off"> 	</form> </div>

Open the pagination.html and past the below code in it.

<div style="text-align:center;" ng-if="checkDataLength(youtubeData)">     <input type="hidden" id="pageToken" value="">     <div class="btn-group" role="group" aria-label="...">       <button type="button" ng-show="prevPageToken" id="pageTokenPrev" ng-click="callNextPageFn(prevPageToken)" class="btn btn-default">Prev</button>       <button type="button" id="pageTokenNext" ng-click="callNextPageFn(nextPageToken)" class="btn btn-default">Next</button>     </div> </div>

Open the home.html and past the below code in it.

<search-box></search-box> <pagination></pagination> <div ng-if="checkDataLength(youtubeData)">     <div class="panel-body">       <div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="data in youtubeData">         <div class="well well-sm media">             <a class="thumbnail pull-left" target="_block" href="https://www.youtube.com/watch?v={{data.id.videoId}}">                 <img alt="{{data.snippet.title}}" src="{{data.snippet.thumbnails.default.url}}" width="120" height="90">             </a>             <div class="media-body">                 <a target="_block" href="https://www.youtube.com/watch?v={{data.id.videoId}}">{{data.snippet.title}}</a>                 <p>By <a target="_block" href="https://www.youtube.com/channel/{{data.snippet.channelId}}"><span class="label label-info">{{data.snippet.channelTitle}}</span></a></p>             </div>         </div>        </div>     </div> </div>

Instant YouTube video search API Demo Screenshot

Angularjs instant youtube video search API demo

Download Demo

Tags: angular jsAngularjsAPIdemoexampleinstantsearchtutorialtutorialsV3versionsvideovideosYouTube
Previous Post

Best Javascript Frameworks: The top most popular javascript frameworks for Mobile and Web apps

Next Post

Chapter 3: List all HTML common file extensions of web pages

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Login the App using facebook oauth in PHP

Login the App using facebook oauth in PHP

by W3TWEAKS
November 29, 2019

In my old articles, we see integration about how to login the apps using social networking in PHP like Twitter,...

Tutorial about how to Create Jobs portal using Indeed API

Tutorial about how to Create Jobs portal using Indeed API

by W3TWEAKS
October 1, 2019

This tutorial will explain how to create the job seraching portal using Indeed API with advanced search and autocomplete for...

Create Facebook Messenger Chatbot using Node Js

Create Facebook Messenger Chatbot using Node Js

by Urmil Shah
October 1, 2019

Facebook launched the Messenger Platform, giving developers the ability to create bots that could have a conversation with people on...

Twitter oAuth login api using php

Twitter oAuth login api using php

by Vetrivel Pandian
November 13, 2019

Everyone have account in social networking like twitter, facebook, linkedin etc. In previous article we see google and linkedin login....

Next Post

Chapter 3: List all HTML common file extensions of web pages

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools