AngularJS And ASP.NET MVC Movie Library Application - $Watch And $Digest Underhood - Part Six

AngularJS And ASP.NET MVC Movie Library Application - $Watch And $Digest Underhood - Part Six

Hope you have had a chance to look at the last tutorial, which talks about the technology stack and creating UI HTML pages with the module and controller and Event Binding with UI elements, as well as routing in Angular JS with partial templates.
Kindly find links here as shown below:

• ANGULARJS AND ASP.NET MVC MOVIE LIBRARY APPLICATION - PART ONE
• AngularJS And ASP.NET MVC Movie Library Application - Part Two Module,Controller,$Scope and Twitter Bootstrap
• AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements
• AngularJS And ASP.NET MVC Movie Library Application - AngularJS Routing with partial templates - Part Four
• AngularJS And ASP.NET MVC Movie Library Application - Integration Of IMDB Movie API - Part Five

Moving ahead in this article, we’ll try to understand about Watch and Digest, which play a vital role from an AngularJS perspective. In the last article, we have seen the integration of IMDB API, which was in Angular context.
First, we’ll try to use watch on a textbox, as shown in the image, given below:
As the name implies the $scope.watch() function, keeps watch on some variable and looks at their behavior. Whenever you register a watch, you need two functions as the parameters to the $watch() function:
Here is an example,

1. $scope.$watch(function() {}, 
2. function() {} 
3. ); 

Value functions -> which watches the current value of the parameter and returns.
A listener function-> the listener function acts on the value that has changed and takes an adequate action to change the content of another variable or may prompt something, as per the business need.
The first function is the value function and the second function is the listener function.
The value function should return the value which is being watched. AngularJS can then check the value returned against the value, the watch function returned the last time. In this way, AngularJS can determine, if the value has changed. Here is an example:

1. $scope.$watch('searchByTitle', function (newValue, oldValue) { } 
2. $scope.$watch('searchByTitle', function (newValue, oldValue) { } 

This example value function watches the textbox ‘searchByTitle”. If the value of this variable changes, a different value will be returned and AngularJS will call the listener function. Later on the basis of the value, being the watch listener function, performs the written logic.
Let see this implementation practically.
I’ve written the code segment in such a way, so that we can understand an actual fact easily. Kindly find a code segment, as shown below:

1. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 
3.     $scope.SearchMovieByTitle = function () { 
4.         alert("SearchMovieByTitle called with angular scope"); 
5. var title = $scope.searchByTitle; 
6.         alert(title); 
7.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=5bf94c9e-203f-4a6f-91d0-a63a59a77084&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.         }) 
11.     } 
14.     $scope.dateTime = new Date().getMinutes(); 
15. // alert('in controller');
17.     document.getElementById('btnSearch').addEventListener('click', callEventListenerfn); 
18. function callEventListenerfn(e) { 
19.         alert("SearchMovieByTitleDigest called without angular scope"); 
20. var title = $scope.searchByTitle; 
21.         alert(title); 
23.         $scope.$watch('searchByTitle', function (newValue, oldValue) { 
24.             $scope.searchByTitle = newValue; 
25.             console.log("$scope.searchByTitle value changed " + $scope.searchByTitle); 
26. // alert($scope.searchByTitle);
27.         }); 
29.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + $scope.searchByTitle + "&token=2cr22c9e-203f-4a6f-91d0-a63a59a77084&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") 
30.           .success(function (response) { 
31.               alert($scope.searchByTitle); 
32.               $scope.movies = response.data.movies; 
34.               $timeout(function () { 
35.                   $scope.$digest(); 
36.               }, 100); 
38.           }) 
39. // });
41.     } 
43. //document.getElementById("btnSearch").addEventListener('click', function () {
44. //                console.log("Seach Started");
45. //                alert("Seach Started");
46. //                $scope.dateTime = new Date().getMinutes();
47. //                $scope.$digest();
48. //            });
49. }]); 

The code above states that the watch function is written in JavaScript eventlistener and it activates as soon as you click the “Search Movie, using EventListner”.
“searchByTitle” is ng-model defined on SeachMovie.html page, which I’ve already shared in the last tutorials. Watch function will evaluate the change made into the input type. "searchByTitle" is shown above in the diagram. This Watch() function will be effective, as soon as you click on Search Movie, using EventListener.

Kindly refer to the image, shown below. As soon as I search for any movie, using button Eventlistner and change any value in textBox, it starts reflecting the changes in Console Window.

$Scope.Digest()- > As the name implies, Digest means to convert something into absorbable substances. Thus, it works in the same way in AngularJS also. If any event doesn’t appear in Digest cycle, it has to bring into Angular Digest cycle.

1. $timeout(function () { 
2. $scope.$digest(); 
3. }, 100); 

JavaScript eventlistner calls, but sometimes it doesn't update the data bindings. In our case, we are hitting IMDB API, but sometimes, it doesn’t update the $scope.movies collection because the $scope.$digest() is not called after the second button's event listener is executed. To fix it, we can add a $scope.$digest() call to the last line of the button event listener or you can also put the code in $apply function also. Primarily, an objective to put the digest code into $timeout is only because of it to send this code asynchronously.

1. $timeout(function () { 
2. $scope.$digest(); 
3. }, 100); 

Here, is the complete code for searchMovie.html and ApiMovieController, as shown below:
CodeSegment - > searchMovie.html

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" ng-controller="ApiMovieController"> 
20.     <div 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 "> 
26.                 <tr> 
27.                     <td> 
28.                         <input type="text" ng-model="searchByTitle" class="form-control" style="width: 300px;" /> 
29.                     </td> 
30.                     {{dateTime}} 
31.                     <td> 
32.                         <button type="button" ng-click="SearchMovieByTitle()" class="btn btn-info"> 
33.                             Search using Angular Scope 
34.                             <span class="glyphicon glyphicon-search"></span> 
35.                         </button> 
36.                         <br /> 
38.                     </td> 
39.                 </tr> 
40.                 <tr> 
41.                     <td></td> 
42.                     <td> 
43.                         <button type="button" id="btnSearch" class="btn btn-info"> 
44.                             Seacrh Movie Using EventListener 
45.                             <span class="glyphicon glyphicon-search"></span> 
46.                         </button> 
47.                     </td> 
48.                 </tr> 
49.                 <tr class="thead-inverse"> 
50.                     <td style="background-color: Highlight">Title</td> 
51.                     <td style="background-color: Highlight">Year of Release</td> 
52.                     <td style="background-color: Highlight">Rating</td> 
53.                     <td style="background-color: Highlight">Plot</td> 
54.                     <td style="background-color: Highlight">Actions</td> 
55.                 </tr> 
56.                 <tbody> 
57.                     <tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}"> 
58.                         <td>{{movie.title}} 
59.                         </td> 
60.                         <td>{{movie.year}} 
61.                         </td> 
62.                         <td>{{movie.rating}} 
63.                         </td> 
64.                         <td>{{movie.plot }} 
65.                         </td> 
66.                         <td></td> 
67.                     </tr> 
68.                 </tbody> 
69.             </table> 
70.         </div> 
71.     </div> 
73. </body> 
74. </html> 

Code segment for ApiMovieController is given blow:

1. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 
3.     $scope.SearchMovieByTitle = function () { 
4.         alert("SearchMovieByTitle called with angular scope"); 
5. var title = $scope.searchByTitle; 
6.         alert(title); 
7.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=2gr44c9e-203f-4a6f-91d0-o6121 &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.         }) 
11.     } 
14.     $scope.dateTime = new Date().getMinutes(); 
15.      alert('in controller'); 
17.     document.getElementById('btnSearch').addEventListener('click', callEventListenerfn); 
18. function callEventListenerfn(e) { 
19.         alert("SearchMovieByTitleDigest called without angular scope"); 
20. var title = $scope.searchByTitle; 
21.         alert(title); 
23.         $scope.$watch('searchByTitle', function (newValue, oldValue) { 
24.             $scope.searchByTitle = newValue; 
25.             console.log("$scope.searchByTitle value changed " + $scope.searchByTitle); 
26. // alert($scope.searchByTitle);
27.         }); 
31.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + $scope.searchByTitle + "&token=2gr44c9e-203f-4a6f-91d0-o6121&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") 
32.           .success(function (response) { 
33.               alert($scope.searchByTitle); 
35.               $scope.movies = response.data.movies; 
37.               $timeout(function () { 
38.                     $scope.$digest(); 
39.               }, 100); 
41.           }) 
42. // });
45.     } 
47. }]);  

Hope, it’ll help you some day. Enjoy coding.

You can download source code from here:

Download source code form here

Categories: AngularJS

$digest already in progress when calling $scope.$apply() in AngularJS

 $digest already in progress when calling $scope.$apply() in AngularJS

I was getting this error during i made call to a third-party library to access data on their servers, so I can't take advantage of $http, nor do I want to since I would have to rewrite their library to use $http.

$http.jsonp(http://api.myapifilms.com/imdb/idIMDB?title=” “).success(function (response) {
             alert($scope.searchByTitle);           
             $scope.movies = response.data.movies;

  $scope.$digest();

// If i write above $digest method directly i thrown me an error though if i put it into little diff form than it works fine.
$timeout(function () {
                   $scope.$digest();
             }, 100);

 

Reason behind this is ,$timeout function takes this execution as async request.

Thanks

Categories: AngularJS

AngularJS And ASP.NET MVC Movie Library Application - Integration Of IMDB Movie API - Part FivE

 

AngularJS And ASP.NET MVC Movie Library Application - Integration Of IMDB Movie API - Part Fiv

• ANGULARJS AND ASP.NET MVC MOVIE LIBRARY APPLICATION - PART ONE
• AngularJS And ASP.NET MVC Movie Library Application - Part Two Module,Controller,$Scope and Twitter Bootstrap
• AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements
• AngularJS And ASP.NET MVC Movie Library Application - AngularJS Routing with partial templates - Part Four

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.

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


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

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

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:

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.

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=5bf94c9e-203f-4a6f-91d0-a63a59a77084&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=5bc9e-203f-4a6f-91d0-a63a59de4222&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:

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,

• AngularJS And ASP.NET MVC Movie Library Application - Part Four AngularJS Routing with partial templates

The output will be, as depicted below:

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:

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


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

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

Categories: AngularJS , MVC

AngularJS And ASP.NET MVC Movie Library Application - Part Four- AngularJS Routing with partial templates

AngularJS And ASP.NET MVC Movie Library Application - Part Four AngularJS Routing with partial templates

Hope you got a chance to look into my last tutorials about technology stack, creating UI HTML page with Modules and Controllers, and Event Binding with UI elements. Kindly, find the links here:

• ANGULARJS AND ASP.NET MVC MOVIE LIBRARY APPLICATION - PART ONE
• AngularJS And ASP.NET MVC Movie Library Application - Part Two Module,Controller,$Scope and Twitter Bootstrap
• AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements

Moving ahead, in this article, we’ll focus on integration of movie.html page with MVC layout page. Also, we’ll implement Angular routing in that.
Let’s get our hands busy with AngularJS & ASP.NET MVC Movie Library Application - Part Four.
So far, we’ve designed the following screen shot:

For this purpose, I’ve created a few more pages so that we can implement routing easily. Kindly have a look at the image below, for reference.

So, please create other pages as well. Probably after Part 6 of Movie Library Application, I’ll share my application with you for downloading.
Open the Solution Explorer and look for _Layout.cshtml page there. You can give reference of main.js (in our case it is routing.js) file as a reference there also, so that it would be applicable for all .cshtml pages.This is because _Layout page loads first in MVC life cycle.
Routing.js file contains all controllers' code used in all html pages e.g. Movie.html, searchMovie.html and tollywood.html.
It works in such a manner that as soon as the _layout.cshtml page loads, it also loads Module along with all respective controllers defined under this JavaScript file.
Kindly, find the code below for how to bind routing.js file.

If you have noticed in the above screenshot, I’ve set the menu using bootstrap which looks like the following screen, now:

Understand ng_view: Another important factor is the usage of ng-view directive. In our angular app, we need to define ng-app directive once. Ng-view becomes the placeholder for views. Each view referred by the route is loaded in this section of the document which we have defined on _layout.cshtml. You can also define ng-view in main html file .There are a few ways to define it, as shown below. I’ve chosen <ng-view></ng-view> tag.
For my purpose, kindly refer to the above screen shot for reference and look at bottom of image.

1. <div ng-view></div>
2. <ng-view></ng-view>
3. <div class="ng-view"></div>

Kindly, find the code below for_layout.cshtml, so that you may fit into your code segment also.
Code snippet _layout.cshtml

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="utf-8" />
5. <title>@ViewBag.Title - My ASP.NET MVC Application</title>
6. <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
7. <meta name="viewport" content="width=device-width" />
8.     @Styles.Render("~/Content/css") 
9.     @Scripts.Render("~/bundles/modernizr") 
10. <script src="~/Scripts/angular.min.js"></script>
12. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
13.     @*    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>*@ 
14. <script src="~/Application/App.js"></script>
15. <script src="~/Application/Routing.js"></script>
17. </head>
18. <body>
19. <header>
20. <div class="content-wrapper">
21. <div class="float-right">
22. <section id="login">
23. </section>
24. <nav>
25. </nav>
26. </div>
27. </div>
28. </header>
29. <div id="body" ng-app="routingApp" class="float-center">
30. <nav class="navbar navbar-inverse navbar-fixed-top">
31. <div class="container-fluid">
32. <div class="navbar-header">
33. <a class="navbar-brand" href="www.dotnetpiper.com">DotnetPiper.Com</a>
34. </div>
35. <ul class="nav navbar-nav">
36. <li class="active"><a href="#/Home"><b>Home</b></a></li>
37. <li><a href="#/Movie"><b>Bollywood</b></a></li>
38. <li><a href="#/SearchMovie"><b>Seacrh Movie Globally</b></a></li>
39. <li><a href="#/Tolly"><b>Tollywood</b></a></li>
40. </ul>
41. <ul class="nav navbar-nav navbar-right">
42. <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
43. <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
44. </ul>
45. </div>
46. </nav>
48. <ng-view></ng-view>
49.         @RenderSection("featured", required: false) 
51.         @RenderBody() 
53. </div>
54.     @* <footer>
55. <div class="content-wrapper">
56. <div class="float-left">
57. <p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
58. </div>
59. </div>
60. </footer>*@ 
62.     @Scripts.Render("~/bundles/jquery") 
63.     @RenderSection("scripts", required: false) 
64. </body>
65. </html>

Add Routing in AngularJS
We’ve included a JavaScript file, routing.js, which holds the application logic. Given below is the content of routing.js. Kindly ensure that you have given the reference for route.js, as shown below:

1. /// <reference path="../Scripts/angular-route.js" />
3. var routingApp = angular.module('routingApp', ['ngRoute']); 
5. routingApp.config(['$routeProvider', function ($routeProvider) { 
6. //alert("Route Initiated");
7.     $routeProvider. 
8.         when('/Home', { templateUrl: '/Application/login.html', controller: '/Application/testController' }). 
9.         when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }). 
10.         when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }). 
11.          when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }). 
12.         otherwise({ redirectTo: '/' }); 
13. }]); 

First, use .config() method to define $routeProvider configuration. The routeProvider identifies the route, e.g., whenever there will be a string “/Movie” in route URL, it should load template "/Application/Movie.html" from partial templates. (I’m calling these .html pages as partial pages).
After implementing the Routing, it should work in a way, as depicted below. Kindly notice the URLchanging on each click.

This is the complete code for routing.js which is main app file.

1. /// <reference path="../Scripts/angular.js" />
2. /// <reference path="../Scripts/fusioncharts.js" />
3. /// <reference path="../Scripts/fusioncharts.charts.js" />
4. /// <reference path="../Scripts/angular-route.js" />
6. var routingApp = angular.module('routingApp', ['ngRoute']); 
8. routingApp.config(['$routeProvider', function ($routeProvider) { 
9. //alert("Route Initiated");
10.     $routeProvider. 
11.         when('/Home', { templateUrl: '/Application/login.html', controller: '/Application/testController' }). 
12.         when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }). 
13.         when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }). 
14.          when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }). 
15.         otherwise({ redirectTo: '/' }); 
16. }]); 
18. routingApp.controller("tollyController", function ($scope) { 
20.     $scope.tollyMessage = "Welcome to TollyWood to watch Action,Thriller and Suspence movies"; 
22. }); 
25. routingApp.controller("MovieController", ['$scope', function ($scope) { 
27.     $scope.edit = false; 
28.     $scope.message = "Welcome to DotnetPiper.com to learn Angular"; 
29.     $scope.error = false; 
30.     $scope.clear = false; 
31.     $scope.success = false; 
32. // alert("Servcie Called");
34. var movies = [ 
35.                 { title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" }, 
36.                  { title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" }, 
37.                  { title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" }, 
38.                  { title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" }, 
39.                  { title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" } 
40.     ]; 
42.     $scope.movies = movies; 
44.     $scope.AddMovie = function (movie) { 
46. if ($scope.edit == true) { 
48. var index = $scope.movies.indexOf(movie); 
49. // alert("edit Called");
50.             $scope.movies[index] = movie; 
51. //alert(movie.rating);
52.             $scope.updatedMovie = movie; 
53.             $scope.success = true; 
54.             $scope.movie = {}; 
55.         } 
56. else { 
57. var newMovie = { 
58.                 title: $scope.movie.title, 
59.                 year: $scope.movie.year, 
60.                 rating: $scope.movie.rating, 
61.                 plot: $scope.movie.plot 
62.             }; 
64.             movies.push(newMovie); 
65. // alert("Add Called");
66.         } 
67.     } 
69.     $scope.DeleteMovie = function (movie, index) { 
71.         movies.splice(index, 1); 
72. // $scope.movie = movie;
73.         $scope.updatedMovie = movie; 
74.         $scope.success = false; 
75.         $scope.clear = true; 
76.         $scope.movie = {}; 
77.         console.log(index); 
78.     } 
79.     $scope.EditMovie = function (movie, index) { 
81.         $scope.selectedRow = null;  // initialize our variable to null
82.         $scope.selectedRow = index; 
83.         $scope.movie = movie; 
84.         $scope.edit = true; 
85.     } 
86. }]); 

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

Learn WebAPi and MVC Here

Categories: AngularJS

AngularJS And ASP.NET MVC Movie Library Application - Part Three

AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements

I hope you have had a chance to look into my last tutorial. Here, I will talk about the Event binding with UI elements of Movie.html page within module and controller.

And this will the outcome after binding all control with controller’s function as depicted below:

Kindly find links here as shown below:

• ANGULARJS AND ASP.NET MVC MOVIE LIBRARY APPLICATION - PART ONE
• AngularJS And ASP.NET MVC Movie Library Application - Part Two Module,Controller,$Scope and Twitter Bootstrap

Moving ahead in this article, we’ll focus on how to bind UI controls events and link with the defined controller.
$scope plays a vital role whenever you bind the controller value with the specific view. Here, we are going to learn it. After using this, I believe that it would be a kind of ice-breaker and will ease all the further learnings. Let's get our hands dirty with AngularJS & ASP.NET MVC Movie Library Application Tutorials part three.
So far, we’ve designed the screen shot, given below:

Hope, you will have also reached up to this level. Moving ahead, let's bind the fancy bootstrap glyphicon icon into an action.
Add the ng-click event, one by one, on each respective control.There are thee HTML button controls that exist. 
First – Add button with + symol
Second – Edit button with pencil symbol
Third - Cross with * Symbol.
Kindly paste the code segment, given below, into the movie.html page.
Code segment Movie.html

1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
5. <h2>Movie Rating Portal</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="MovieController" 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 ">
27. <thead class="thead-inverse">
28. <th style="background-color: Highlight">Title</th>
29. <th style="background-color: Highlight">Year of Release</th>
30. <th style="background-color: Highlight">Rating</th>
31. <th style="background-color: Highlight">Plot</th>
32. <th style="background-color: Highlight">Actions</th>
33. </thead>
34. <tr>
35. <!-- <td>EmployeeID:</td>-->
36. <td>
37. <input type="text" ng-model="movie.title" class="form-control" />
39. </td>
40. <td>
41. <input type="text" ng-model="movie.year" class="form-control" />
42. </td>
43. <td>
44. <input type="text" ng-model="movie.rating" class="form-control" />
45. </td>
46. <td>
47. <input type="text" ng-model="movie.plot" class="form-control" />
48. </td>
49. <td>
50. <button type="button" ng-click="AddMovie(movie)" class="btn btn-primary">
51. <span class="glyphicon glyphicon-plus"></span>
52. </button>
53. </td>
54. </tr>
55. <tbody>
56. <tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}">
57. <td>{{movie.title}} 
58. </td>
59. <td>{{movie.year}} 
60. </td>
61. <td>{{movie.rating}} 
62. </td>
63. <td>{{movie.plot }} 
64. </td>
65. <td>
66. <button type="button" ng-click="EditMovie(movie,$index)" class="btn btn-warning">
67. <span class="glyphicon glyphicon-pencil"></span>
68. </button>
69. <button type="button" ng-click="DeleteMovie(movie,$index)" class="btn btn-danger">
70. <span class="glyphicon glyphicon-remove"></span>
71. </button>
72. </td>
73. </tr>
74. </tbody>
75. </table>
76. </div>
77. </div>
78. </body>
79. </html>

 

Now, we are almost done with the UI part and have created the required ng-click events on all the buttons existing on the page.
Now,  it'stime to design the controller and write the code so that  every button should work very effectively. Thus, please copy and paste the code, given below and replace it within routing.js file.

1. /// <reference path="../Scripts/angular.js" />
2. var routingApp = angular.module('routingApp', []); 
4. routingApp.controller("MovieController", ['$scope', function ($scope) { 
6.     $scope.edit = false; 
7.     $scope.message = "Welcome to DotnetPiper.com to learn Angular"; 
8.     $scope.error = false; 
9.     $scope.clear = false; 
10.     $scope.success = false; 
11. // alert("Servcie Called");
13. var movies = [ 
14.                 { title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" }, 
15.                  { title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" }, 
16.                  { title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" }, 
17.                  { title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" }, 
18.                  { title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" } 
19.     ]; 
21.     $scope.movies = movies; 
23.     $scope.AddMovie = function (movie) { 
25. if ($scope.edit == true) { 
27. var index = $scope.movies.indexOf(movie); 
28. // alert("edit Called");
29.             $scope.movies[index] = movie; 
30. //alert(movie.rating);
31.             $scope.updatedMovie = movie; 
32.             $scope.success = true; 
33.             $scope.movie = {}; 
34.         } 
35. else { 
36. var newMovie = { 
37.                 title: $scope.movie.title, 
38.                 year: $scope.movie.year, 
39.                 rating: $scope.movie.rating, 
40.                 plot: $scope.movie.plot 
41.             }; 
43.             movies.push(newMovie); 
44. // alert("Add Called");
45.         } 
46.     } 
48.     $scope.DeleteMovie = function (movie,index) { 
50.         movies.splice(index, 1); 
51. // $scope.movie = movie;
52.         $scope.updatedMovie = movie; 
53.         $scope.success = false; 
54.         $scope.clear = true; 
55.         $scope.movie = {}; 
56.         console.log(index); 
57.     } 
58.     $scope.EditMovie = function (movie, index) { 
60.         $scope.selectedRow = null;  // initialize our variable to null
61.         $scope.selectedRow = index; 
62.         $scope.movie = movie;         
63.         $scope.edit = true; 
64.     } 
65. }]); 

Run your Application now and it should perform the actions. Once you run an Application, give the path of your desired page. It should look, as given below, in the screenshot. For now, the button will be working as anticipated.

Kindly open Movie.html page and find the given below line and understand its actual fact. Please refer below the screen, given below:

There are three major cases here as shown below:
First – Add button with + symbol
Second – Edit button with pencil symbol
Third - Cross with * Symbol.

Kindly find GIF image, given below, which performs all the actions. It will help you to understand the facts.

Hope this will help you some day. Enjoy coding.

Categories: AngularJS