Hope you have had a chance to look into my last tutorial which talks about the technology stack and creating the UI html page with module and controller, Event Binding with UI elements, and Routing in Angular JS with partial templates. Kindly find the links here:

Moving ahead, in this article, we’ll focus on the integration of live movie API within an existing application.

Kindly open the given URL and register yourself. After registering, you will get a token which we’ll be using in this article to retrieve the information/data from API.

http://api.myapifilms.com/imdb

Once you register yourself, you should receive an email like the given image, with some token value.

value
Open the website with the link, shared above, and fill in the details, as shown below in the following images.

emails
emails

As soon as you click on the submit button, you should receive a response in JSON format, as given below:

response

You may also get XML response for just making amendments either in request or in format dropdown, as shown below:

request

So far so good. We are now able to use this API URL within our application.

Open you solution and find routing.js file to add a new Controller into this, as give below:

solution

  1. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
  3. $scope.SearchMovieByTitle = function () {
  5. var title = $scope.searchByTitle;
  6. alert(title);
  7. $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=5bf98789787hghjg4&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK").success(function (response) {
  8. console.log(response);
  9. $scope.movies = response.data.movies;
  10. })
  12. }]);
Kindly, put your token value in the above http request, in order to get the correct result.

Note: If you have noticed, in the above code segment, you have injected a dependency $http and $timeout. For now, only concentrate on the $http and forget about $timeout.

code

Complete code for routing.js main JavaScript file is shown below:

Code Routing.js file
  1. /// <reference path="../Scripts/angular.js" />
  2. /// <reference path="../Scripts/fusioncharts.js" />
  3. /// <reference path="../Scripts/fusioncharts.charts.js" />
  4. /// <reference path="DataService.js" />
  5. /// <reference path="../Scripts/angular-route.js" />
  7. var routingApp = angular.module('routingApp', ['ngRoute']);
  9. routingApp.directive("login", function () {
  11. var directive = {};
  13. //restrict = E, signifies that directive is Element directive
  14. directive.restrict = 'E';
  16. //template replaces the complete element with its text.
  17. directive.templateUrl = "/Application/Login.html";//"My first directive";
  19. return directive;
  21. });
  23. routingApp.config(['$routeProvider', function ($routeProvider) {
  24. //alert("Route Initiated");
  25. $routeProvider.
  26. // when('/Home', { templateUrl: '/Application/login.html', controller: 'DotnetPiperController' }).
  27. when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }).
  28. when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }).
  29. when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }).
  30. otherwise({ redirectTo: '' });
  31. }]);
  33. routingApp.controller("tollyController", function ($scope) {
  35. $scope.tollyMessage = "Welcome to TollyWood to watch Action,Thriller and Suspence movies";
  37. });
  40. routingApp.controller("MovieController", ['$scope', function ($scope) {
  42. $scope.edit = false;
  43. $scope.message = "Welcome to DotnetPiper.com to learn Angular";
  44. $scope.error = false;
  45. $scope.clear = false;
  46. $scope.success = false;
  47. // alert("Servcie Called");
  49. var movies = [
  50. { title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" },
  51. { title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" },
  52. { title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" },
  53. { title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" },
  54. { title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" }
  55. ];
  57. $scope.movies = movies;
  59. $scope.AddMovie = function (movie) {
  61. if ($scope.edit == true) {
  63. var index = $scope.movies.indexOf(movie);
  64. // alert("edit Called");
  65. $scope.movies[index] = movie;
  66. //alert(movie.rating);
  67. $scope.updatedMovie = movie;
  68. $scope.success = true;
  69. $scope.movie = {};
  70. }
  71. else {
  72. var newMovie = {
  73. title: $scope.movie.title,
  74. year: $scope.movie.year,
  75. rating: $scope.movie.rating,
  76. plot: $scope.movie.plot
  77. };
  79. movies.push(newMovie);
  80. // alert("Add Called");
  81. }
  82. }
  84. $scope.DeleteMovie = function (movie, index) {
  86. movies.splice(index, 1);
  87. // $scope.movie = movie;
  88. $scope.updatedMovie = movie;
  89. $scope.success = false;
  90. $scope.clear = true;
  91. $scope.movie = {};
  92. console.log(index);
  93. }
  94. $scope.EditMovie = function (movie, index) {
  96. $scope.selectedRow = null; // initialize our variable to null
  97. $scope.selectedRow = index;
  98. $scope.movie = movie;
  99. $scope.edit = true;
  100. }
  101. }]);
  104. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
  106. $scope.SearchMovieByTitle = function () {
  108. var title = $scope.searchByTitle;
  109. alert(title);
  110. $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=5bf5tr54-793f-4a6f-91d0-s89t59d45321&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK").success(function (response) {
  111. console.log(response);
  112. $scope.movies = response.data.movies;
  113. })
  114. }
  117. $scope.dateTime = new Date().getMinutes();
  118. // alert($scope.dateTime);
  120. document.getElementById("btnSearch").addEventListener('click', function SearchMovieByTitleDigest() {
  122. var title = $scope.searchByTitle;
  124. $scope.$watch("searchByTitle", function (newValue, oldValue) {
  125. $scope.searchByTitle = newValue;
  126. console.log("$scope.searchByTitle Called " + $scope.searchByTitle);
  127. alert($scope.searchByTitle);
  128. });
  130. //console.log(title);
  131. //alert(title);
  132. $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + $scope.searchByTitle + "&token=5bf5tr54-203f-4a6f-91d0-s89t59d45321&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK")
  133. .success(function (response) {
  135. $scope.movies = response.data.movies;
  137. $timeout(function () {
  138. $scope.$digest();
  139. }, 100);
  141. })
  142. });
  144. //document.getElementById("btnSearch").addEventListener('click', function () {
  145. // console.log("Seach Started");
  146. // alert("Seach Started");
  147. // $scope.dateTime = new Date().getMinutes();
  148. // $scope.$digest();
  149. // });
  150. }]);
We are almost done with our Controller code part. It's now turn to create the UI to meet our purpose.

Kindly open your solution and add searchMovie.html file, as shown below in the screenshot:

searchMovie

Please copy and paste the following code in searchMovie.html partial template.

Code for searchMovie.html file,
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  5. <h2>Seach Movie Using IMDB API</h2>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  9. <style>
  10. .selected
  11. {
  12. background-color: lightyellow;
  13. color: red;
  14. font-weight: bold;
  15. }
  16. </style>
  17. </head>
  19. <body ng-app="routingApp" class="jumbotron">
  20. <div ng-controller="ApiMovieController" class="container">
  22. <!--<div ng-show="success" class="alert-success">Record has been upddated for movie : {{updatedMovie.title}}</div>
  23. <div ng-show="clear" class="alert-success">Record has been deleted for movie : {{updatedMovie.title}}</div>-->
  24. <div class="row col-md-8">
  25. <table class="table table-striped ">
  29. <tr>
  30. <td>
  31. <input type="text" ng-model="searchByTitle" class="form-control" style="width: 300px;" />
  32. </td>
  33. {{dateTime}}
  34. <td>
  35. <button type="button" ng-click="SearchMovieByTitle()" class="btn btn-info">Search using Angular Scope
  36. <span class="glyphicon glyphicon-search"></span>
  37. </button>
  38. <br />
  40. </td>
  41. </tr>
  42. <tr>
  43. <td></td>
  44. <td>
  45. <button type="button" id="btnSearch" class="btn btn-info">Seacrh Movie Using EventListener
  46. <span class="glyphicon glyphicon-search"></span>
  47. </button>
  48. </td>
  49. </tr>
  50. <tr class="thead-inverse">
  51. <td style="background-color: Highlight">Title</td>
  52. <td style="background-color: Highlight">Year of Release</td>
  53. <td style="background-color: Highlight">Rating</td>
  54. <td style="background-color: Highlight">Plot</td>
  55. <td style="background-color: Highlight">Actions</td>
  56. </tr>
  57. <tbody>
  58. <tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}">
  59. <td>{{movie.title}}
  60. </td>
  61. <td>{{movie.year}}
  62. </td>
  63. <td>{{movie.rating}}
  64. </td>
  65. <td>{{movie.plot }}
  66. </td>
  67. <td></td>
  68. </tr>
  69. </tbody>
  70. </table>
  71. </div>
  72. </div>
  73. </body>
  74. </html>
Once you paste the above code segment, run an application and click on Search Movie Globally.

Note: Ensure that you had implemented the routing, as shown in the below URL,

The output will be, as depicted below:

output

Mapping of the above textbox search, using Angular Scope. Whatever value we put into the textbox, ApiMovieController reads that value using scope and passes into http request as Title, as depicted in the screenshot below:

code
Now, search for the movie as I’ve done for The Revenant and Sultan, both.

revenent
sultan
Kindly refer tothe given screen for full fledged movie search operation.

output

Hope it’ll help you some day. Enjoy Coding.