Usage of Enums in typescript

Usage of Enums in typescript

Declaration of enum in TypeScript as given below:

export enum  Category {Cricket,Tennis,GOLF,Badminton}

and in required .ts file import like a module as given below:

import {Category} from './enums'

Note : enums is another ts file, Kindly refer an image below for enums.ts file

Categories: TypeScript

Developing Book My Seat Application In AngularJS And ASP.NET - WebAPI Methods - Part Two

Developing Book My Seat Application In AngularJS And ASP.NET - WebAPI Methods - Part Two

Here, I’ve merely thought to write my thoughts about hands-on Angular. This is my first article which tells you how to get your hands dirty with AngularJS & ASP.NET WEBAPI and SQL Server BookMySeat Application Tutorials.

• BOOKMYSEAT APPLICATION ANGULAR JS ASP.NET WEBAPI AND SQL SERVER 2012 : PART ONE

This is the technology stack for this BookMySeat library application, as shown below:

In the first article, I shared the technology and other brief information about components used. In this article, will look into WebApi creation and route to configure that.
This is an initial look at the WebAPI controller defined in Solution Explorer as depicted below:

If you open this file, you will have around 6 methods which have generic names to perform the operations and easy to understand.These WebAPI methods are given below:

The complete code for all APIs is given below.

1. public class BookMySeatAPIController : ApiController 
2.     { 
3. //
4. // GET: /BookMySeatAPI/
5.         SqlConnection objConnection = new SqlConnection(); 
6. public void SqlConnection() 
7.         { 
8.             objConnection.Dispose(); 
9.             objConnection.ConnectionString = "server=.;database=BookMySeat;uid=sa;pwd=Tpg@1234;"; 
10.             objConnection.Open(); 
11.         } 
13.         [HttpGet] 
14. public int[] GetSeatCount([FromUri] int slot) 
15.         { 
16. try
17.             { 
19.                 SqlConnection(); 
20.                 SqlCommand SqlCommand = new SqlCommand("sp_GetMySeat", objConnection); 
21.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
22.                 SqlCommand.Parameters.AddWithValue("@timeslotid", slot); 
23.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
24.                 da.SelectCommand = SqlCommand; 
25.                 DataSet ds = new DataSet(); 
26.                 da.Fill(ds); 
27. int[] result = new int[ds.Tables[0].Rows.Count]; 
28. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
29.                 { 
30.                     result[i] = Convert.ToInt16(ds.Tables[0].Rows[i][0].ToString()); 
31.                 } 
32. return result; 
33.             } 
34. finally
35.             { 
36.                 objConnection.Close(); 
37.                 objConnection.Dispose(); 
39.             } 
40.         } 
44.         [HttpPost] 
45.         [ActionName("SeatBook")] 
46. public int[] PostBookSeat(BookSeat objBookSeat) 
47.         { 
48. try
49.             { 
50.                 SqlConnection(); 
51.                 SqlCommand SqlCommand = new SqlCommand("sp_BookMySeat", objConnection); 
52.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
53.                 SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName); 
54.                 SqlCommand.Parameters.AddWithValue("@TimeSlot", objBookSeat.TimeSlot); 
55.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objBookSeat.SeatNo); 
56.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
57.                 da.SelectCommand = SqlCommand; 
58.                 DataSet ds = new DataSet(); 
59.                 da.Fill(ds); 
60. int[] result = new int[ds.Tables[0].Rows.Count]; 
61. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
62.                 { 
63.                     result[i] = Convert.ToInt16(ds.Tables[0].Rows[i][0].ToString()); 
64.                 } 
65. return result; 
66.             } 
67. finally
68.             { 
69.                 objConnection.Close(); 
70.                 objConnection.Dispose(); 
72.             } 
73.         } 
75.         [HttpPost] 
76.         [ActionName("ValidateUser")] 
77. public string ValidateUser(ValidateUser objValidateUser) 
78.         { 
79. try
80.             { 
81.                 SqlConnection(); 
82.                 SqlCommand SqlCommand = new SqlCommand("ValidateUser", objConnection); 
83.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
84.                 SqlCommand.Parameters.AddWithValue("@UserName", objValidateUser.UserName); 
85.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
86.                 da.SelectCommand = SqlCommand; 
87.                 DataSet ds = new DataSet(); 
88.                 da.Fill(ds); 
89. return ds.Tables[0].Rows[0][0].ToString(); 
90.             } 
91. finally
92.             { 
93.                 objConnection.Close(); 
94.                 objConnection.Dispose(); 
95.             } 
96.         } 
97.         [HttpPost] 
98.         [ActionName("SeatDetail")] 
99. public string GetSeatDetail(GetSeatDetail objGetSeatDetail) 
100.         { 
101. try
102.             { 
103.                 SqlConnection(); 
104.                 SqlCommand SqlCommand = new SqlCommand("sp_GetSeatDetail", objConnection); 
105.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
106. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);
107.                 SqlCommand.Parameters.AddWithValue("@TimeSlot", objGetSeatDetail.TimeSlot); 
108.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objGetSeatDetail.SeatNo); 
109.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
110.                 da.SelectCommand = SqlCommand; 
111.                 DataSet ds = new DataSet(); 
112.                 da.Fill(ds); 
113. return ds.Tables[0].Rows[0][0].ToString(); 
114.             } 
115. finally
116.             { 
117.                 objConnection.Close(); 
118.                 objConnection.Dispose(); 
120.             } 
121.         } 
122.         [HttpPost] 
123.         [ActionName("DeleteSeat")] 
124. public string DeleteSeat(DeleteSeat objDeleteSeat) 
125.         { 
126. try
127.             { 
128.                 SqlConnection(); 
129.                 SqlCommand SqlCommand = new SqlCommand("sp_DeleteSeat", objConnection); 
130.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
131. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);              
132.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objDeleteSeat.SeatNo); 
133.                 SqlCommand.Parameters.AddWithValue("@SlotNo", objDeleteSeat.TimeSlot); 
134.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
135.                 da.SelectCommand = SqlCommand; 
136.                 DataSet ds = new DataSet(); 
137.                 da.Fill(ds); 
138. return ds.Tables[0].Rows[0][0].ToString(); 
139.             } 
140. finally
141.             { 
142.                 objConnection.Close(); 
143.                 objConnection.Dispose(); 
145.             } 
146.         } 
148.         [HttpGet] 
150. public List<ShowBookSeat> ShowBookSeat() 
151.         { 
152. try
153.             { 
154.                 SqlConnection(); 
155.                   List<ShowBookSeat> list = new List<ShowBookSeat>();  
156.                 SqlCommand SqlCommand = new SqlCommand("sp_ShowBookDetail", objConnection); 
157.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
158. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);              
159. //SqlCommand.Parameters.AddWithValue("@UserName", objDeleteSeat.SeatNo);
160. //SqlCommand.Parameters.AddWithValue("@SlotNo", objDeleteSeat.TimeSlot);
161.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
162.                 da.SelectCommand = SqlCommand; 
163.                 DataSet ds = new DataSet(); 
164.                 da.Fill(ds); 
165. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
166.                 { 
167.                     ShowBookSeat ShowBookSeat = new ShowBookSeat(); 
168.                     ShowBookSeat.UserName = (ds.Tables[0].Rows[i]["username"]).ToString(); 
169.                     ShowBookSeat.Date =Convert.ToDateTime(ds.Tables[0].Rows[i]["currentday"]); 
170.                     ShowBookSeat.TimeSlot = Convert.ToInt32(ds.Tables[0].Rows[i]["timeslot"]); 
171.                     ShowBookSeat.SeatNo = Convert.ToInt32(ds.Tables[0].Rows[i]["seatno"]); 
172.                     list.Add(ShowBookSeat); 
173.                 } 
174. return list;  
175.             } 
176. finally
177.             { 
178.                 objConnection.Close(); 
179.                 objConnection.Dispose(); 
181.             } 
182.         } 
184.     } 

Code segment for WebApiConfig under App_start folder is given below.

1. public static class WebApiConfig 
2.     { 
3. public static void Register(HttpConfiguration config) 
4.         { 
5.             config.Routes.MapHttpRoute( 
6.                 name: "DefaultApi", 
7.                 routeTemplate: "api/{controller}/{id}", 
8.                 defaults: new { id = RouteParameter.Optional } 
9.             ); 
10.             config.Routes.MapHttpRoute( 
11.                name: "seatbook", 
12.                routeTemplate: "api/seat/{controller}/{action}/{id}", 
13.                defaults: new { id = RouteParameter.Optional } 
14.            ); 
15.             config.Routes.MapHttpRoute( 
16.                name: "seatDetail", 
17.                routeTemplate: "api/seatdetail/{controller}/{action}/{id}", 
18.                defaults: new { id = RouteParameter.Optional } 
19.            ); 
20.             config.Routes.MapHttpRoute( 
21.                name: "ValidateUser", 
22.                routeTemplate: "api/ValidateUser/{controller}/{action}/{id}", 
23.                defaults: new { id = RouteParameter.Optional } 
24.            ); 
25.             config.Routes.MapHttpRoute( 
26.                name: "DeleteSeat", 
27.                routeTemplate: "api/DeleteSeat/{controller}/{action}/{id}", 
28.                defaults: new { id = RouteParameter.Optional } 
29.            ); 
30.         } 
31.     } 

The application which we are about to build consists almost all of the above defined keywords and the initial look of the application is as shown below.

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

Categories: AngularJS , MVC , WCF and WebAPI

BOOKMYSEAT APPLICATION Angular Js asp.net webapi and sql server 2012 : part one

BOOKMYSEAT APPLICATION AngularJS  Asp.Net Webapi and Sql Server 2012

Here, I’ve thought to write my thoughts about hands-on Angular. This is the first article, which tells you  how to get your hands dirty with AngularJS, ASP.NET WEBAPI and SQL Server BookMySeat Application Tutorials.
This is the technology stack for BookMySeat library Application, as shown below:

I’ve designed a simple BookMySeat Library Application, where you will be familiarized with a few keywords & components, which you may be confronting in coming days. These keywords are shown below in the article-

Component of Angular Description

Module
Modules serve as containers to assist you to organize the code within your AngularJS Application. Modules can contain sub-modules.

$http
$http is an AngularJS Service for reading the data from the remote Servers.

Angular ui.bootstrap
<scriptdata-require="ui-bootstrap@*"data-semver="0.10.0"src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>

Services
Services are a point, where you can put common functionality to an AngularJS Application. For example,  if you would like to share the data with more than one controller then the best way is to promote the data to the Service and then make it available via the Service. Services extend the controllers and make them more globally accessible.

Routes Routing in Angular JS
Routes allow us to determine the ways to navigate to the specific states within our Application. It also allows us to define the configuration options for each specific route, such as which template and controller to use.

View
The view in AngularJS is what exists after AngularJS has compiled and rendered the DOM.

@scope
$scope is essentially the “glue” between the view and controller within an AngularJS Application. It supports two way binding within an Application.

Controller
The controller is to define the methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view; they’re controlling.

Directive
A directive is an extension of a view in AngularJS, which allows us to create custom, reusable elements. You can also consider the directives as the decorators for your HTML. Directives are used to extend the views and to make these extensions available for use in more than one place.

Route Config
The config block of an AngularJS Application allows for the configuration to be applied before the Application actually runs. This is useful to set up routes, dynamically configuring Services and so on.

Dependency Injection
How can we inject dependency in Angular controller and module? For this sample Application, we have injected $Log,$RouteParams,$modal ,Custom Services and many more.

The Application which we are about to build consists of almost all the defined keywords, mentioned above and the initial look of the application is shown below-

There are a few points which we’ll cover in this Application. To make it complete, you can also reference how this Application will work from this BookMySeat Gif representation,

• The screenshot, shown above, is a sample form for BookMySeat Application .You can book your seat for the specific slot. You can cancel your seat also from the given slot.
• In the same way, we’ll try to integrate UI-bootstrap (modal Popup) to show which seat is booked by the user.
• We will focus on Custom Directive and Custom Service.
• Usage of $http to call to WebApi to populate the data on HTML page.
• Usage of dependency injection at the various levels, Load partial templates to MVC view page.
• There can be some various add ons, which you can do at your level after the completion of this Application like Email notification after booking the seat, cancel the seat, booking slot information and responsive Application .
• The structure of the BookMySeat Application is given below-
  
  The basic life cycle of Angular app is given below-
  

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

Categories: AngularJS , SQL Server , WCF and WebAPI

Bookmyseat application : angularjs ,webapi and sqlserver 2008 using angular ui bootstrap

 Bookmyseat application angularjs ,webapi and sqlserver 2008 using angular ui bootstrap

Hi Folks,

I have created a bookmyseat application which has the following technology stack.

• AmgularJS (  Angular Module,Controller,Angular Service, Routing, Dependancy injection, Service calling using $http.post)
• Asp.Net WebAPI (Get,Post,Put methods with Routing)
• SQl Server 2008R2
• Angular UI-bootstrap UI Bootstrap for PopUp purpose

 

 

I’ll come with step by step articles day by day.

Thanks

Categories: AngularJS , SQL Server , WCF and WebAPI

Error Resolution : [ng:areq] Argument 'fn' is not a function, got string in angular js

Error: [ng:areq] Argument 'fn' is not a function, got string

I confronted an error which is shown above during Angular application development which was little tricky to resolve.Though later we could be able to identify an issue  and fix an issue.

At time of module loading in angular we were injecting dependancy like this:

var routingApp = angular.module('routingApp', ['ngRoute'], ['ui.bootstrap']);

Actually this is a wrong way to do ,due to this it was prompting an error

Resolution : The workaround is given below as inject a dependancy in same braket rather in different one.

var routingApp = angular.module('routingApp', ['ngRoute', 'ui.bootstrap']);

Hope it will give you some brief to fix your solution

Thanks

Categories: AngularJS , Error Resolutions

angular-route.js:24 Uncaught TypeError: Cannot read property 'module' of undefined

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=routingApp&p1=Error…20c%20(http%3A%2F%2Flocalhost%3A51309%2FScripts%2Fangular.min.js%3A21%3A19)

Resolution: Just keep the order of your file as shown below:

first load angula.js and than angular-route.js as given below:

<script src="~/Scripts/angular.min.js"></script>
@*   <script src="~/Scripts/angular-route.js"></script>*@

Hope it will solve your issue

Thanks

Categories: AngularJS , Bug & Error Resolution

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