MVC AngularJS and WCF Rest Service For Mind Reader Quiz

Introduction 
 

What a Mind Reader Quiz Game is

A Mind Reader Quiz game is a quiz game where users can think of any one of his dream stars from the list of names. In an online quiz there will be some limited questions with Yes or No options that the users will be asked related to his dream star. Depending on the user's answer the system will finally find the person in the user's mind and produce the result.

In my online quiz application (Shanu-Who's In Your Mind Reader) users can think of a famous person from the list from the Main Page. I will determine who's in your mind. You can select any popular person from the list. He or she might be an Actor, Actress, cricketer or any other celebrity from the list. I will ask a few questions about who's in your mind. You can answer Yes or No. Finally I will tell your the star's personality of whom you are thinking of.

This article will explain in detail how to create an Online Mind Reader quiz game using Angular JS and a WCF Rest Service. This article will explain:
  1.  How to create a WCF Rest service and retrieve data from a database.
  2.  How to install the Angular JS Package into a MVC application.
  3.  How to create our Angular JS application to create our own Master Detail Grid.
  4.  How to use a WCS service in Angular JS to create our own online Quiz Game for Mind Reader.
Note: the prerequisites are Visual Studio 2013 (if you don't have Visual Studio 2013, you can download it from the Microsoft website at http://www.visualstudio.com/en-us/products/visual-studio-community-vs ).

Here we can see some basics and reference links for Windows Communication Foundation (WCF). WCF is a framework for building service-oriented applications.

Service-oriented application

Using a protocol the service can be shared and used over a network.

For example, let's consider now we are working on a project and we need to create a common database function and those functions need to be used in multiple projects and the projects are in a different place and connected by the internet.

In this case we can create a WCF service and we can write all our common database functions in our WCF service class. We can deploy our WCF in IIS and use the URL in our application to do DB functions. In the code part let's see how to create a WCF REST service and use it in our Angular JS application.

If you are interested in reading more about WCF then kindly go through this link.
https://msdn.microsoft.com/en-in/library/dd203052.aspx

Angular JS

We might be be familiar with what the Model, View, View Model (MVVM) and what Model, View and Controller (MVC) are. Angular JS is a JavaScript framework that is purely based on HTML, CSS and JavaScript.

The Angular JS Model View Whatever (MVW) pattern is similar to the MVC and MVVM patterns. In our example I have used Model, View and Service. In the code part let's see how to install and create Angular JS in our MVC application.

If you are interested in reading more about Angular JS then kindly go through the following link.
http://www.w3schools.com/angular/default.asp

Code Part

1) Create Database and Table

We will create a Professional_Type, Character_Type, Character_Name and Questions table under the Database MindReader. The following is the script to create a database, table and sample insert query. Run this script in your SQL Server. I have used SQL Server 2012.
  1. -- =============================================   
  2. -- Author : Shanu   
  3. -- Create date : 2015-03-16   
  4. -- Description : To Create Database,Table and Sample Insert Query   
  5. -- Latest   
  6. -- Modifier : Shanu   
  7. -- Modify date : 2015-03-16   
  8. -- =============================================  
  9. --Script to create DB,Table and sample Insert data  
  10. USE MASTER  
  11. GO  
  12. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB  
  13. IF EXISTS (SELECT [nameFROM sys.databases WHERE [name] = 'MindReader' )  
  14. DROP DATABASE MindReader  
  15. GO  
  16.   
  17. CREATE DATABASE MindReader  
  18. GO  
  19.   
  20. USE MindReader  
  21. GO  
  22.   
  23. -- 1) //////////// Professional_Type table  
  24. -- Create Table Professional_Type ,This table will be used to store the details like Professional type as Sports,Bollywood Movie Star,kollywood Movie Star  
  25.   
  26. IF EXISTS ( SELECT [nameFROM sys.tables WHERE [name] = 'Professional_Type' )  
  27. DROP TABLE Professional_Type  
  28. GO  
  29.   
  30. CREATE TABLE Professional_Type  
  31. (  
  32. Profes_ID VARCHAR(10) NOT NULL,  
  33. Profes_Type VARCHAR(50)  
  34. CONSTRAINT [PK_Professional_Type] PRIMARY KEY CLUSTERED   
  35. (   
  36. [Profes_ID] ASC   
  37. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]   
  38. ON [PRIMARY]   
  39.   
  40. GO  
  41. -- Insert the sample records to the Character_Type Table  
  42. Insert into Professional_Type(Profes_ID,Profes_Type) values('1','Sports')  
  43. Insert into Professional_Type(Profes_ID,Profes_Type) values('2','Bollywood Movie Star')  
  44. Insert into Professional_Type(Profes_ID,Profes_Type) values('3','kollywood Movie Star')  
  45.   
  46. -- 1) END //  
  47.   
  48.   
  49. -- 2) //////////// Character_type table  
  50. -- Create Table Character_Type ,This table will be used to store the details like Character type as Cricket,Bollywood Actor,kollywood Actor  
  51.   
  52. IF EXISTS ( SELECT [nameFROM sys.tables WHERE [name] = 'Character_Type' )  
  53. DROP TABLE Character_Type  
  54. GO  
  55.   
  56. CREATE TABLE Character_Type  
  57. (  
  58. Char_ID VARCHAR(10) NOT NULL,  
  59. Profes_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Professional_Type FOREIGN KEY REFERENCES Professional_Type,  
  60. Char_Type VARCHAR(50)  
  61. CONSTRAINT [PK_Character_Type] PRIMARY KEY CLUSTERED   
  62. (   
  63. [Char_ID] ASC   
  64. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]   
  65. ON [PRIMARY]   
  66. GO  
  67. -- Insert the sample records to the Character_Type Table  
  68. Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('1','1','Cricket')  
  69. Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('2','2','Bollywood Actor')  
  70. --Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('3','2','Bollywood Actress')  
  71. Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('4','3','kollywood Actor')  
  72. --Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('5','3','kollywood Actress')  
  73. -- 2) END //  
  74.   
  75.   
  76. -- 3) //////////// Character_Name  
  77. -- Create Table Character_Name ,This table will be used to store the details of Character Names  
  78.   
  79. IF EXISTS ( SELECT [nameFROM sys.tables WHERE [name] = 'Character_Name' )  
  80. DROP TABLE Character_Name  
  81. GO  
  82.   
  83. CREATE TABLE Character_Name  
  84. (  
  85. Char_Name_ID VARCHAR(10) NOT NULL,  
  86. Char_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Character_Type FOREIGN KEY REFERENCES Character_Type,  
  87. Char_Name VARCHAR(50),  
  88. Char_Status VARCHAR(20)  
  89. CONSTRAINT [PK_Char_Name] PRIMARY KEY CLUSTERED   
  90. (   
  91. [Char_Name_ID] ASC   
  92. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]   
  93. ON [PRIMARY]   
  94. GO  
  95. -- Insert the sample records to the Character_Type Table  
  96. --Sports  
  97. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('1','1','Sachin Tendulkar','Past')  
  98. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('2','1','Sunil Gavaskar' ,'Past')  
  99. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('3','1','Mohammed Azharuddin','Past')  
  100. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('4','1','Mahender Singh Dhoni','Present')  
  101. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('5','1','Shikhar Dhawan','Present')  
  102. --Bollywood Actor  
  103. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('6','2','Amitabh Bachchan','Present')  
  104. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('7','2','Shah Rukh Khan' ,'Present')  
  105. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('8','2','Aamir Khan','Present')  
  106. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('9','2','Salman Khan','Present')  
  107.   
  108. --kollywood Actor  
  109. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('10','4','Rajini Kanth','Present')  
  110. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('11','4','Ajith Kumar' ,'Present')  
  111. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('12','4','Kamala Hasan','Present')  
  112. Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) values('13','4','Vijay','Present')  
  113.   
  114. -- 3) END //  
  115.   
  116. --//test Select  
  117. --select * from Professional_Type  
  118. --select * from Character_Type  
  119. --select * from Character_Name  
  120.   
  121. --////end test select  
  122.   
  123. -- 4) //////////// Questions  
  124. -- Create Table Questions ,This table will be used to store the details of Character Names  
  125.   
  126. IF EXISTS ( SELECT [nameFROM sys.tables WHERE [name] = 'Questions' )  
  127. DROP TABLE Questions  
  128. GO  
  129.   
  130. CREATE TABLE Questions  
  131. (  
  132. Question_ID VARCHAR(10) NOT NULL,  
  133. Char_Name_ID VARCHAR(10) NOT NULL CONSTRAINT fk_Character_Name FOREIGN KEY REFERENCES Character_Name,  
  134. Question VARCHAR(300),  
  135. Answer VARCHAR(100)  
  136. CONSTRAINT [PK_Questions] PRIMARY KEY CLUSTERED   
  137. (   
  138. [Question_ID] ASC   
  139. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]   
  140. ON [PRIMARY]   
  141. GO  
  142. -- Insert the sample records to the Character_Type Table  
  143. --Sports  
  144. --// Sachin  
  145. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('1','1','Is he Present Player?','No')  
  146. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('2','1','Is he born in Mumbai, Maharastra?' ,'Yes')  
  147. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('3','1','Is he also called as nick name Little Master?','Yes')  
  148.   
  149. --// Sunil Gavaskar   
  150. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('4','2','Is he Present Player?','No')  
  151. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('5','2','Is he born in Mumbai, Maharastra?' ,'Yes')  
  152. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('6','2','Is he also called as nickname Sunny?','Yes')  
  153.   
  154. --// Mohammed Azharuddin  
  155. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('7','3','Is he Present Player?','No')  
  156. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('8','3','Is he born in Hyderabad, Andhra Pradesh?' ,'Yes')  
  157. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('9','3','Is he also called as nickname Ajju?','Yes')  
  158.   
  159. --// Mahender Singh Dhoni  
  160. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('10','4','Is he Present Player?','Yes')  
  161. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('11','4','Is he born in Ranchi, Jharkhand?' ,'Yes')  
  162. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('12','4','Is he also called as nickname Mahi?','Yes')  
  163.   
  164. --// Shikhar Dhawan  
  165. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('13','5','Is he Present Player?','Yes')  
  166. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('14','5','Is he born in Delhi?' ,'Yes')  
  167. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('15','5','Is he also called as nickname Gabbar?','Yes')  
  168.   
  169. --Bollywood Actor  
  170. --// Amitabh Bachchan  
  171. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('16','6','Is Your Actor Born in Allahabad, Uttar Pradesh?','Yes')  
  172. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('17','6','Is Your Actor Father Was a Hindi Poet?' ,'Yes')  
  173. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('18','6','Is your Actor married to a Actress named Jaya Bhaduri?','Yes')  
  174.   
  175. --// Shah Rukh Khan  
  176. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('19','7','Is your Actor born in New Delhi?','Yes')  
  177. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('20','7','Is one of his Famous film runs in a Theatre for nearly 20 Years?' ,'Yes')  
  178. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('21','7','Is your Actor is called as King Khan?','Yes')  
  179.   
  180. --// Aamir Khan  
  181. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('22','8','Is your Actor born in Mumbai?','Yes')  
  182. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('23','8','Is his father was a producer?' ,'Yes')  
  183. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('24','8','Is he acted in a movie which has Cricket Matches and that movie got so many awards?','Yes')  
  184.   
  185. --// Salman Khan  
  186. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('25','9','Is your Actor born in Indore?','Yes')  
  187. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('26','9','Is his father was a screenwriter?' ,'Yes')  
  188. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('27','9',') Is your Actor brothers name is Arbaaz khan?','Yes')  
  189.   
  190. --kollywood Actor  
  191. --// Rajini Kanth  
  192. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('28','10','Is your Actor born in Karnataka?','Yes')  
  193. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('29','10','Is your Actor is called as Super Star?' ,'Yes')  
  194. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('30','10','Is your Actor is called as Thalapathy?','Yes')  
  195.   
  196. --// Ajith Kumar  
  197. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('31','11','Is Your Actor Born in Hyderabad?','Yes')  
  198. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('32','11','Is Your Actor Motor Bike racer?' ,'Yes')  
  199. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('33','11','Is your Actor nick name is Thala?','Yes')  
  200.   
  201. --// Kamala Hasan  
  202. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('34','12','Is your Actor born in Paramakudi?','Yes')  
  203. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('35','12','Is your Actor received padma shri award during 1990?' ,'Yes')  
  204. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('36','12','Is your Actor acted in a file with 10 Characters Roles?','Yes')  
  205.   
  206. --// Vijay  
  207. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('37','13','Is your Actor born in Chennai?','Yes')  
  208. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('38','13','Is his father producer/Director?' ,'Yes')  
  209. Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) values('39','13','Is your Actor Called as Ilaya Thalapathy?','Yes')  
  210.   
  211. -- 4) END //  
  212.   
  213. --//test Select  
  214. select * from Professional_Type  
  215. select * from Character_Type  
  216. select * from Character_Name  
  217. select * from Questions order by Question_ID,Char_Name_ID  
  218. --////end test select  
  219. --// this is sample join query which i will be used in WCF function for Linq query  
  220. select A.Question_ID,  
  221. A.Char_Name_ID,  
  222. B.Char_ID,  
  223. A.Question,  
  224. A.Answer,   
  225. B.Char_Name,  
  226. B.Char_Status  
  227. FROM  
  228. Questions A   
  229. Inner JOIN Character_Name B  
  230. ON A.Char_Name_ID=B.Char_Name_ID   
  231. WHERE   
  232. B.Char_ID='1'  
  233. order by cast(A.Question_ID as INT)  
2) Create WCF REST Service

Open Visual Studio 2013 then select "File" -> "New" -> "Project..." then select WCF Service Application then select your project path and name your WCF service and click OK.

wcf service

Once we created our WCF Service we can see “IService.CS” and “Service1.svc” in the Solution Explorer as in the following.

explorer

IService.CS in “IService.CS” we can see 3 contracts by default as in the following:

[ServiceContract] describes the methods or any operations available for the service. The Service Contract is an interface and the methods can be declared inside the Service Interface using the Operation Contract attribute.

[OperationContract] is similar to a web service [WEBMETHOD]

[DataContract] describes the data exchange between the client and the service.

[ServiceContract]

The following code will be automatically created for all the IService.CS files. We can change and write our own code here.
  1. public interface IService1  
  2. {  
  3.   
  4.     [OperationContract]  
  5.     string GetData(int value);  
  6.   
  7.     [OperationContract]  
  8.     CompositeType GetDataUsingDataContract(CompositeType composite);  
  9.   
  10.         // TODO: Add your service operations here  
  11. }  
  12.     // Use a data contract as illustrated in the sample below to add composite types to service operations.  
  13.     [DataContract]  
  14.     public class CompositeType  
  15.     {  
  16.         bool boolValue = true;  
  17.         string stringValue = "Hello ";  
  18.   
  19.         [DataMember]  
  20.         public bool BoolValue  
  21.         {  
  22.             get { return boolValue; }  
  23.             set { boolValue = value; }  
  24.         }  
  25.   
  26.         [DataMember]  
  27.         public string StringValue  
  28.         {  
  29.             get { return stringValue; }  
  30.             set { stringValue = value; }  
  31.         }  
  32.     }  
Data Contract

In our example we need to get both the Character Type and Character Name from the database, so I have created three the Data Contracts “CharacterTypeDataContract”, “CharacterNameDataContract” and “questionAnswersDataContract”.

Here we can see we have decelerated our entire table column name as Data Member.
  1. public class whosInYourMinDataContract  
  2. {  
  3.     [DataContract]  
  4.      public class CharacterTypeDataContract  
  5.      {  
  6.         [DataMember]  
  7.         public string Char_ID { getset; }  
  8.   
  9.             [DataMember]  
  10.             public string Character_Type { getset; }  
  11.         }  
  12.   
  13.         [DataContract]  
  14.         public class CharacterNameDataContract  
  15.         {  
  16.             [DataMember]  
  17.             public string Char_Name_ID { getset; }  
  18.   
  19.             [DataMember]  
  20.             public string Char_ID { getset; }  
  21.   
  22.             [DataMember]  
  23.             public string Char_Name { getset; }  
  24.   
  25.             [DataMember]  
  26.             public string Char_Status { getset; }  
  27.         }  
  28.   
  29.         [DataContract]  
  30.         public class questionAnswersDataContract  
  31.         {  
  32.             [DataMember]  
  33.             public string Question_ID { getset; }  
  34.   
  35.             [DataMember]  
  36.             public string Char_Name_ID { getset; }  
  37.   
  38.             [DataMember]  
  39.             public string Char_ID { getset; }  
  40.   
  41.             [DataMember]  
  42.             public string Question { getset; }  
  43.   
  44.             [DataMember]  
  45.             public string Answer { getset; }  
  46.   
  47.             [DataMember]  
  48.             public string Char_Name { getset; }  
  49.   
  50.             [DataMember]  
  51.             public string Char_Status { getset; }  
  52.         }  
  53.   
  54.     }  
Service Contract

In operation Contract we can see “WebInvoke” and “WebGet” that retrieve the data from the database in the REST Serivce.
  1. RequestFormat = WebMessageFormat.Json,  
  2.                     ResponseFormat = WebMessageFormat.Json,  
Here we can see both the request and the response format. Here I used the JSON format.

JavaScript Object Notation (JSON) is a lightweight data interchange format.

UriTemplate is our Method Name and here our method return type is List.

Here I have declared the 3 method “GetCharacterType”, “getCharacterNames” and “questionAnswers” . The “GetOrderMaster” method gets the Celebrity Profession (he or she might be a cricketer, movie actor or something else). “getCharacterNames” gets all the Celebrity Names from the database and “questionAnswers” gets all the Questions from the database.

[ServiceContract]
  1. public interface IService1  
  2. {  
  3.   
  4.     [OperationContract]  
  5.     [WebInvoke(Method = "GET",  
  6.        RequestFormat = WebMessageFormat.Json,  
  7.        ResponseFormat = WebMessageFormat.Json,  
  8.        UriTemplate = "/GetCharacterType/")]  
  9.     List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();  
  10.   
  11.     [OperationContract]  
  12.     [WebGet(RequestFormat = WebMessageFormat.Json,  
  13.        ResponseFormat = WebMessageFormat.Json,  
  14.        UriTemplate = "/getCharacterNames/")]  
  15.     List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();  
  16.   
  17.     [OperationContract]  
  18.     [WebInvoke(Method = "GET",  
  19.        RequestFormat = WebMessageFormat.Json,  
  20.        ResponseFormat = WebMessageFormat.Json,  
  21.        UriTemplate = "/questionAnswers/{Char_ID}")]  
  22.     List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID);  
  23. }  
Complete Source Code of Iservice.Cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Runtime.Serialization;  
  5. using System.ServiceModel;  
  6. using System.ServiceModel.Web;  
  7. using System.Text;  
  8.   
  9. namespace Shanu_QuizWcfService  
  10. {  
  11.     // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.  
  12.     [ServiceContract]  
  13.     public interface IService1  
  14.     {  
  15.   
  16.         [OperationContract]  
  17.         [WebInvoke(Method = "GET",  
  18.            RequestFormat = WebMessageFormat.Json,  
  19.            ResponseFormat = WebMessageFormat.Json,  
  20.            UriTemplate = "/GetCharacterType/")]  
  21.         List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();  
  22.   
  23.         [OperationContract]  
  24.         [WebGet(RequestFormat = WebMessageFormat.Json,  
  25.            ResponseFormat = WebMessageFormat.Json,  
  26.            UriTemplate = "/getCharacterNames/")]  
  27.         List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();  
  28.   
  29.         [OperationContract]  
  30.         [WebInvoke(Method = "GET",  
  31.            RequestFormat = WebMessageFormat.Json,  
  32.            ResponseFormat = WebMessageFormat.Json,  
  33.            UriTemplate = "/questionAnswers/{Char_ID}")]  
  34.         List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID);  
  35.     }  
  36.   
  37.     // Use a data contract as illustrated in the sample below to add composite types to service operations.  
  38.     public class whosInYourMinDataContract  
  39.     {  
  40.         [DataContract]  
  41.         public class CharacterTypeDataContract  
  42.         {  
  43.             [DataMember]  
  44.             public string Char_ID { getset; }  
  45.   
  46.             [DataMember]  
  47.             public string Character_Type { getset; }  
  48.         }  
  49.   
  50.   
  51.         [DataContract]  
  52.         public class CharacterNameDataContract  
  53.         {  
  54.             [DataMember]  
  55.             public string Char_Name_ID { getset; }  
  56.   
  57.             [DataMember]  
  58.             public string Char_ID { getset; }  
  59.   
  60.             [DataMember]  
  61.             public string Char_Name { getset; }  
  62.   
  63.             [DataMember]  
  64.             public string Char_Status { getset; }  
  65.         }  
  66.   
  67.         [DataContract]  
  68.         public class questionAnswersDataContract  
  69.         {  
  70.             [DataMember]  
  71.             public string Question_ID { getset; }  
  72.   
  73.             [DataMember]  
  74.             public string Char_Name_ID { getset; }  
  75.   
  76.             [DataMember]  
  77.             public string Char_ID { getset; }  
  78.   
  79.             [DataMember]  
  80.             public string Question { getset; }  
  81.   
  82.             [DataMember]  
  83.             public string Answer { getset; }  
  84.   
  85.             [DataMember]  
  86.             public string Char_Name { getset; }  
  87.   
  88.             [DataMember]  
  89.             public string Char_Status { getset; }  
  90.         }  
  91.   
  92.     }  
  93. }  
Add Database using ADO.NET Entity Data Model

Right-click your WCF project and select Add New Item then select ADO.NET Entity Data Model and click Add.

ado.net

Select EF Designer from database and click Next.

EF designer

Click New Connection

choose data connection

Here we can select our Database Server Name and enter your DB server, SQL Server Authentication, User ID and Password. We have already created our database as “OrderManagement” so we can select the database and click OK.

sql authentication

Click Next and select our tables that are needed and click Finish. Here we can see now we have created our shanuQuizModel.

class diagram

Service1.SVC

“Service.SVC.CS” implements the IService interface (and overrides) and define all the methods of the Operation Contract. For example here we can see I have implemented the IService1 in the Service1 class. We created the object for our entity model and in questionAnswers using a LINQ Query, I have used the LINQ Join query to join 2 tables and get the result from the database filtering by the Char_Id and the result was added to the list.
  1. public class Service1 : IService1  
  2. {  
  3.    shanuQuizEntities OME;  
  4.   
  5.    public Service1()  
  6.    {  
  7.       OME = new shanuQuizEntities();  
  8.    }   
  9.   
  10.    public List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID)  
  11.    {  
  12.              
  13.        var query = (from A in OME.Questions  
  14.        join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID  
  15.        where B.Char_ID.Equals(Char_ID)  
  16.        select new  
  17.        {  
  18.           A.Question_ID,  
  19.           A.Char_Name_ID,  
  20.           B.Char_ID,  
  21.           A.Question,  
  22.           A.Answer,  
  23.           B.Char_Name,  
  24.           B.Char_Status  
  25.        }).ToList().OrderBy(q => Int32.Parse(q.Question_ID));  
  26.   
  27.   
  28.             List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswersList = new List<whosInYourMinDataContract.questionAnswersDataContract>();  
  29.   
  30.             query.ToList().ForEach(rec =>  
  31.             {  
  32.                 questionAnswersList.Add(new whosInYourMinDataContract.questionAnswersDataContract  
  33.                 {  
  34.                     Question_ID =rec.Question_ID,  
  35.                     Char_Name_ID = rec.Char_Name_ID,  
  36.                     Char_ID = rec.Char_ID,  
  37.                     Question = rec.Question,  
  38.                     Answer = rec.Answer,  
  39.                     Char_Name = rec.Char_Name,  
  40.                     Char_Status = rec.Char_Status  
  41.                 });  
  42.             });  
  43.             return questionAnswersList;  
  44.   }   
  45. }  
Complete Source Code for “Service.SVC.CS”
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Runtime.Serialization;  
  5. using System.ServiceModel;  
  6. using System.ServiceModel.Web;  
  7. using System.Text;  
  8. using Shanu_QuizWcfService.Model;  
  9. namespace Shanu_QuizWcfService  
  10. {  
  11.     // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.  
  12.     // NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging.  
  13.     public class Service1 : IService1  
  14.     {  
  15.         shanuQuizEntities OME;  
  16.   
  17.         public Service1()  
  18.         {  
  19.             OME = new shanuQuizEntities();  
  20.         }  
  21.   
  22.         public List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType()  
  23.         {  
  24.             var query = (from a in OME.Character_Type  
  25.                          select a).Distinct();  
  26.   
  27.             List<whosInYourMinDataContract.CharacterTypeDataContract> CharacterTypeList = new List<whosInYourMinDataContract.CharacterTypeDataContract>();  
  28.   
  29.             query.ToList().ForEach(rec =>  
  30.             {  
  31.                 CharacterTypeList.Add(new whosInYourMinDataContract.CharacterTypeDataContract  
  32.                 {  
  33.                     Char_ID = rec.Char_ID,  
  34.                     Character_Type = rec.Char_Type  
  35.                 });  
  36.             });  
  37.             return CharacterTypeList;  
  38.         }  
  39.         public List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames()  
  40.         {  
  41.   
  42.             List<whosInYourMinDataContract.CharacterNameDataContract> CharacterNameList = new List<whosInYourMinDataContract.CharacterNameDataContract>();  
  43.   
  44.             try  
  45.             {  
  46.                  
  47.                 var query = (from a in OME.Character_Name  
  48.                              select a).ToList().OrderBy(q => Int32.Parse(q.Char_Name_ID));  
  49.   
  50.   
  51.                 query.ToList().ForEach(rec =>  
  52.                 {  
  53.                     CharacterNameList.Add(new whosInYourMinDataContract.CharacterNameDataContract  
  54.                     {  
  55.                         Char_Name_ID = rec.Char_Name_ID,  
  56.                         Char_ID = rec.Char_ID,  
  57.                         Char_Name = rec.Char_Name,  
  58.                         Char_Status = rec.Char_Status  
  59.                     });  
  60.                 });  
  61.                 return CharacterNameList;  
  62.   
  63.   
  64.             }  
  65.             catch (Exception ex)  
  66.             {  
  67.                 throw new FaultException<string>  
  68.                        (ex.Message);  
  69.             }  
  70.   
  71.         }  
  72.   
  73.         public List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswers(string Char_ID)  
  74.         {  
  75.              
  76.             var query = (from A in OME.Questions  
  77.                          join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID  
  78.                          where B.Char_ID.Equals(Char_ID)  
  79.                          select new  
  80.                          {  
  81.                              A.Question_ID,  
  82.                              A.Char_Name_ID,  
  83.                              B.Char_ID,  
  84.                              A.Question,  
  85.                              A.Answer,  
  86.                              B.Char_Name,  
  87.                              B.Char_Status  
  88.                          }).ToList().OrderBy(q => Int32.Parse(q.Question_ID));  
  89.   
  90.   
  91.             List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswersList = new List<whosInYourMinDataContract.questionAnswersDataContract>();  
  92.   
  93.             query.ToList().ForEach(rec =>  
  94.             {  
  95.                 questionAnswersList.Add(new whosInYourMinDataContract.questionAnswersDataContract  
  96.                 {  
  97.                     Question_ID =rec.Question_ID,  
  98.                     Char_Name_ID = rec.Char_Name_ID,  
  99.                     Char_ID = rec.Char_ID,  
  100.                     Question = rec.Question,  
  101.                     Answer = rec.Answer,  
  102.                     Char_Name = rec.Char_Name,  
  103.                     Char_Status = rec.Char_Status  
  104.                 });  
  105.             });  
  106.             return questionAnswersList;  
  107.         }  
  108.         
  109.     }  
  110. }  
Web.Config

In the WCF project's “Web.Config” make the following changes.

1) Change:
  1. <add binding="basicHttpsBinding" scheme="https" /> to <add binding="webHttpBinding" scheme="http" />  
2) Replace the behaviour as in the following:
  1. </behaviors>  
  2.    <endpointBehaviors>  
  3.         <behavior>  
  4.           <webHttp helpEnabled="True"/>  
  5.         </behavior>  
  6.     </endpointBehaviors>  
  7. </behaviors>  
Run WCF Service

Now that we have created our WCF Rest service, let's run and test our service. In our service URL we can add our method name and we can see the JSON result data from the database.

run wcf errors
Create MVC Web Application

So now we have completed our WCF and now it's time to create our MVC Angular JS application. We can add a new project to our existing project and create a new MVC web application as in the following.

Right-click your solution and click Add New Project tehn enter your project name and click OK.



Select MVC and click OK.



Now we have created our MVC application and it's time to add our WCF Service and install the Angular JS package to our solution.

Add WCF Service

Right-click the MVC Solution and click Add then click Service Reference.

add service refrernce

Enter your WCF URL and click GO. Here my WCF URL is http://localhost:4194/Service1.svc

Add your name and click OK.

Now we have successfully added our WCF Service to our MVC application.



Procedure to Install Angular JS package

Right-click your MVC project and click Manage NuGet Packages.

web template

Select online and search for Angular JS. Select the AngularJs and click Install.

installation angularjs

Now we have installed the AngularJS package into our MVC Project. Now let's create our Angular Js.
  • Modules.js
  • Controllers.js
  • Services.js
Procedure to Create Angular Js Script Files

Right-click the Script folder and create your own folder to create our Angular Js Model/Controller and Service JavaScript. In your script folder add three JavaScript files and name them Modules.js, Controllers.js and Services,js as in the following.

scripts

Modules.js

Here we add the reference to the Angular.js JavaScript and create a Angular Module named “RESTClientModule”.
  1. /// <reference path="../angular.js" />   
  2. /// <reference path="../angular.min.js" />   
  3.   
  4. var app;  
  5.   
  6. (function () {  
  7.    app = angular.module("RESTClientModule", []);  
  8. })();  
Services.js

Here we add the reference to the Angular.js JavaScript and our Module.js.

Here we provide the name of our service and we use this name in controllers.js. Here for the Angular service I have given the name "AngularJs_WCFService". You can provide your own name but be careful about changing the name in Controllers.js. Here we can see in the method since I have passed the URL of our WCF Service URL.
  1. /// <reference path="../angular.js" />   
  2. /// <reference path="../angular.min.js" />   
  3. /// <reference path="Modules.js" />   
  4.   
  5. app.service("AngularJs_WCFService"function ($http) {  
  6.   
  7. //Get Order Master Records   
  8.    this.GetCharacterType = function () {  
  9.    return $http.get("http://localhost:4194/Service1.svc/GetCharacterType");  
  10.    };  
  11.   
  12. //Search Order Master Records   
  13.    this.getCharacterNames = function () {  
  14.    return $http.get("http://localhost:4194/Service1.svc/getCharacterNames/");  
  15.    }  
  16.   
  17.    this.getquestionAnswers = function (Char_ID) {  
  18.    return $http.get("http://localhost:4194/Service1.svc/questionAnswers/" + Char_ID);  
  19.    }  
  20.    });  
Controllers.js

Here we add the reference to the Angular.js JavaScript and our Module.js and Services.js. The same as for services. For the controller I have given the name "AngularJs_WCFController". In the Controller I have done all the business logic and returned the data from the WCF JSON data to our MVC HTML page.

1) Variable declarations

First I declared all the local variables that need to be used and the current date and store the date using $scope.date.

Note: $scope.finalresultCount = 3;

This is a very important variable. Here I have set the default value to 3. In my Quiz program I have inserted 3 questions per celebrity. If we increase the questions then we need to provide the same count here.

2) Methods

Hidetables()

This method is used to hide and show the display of the table TR to show the Celebrity Profession selection and to answer the question and to display the final result in the same page.

getCharacterNames()

In this method I will get all the Celebrity Names from the JSON and bind the result to the Main page. From there the user can think of anyone that is a celebrity and start playing the quiz game.



GetCharacterType()

In this method I will get all the Celebrity Profession types from the JSON and bind the final result to the radio button.

get char

findYourAnswer()

This method gets the question from the database one by one and binds the question for the users to answer.

find ans

$scope.findAnswers = function ()

This method will be called when the user clicks on the Submit button. In this method I will do all the business logic for displaying the next questions and check for the final result and display the appropriate celebrity Name as the Final result.



Controller.js full source code
  1. /// <reference path="../angular.js" />    
  2. /// <reference path="../angular.min.js" />     
  3. /// <reference path="Modules.js" />     
  4. /// <reference path="Services.js" />     
  5.   
  6.   
  7. app.controller("AngularJs_WCFController"function ($scope, $rootScope, $window, AngularJs_WCFService) {  
  8.   
  9.     $scope.date = new Date();  
  10.   
  11.     // 1) To Store the user selected Character Profession  
  12.     $scope.CharacterID = 4;  
  13.     $scope.CharacterType = 'kollywood Actor';  
  14.   
  15.     // 2) To show and Hide the Table to display  Character Type Selection and Question  
  16.     var firstbool = true;  
  17.     var secondbool = false;  
  18.     var thirdbool = false;  
  19.     // * 3) Question and Answer final Judgement Local Variables  
  20.     $scope.Question_ID;  
  21.     $scope.Char_Name_ID;  
  22.     $scope.Char_ID;  
  23.     $scope.Question;  
  24.     $scope.Answer;  
  25.     $scope.Char_Name;  
  26.     $scope.Char_Status;  
  27.     $scope.User_Selected_Result = 'Yes';  
  28.     $scope.loopCount = 0;  
  29.     $scope.resultCount = 0;  
  30.     $scope.finalresultCount = 3;  
  31.     $scope.NextStar = 0;  
  32.     $scope.totalQuestionCount = 0;  
  33.     $scope.QuestionIncrement = 0;  
  34.     $scope.YourDreamStarName = "";  
  35.     // end 3)  
  36.   
  37.     Hidetables()  
  38.     function Hidetables() {  
  39.        
  40.         if ($scope.firstbool == false) {  
  41.             $scope.firstbool = true;  
  42.             $scope.secondbool = false;  
  43.             $scope.thirdbool = true  
  44.         }  
  45.         else  
  46.         {  
  47.             $scope.firstbool = false;  
  48.             $scope.secondbool = true;  
  49.             $scope.thirdbool = true;  
  50.         }      
  51.     }  
  52.     hideresult()  
  53.     function hideresult() {  
  54.         if ($scope.thirdbool == false) {  
  55.             $scope.thirdbool = true;  
  56.         }  
  57.     }  
  58.   
  59.     GetCharacterType();  
  60.     getCharacterNames();  
  61.     
  62.    
  63.     //To Get All Records     
  64.     function GetCharacterType() {  
  65.   
  66.         var promiseGet = AngularJs_WCFService.GetCharacterType();  
  67.         promiseGet.then(function (pl) {  
  68.             $scope.getCharacterTypeDisp = pl.data  
  69.   
  70.         },  
  71.   
  72.              function (errorPl) {  
  73.   
  74.              });  
  75.     }  
  76.      
  77.     //To Get Student Detail on the Base of Student ID     
  78.     function getCharacterNames() {  
  79.         
  80.         var promiseGet = AngularJs_WCFService.getCharacterNames();  
  81.             promiseGet.then(function (pl) {  
  82.                 $scope.getCharacterNamesDisp = pl.data;  
  83.                  
  84.              //   alert(res.Char_Name);  
  85.             },  
  86.                  function (errorPl) {  
  87.                  });  
  88.         
  89.   
  90.     }  
  91.     $scope.radioCheckValue = function (CharID, CharType) {  
  92.         
  93.         $scope.CharacterID = CharID;  
  94.         $scope.CharacterType = CharType;  
  95.     };  
  96.   
  97.    
  98.   
  99.     $scope.get = function () {  
  100.        
  101.         $scope.firstbool = true;  
  102.         $scope.secondbool = false;  
  103.         $scope.NextStar = 0;  
  104.         $scope.loopCount = 0;  
  105.         findYourAnswer();  
  106.     }  
  107.   
  108.     function findYourAnswer()  
  109.     {  
  110.            
  111.         var promiseGet = AngularJs_WCFService.getquestionAnswers($scope.CharacterID);  
  112.         promiseGet.then(function (pl) {  
  113.             $scope.questionAnswersDisp = pl.data  
  114.   
  115.             $scope.totalQuestionCount = $scope.questionAnswersDisp.length;  
  116.               
  117.               
  118.             for (x in $scope.questionAnswersDisp) {  
  119.   
  120.                 if (x == $scope.loopCount) {  
  121.                    
  122.                      
  123.                     $scope.Question_ID = $scope.questionAnswersDisp[x].Question_ID;  
  124.                     $scope.Char_Name_ID = $scope.questionAnswersDisp[x].Char_Name_ID;  
  125.                     $scope.Char_ID = $scope.questionAnswersDisp[x].Char_ID;  
  126.                     $scope.Question = $scope.questionAnswersDisp[x].Question;  
  127.                     $scope.Answer = $scope.questionAnswersDisp[x].Answer;  
  128.                     $scope.Char_Name = $scope.questionAnswersDisp[x].Char_Name;  
  129.                     $scope.Char_Status = $scope.questionAnswersDisp[x].Char_Status;  
  130.   
  131.                     $scope.QuestionIncrement = $scope.QuestionIncrement + 1;  
  132.   
  133.                 }  
  134.   
  135.             }  
  136.   
  137.         },  
  138.              function (errorPl) {  
  139.   
  140.              });  
  141.     }  
  142.   
  143.     $scope.rdoAnschk = function (chkResult) {  
  144.         
  145.         $scope.User_Selected_Result = chkResult;  
  146.         
  147.     };  
  148.   
  149.     $scope.findAnswers = function () {  
  150.         
  151.         
  152.         if ($scope.User_Selected_Result == 'Yes')  
  153.         {  
  154.   
  155.             $scope.resultCount = $scope.resultCount + 1;  
  156.         }  
  157.         else  
  158.         {  
  159.             
  160.                  
  161.                 if ($scope.Answer == 'No') {  
  162.                   
  163.                         $scope.resultCount = $scope.resultCount + 1;    
  164.                     if ($scope.NextStar > 0) {  
  165.                         $scope.NextStar = $scope.NextStar - 1;  
  166.                     }  
  167.                 }  
  168.                 else {  
  169.                     if ($scope.resultCount > 0) {  
  170.                         $scope.resultCount = $scope.resultCount - 1;  
  171.                     }  
  172.                     $scope.NextStar = $scope.NextStar + 1;  
  173.                 }  
  174.                   
  175.             
  176.         }  
  177.         if ($scope.NextStar == $scope.finalresultCount)  
  178.         {  
  179.             alert('Hope my guess was Wrong! lets start for other Star ')  
  180.             $scope.NextStar = 0;  
  181.         }  
  182.         if ($scope.resultCount == $scope.finalresultCount) {  
  183.             $scope.secondbool = true;  
  184.             $scope.thirdbool = false;  
  185.             $scope.YourDreamStarName = $scope.Char_Name;  
  186.             alert('Your Dream Star in your mind is ' + $scope.YourDreamStarName)  
  187.             return;  
  188.         }  
  189.   
  190.         $scope.loopCount = $scope.loopCount + 1;  
  191.         
  192.         findYourAnswer();  
  193.   
  194.         if($scope.QuestionIncrement>= $scope.totalQuestionCount)  
  195.         {  
  196.             $scope.secondbool = true;  
  197.             $scope.thirdbool = false;  
  198.             $scope.YourDreamStarName = "Sorry My Dear Friend.All the Questions are Completed. I cont find your answer. Shall we try again"  
  199.             alert($scope.YourDreamStarName);  
  200.             return;  
  201.         }  
  202.     }  
  203.    
  204.   
  205. });  
So now we have created our Angular Js Module /Controller and Service. So what is next?

Create MVC Control and View to display our result.

Add Controller

Right-click Controllersthen select Add Controller then select MVC 5 Controller – Empty then click Add.

add controller

Change the Controller name and here I have given the name “WhosinYourMindController”. Then click OK.

Add View

Right-click on the Controller Index and click Add View.



1) Index View

Name the View “Index”.

In the View, design your page and reference angular.Js, Modules.js, Services.js and Controllers.js.

In Angular JS we use {{ }} to bind or display the data.

Here we can see that I first created a table and something for that table.

First the in table I used the data-ng-controller="AngularJs_WCFController" and here we can see data-ng-controller will be used to bind the data of the controller to the HTML table.

Using <tbody data-ng-repeat=" detail in getCharacterNamesDisp"> we can get all the records and using the <td><span>{{ detail.Char_Name}}</span></td> bind all the data inside the table.
  1. <html data-ng-app="RESTClientModule">  
  2. @{  
  3.     ViewBag.Title = "Who is in Your Mind Reader";  
  4. }  
  5.   
  6.   
  7. <body>  
  8.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  9.     <table width="99%" style=" border-bottom:3px solid #3273d5;">  
  10.         <tr>  
  11.   
  12.             <td width=" 250">  
  13.                 <table width="99%">  
  14.                     <tr>  
  15.                         <td>  
  16.                             Welcome Mr. {{'SHANU'}} .  
  17.   
  18.                         </td>  
  19.   
  20.   
  21.                     </tr>  
  22.                 </table>  
  23.             </td>  
  24.             <td class="style1" align="center">  
  25.                 <h3>Who is in Your Mind Reader Quiz  :)</h3>  
  26.   
  27.   
  28.             </td>  
  29.             <td align="right">  
  30.                 <div ng-controller="AngularJs_WCFController">  
  31.                     Today Date is :  
  32.                     {{date | date:'yyyy-MM-dd'}}  
  33.                 </div>  
  34.   
  35.             </td>  
  36.         </tr>  
  37.     </table>  
  38.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  39.   
  40.     <table id="tblContainer" data-ng-controller="AngularJs_WCFController" style='width: 99%;table-layout:fixed;'>  
  41.   
  42.         <tr>  
  43.   
  44.             <td>  
  45.                 <table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  46.                     <tr>  
  47.                         <th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">  
  48.                             <h3>Think Any one of your Dream Star in your mind  from the list Below.</h3>  
  49.                         </th>  
  50.                     </tr>  
  51.   
  52.                     <tbody data-ng-repeat="detail in getCharacterNamesDisp">  
  53.   
  54.                         <tr>  
  55.                             <td style="  border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  56.                                 <b>  <span style="color:#9F000F">{{detail.Char_Name}}</span></b>  
  57.   
  58.                             </td>  
  59.                         </tr>  
  60.   
  61.                 </table>  
  62.   
  63.             </td>  
  64.   
  65.   
  66.   
  67.         </tr>  
  68.   
  69.   
  70.   
  71.   
  72.   
  73.         </tr>  
  74.   
  75.     </table>  
  76.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  77.   
  78.     <table id="tblContainers"  style='width: 20%;table-layout:fixed;' align="center">  
  79.   
  80.         <tr>  
  81.   
  82.             <td align="center">  
  83.                 <table style=" background-color:#F0F8FF;color:#566D7E; border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  84.                     <tr>  
  85.                         <td align="center" style="color:#9F000F;">  
  86.                             <h3>@Html.ActionLink("Get Ready to Play!", "CharacterTypeView", "WhosinYourMind")</h3>  
  87.                         </td>  
  88.                     </tr>  
  89.                   </table>  
  90.              </td>  
  91.         </tr>  
  92.     </table>  
  93.   
  94. </body>  
  95.   
  96. </html>  
  97.   
  98. <script src="~/Scripts/angular.js"></script>  
  99.   
  100. <script src="~/Scripts/shanuAngularScript/Modules.js"></script>  
  101.   
  102. <script src="~/Scripts/shanuAngularScript/Services.js"></script>  
  103.   
  104. <script src="~/Scripts/shanuAngularScript/Controllers.js"></script>  
2) CharacterTypeView View

Add another view named “CharacterTypeView”.

This is our main View. Here I will display the Celebrity Profession type and the user can select any celebrity profession that they can think of from the index page list. The user can start to play the game. Answer all the questions and find there the result.
  1. <html data-ng-app="RESTClientModule">  
  2. @{  
  3.     ViewBag.Title = "Select Your Character Profession";  
  4. }  
  5.   
  6.   
  7. <body>  
  8.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  9.     <table width="99%" style=" border-bottom:3px solid #3273d5;">  
  10.         <tr>  
  11.   
  12.             <td width=" 250">  
  13.                 <table width="99%">  
  14.                     <tr>  
  15.                         <td>  
  16.                             Welcome Mr. {{'SHANU'}} .  
  17.   
  18.                         </td>  
  19.   
  20.   
  21.                     </tr>  
  22.                 </table>  
  23.             </td>  
  24.             <td class="style1" align="center">  
  25.                 <h3>Who is in Your Mind Reader Quiz  :)</h3>  
  26.   
  27.   
  28.             </td>  
  29.             <td align="right">  
  30.                 <div ng-controller="AngularJs_WCFController">  
  31.                     Today Date is :  
  32.                     {{date | date:'yyyy-MM-dd'}}  
  33.                 </div>  
  34.   
  35.             </td>  
  36.         </tr>  
  37.     </table>  
  38.     <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  39.     <table width="100%" data-ng-controller="AngularJs_WCFController">  
  40.   
  41.         <tr ng-hide="firstbool" ng-init="Hidetables()">  
  42.   
  43.             <td>  
  44.   
  45.   
  46.   
  47.                 <table id="tblContainer" style='width: 99%;table-layout:fixed;'>  
  48.   
  49.                     <tr>  
  50.   
  51.                         <td>  
  52.                             <table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  53.                                 <tr>  
  54.                                     <th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">  
  55.                                         <h3>Select Your Character Profession which you have think in your mind.</h3>  
  56.                                     </th>  
  57.                                 </tr>  
  58.   
  59.                                 <tbody data-ng-repeat="detail in getCharacterTypeDisp">  
  60.   
  61.                                     <tr>  
  62.                                         <td style="  border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  63.                                             <b>  
  64.                                                 <input type="radio" name="rdoCharType" ng-model="detail.Character_Type" value="detail.Character_Type" ng-value="detail.Character_Type" ng-click="radioCheckValue(detail.Char_ID,detail.Character_Type)" />  
  65.                                                 <span style="color:#9F000F">{{detail.Character_Type}}</span>  
  66.                                             </b>  
  67.                                         </td>  
  68.                                     </tr>  
  69.   
  70.                             </table>  
  71.   
  72.                         </td>  
  73.   
  74.   
  75.   
  76.                     </tr>  
  77.                     <tr>  
  78.                         <td>  
  79.   
  80.                             <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  81.   
  82.                             <table id="tblContainers" style='width: 60%;table-layout:fixed;' align="center">  
  83.   
  84.                                 <tr>  
  85.   
  86.   
  87.   
  88.                                     <td align="center">  
  89.   
  90.                                         <table style=" background-color:#F0F8FF;color:#566D7E; border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  91.                                             <tr>  
  92.                                                 <td align="center" style="color:#566d7e;">  
  93.   
  94.                                                     You have selected <div><h3 style="color:#9F000F">{{CharacterType}} </h3></div>  as you have think in mind.  
  95.                                                     Now its time to read your mind lets start now.<br />  
  96.   
  97.                                                     <h4> Time to Begin :)"</h4>  
  98.                                                     <input type="button" id="Detail" value="lets Start" data-ng-click="get()" style="background-color:#2B547E;color:#FFFFFF;width:100px;height:30px">  
  99.                                                 </td>  
  100.                                             </tr>  
  101.                                         </table>  
  102.                                     </td>  
  103.                                 </tr>  
  104.                             </table>  
  105.                         </td>  
  106.                     </tr>  
  107.   
  108.                 </table>  
  109.             </td>  
  110.   
  111.         </tr>  
  112.         <tr ng-hide="secondbool" ng-init="Hidetables()">  
  113.             <td>  
  114.                 <table>  
  115.                     <tr>  
  116.                         <td>  
  117.   
  118.                             <table id="tblContainer" style='width: 100%;table-layout:fixed;'>  
  119.   
  120.                                 <tr>  
  121.   
  122.                                     <td align="right">  
  123.                                         <table id="tblContainers" style='width: 20%;table-layout:fixed;' align="right">  
  124.   
  125.                                             <tr>  
  126.   
  127.                                                 <td align="center">  
  128.                                                     <table style=" background-color:#F0F8FF;color:#566D7E; border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  129.                                                         <tr>  
  130.                                                             <td align="center" style="color:#566d7e;">  
  131.                                                                 <div>You have selected <h4 style="color:#9F000F">{{CharacterType}} </h4></div>  
  132.                                                             </td>  
  133.                                                         </tr>  
  134.                                                     </table>  
  135.                                                 </td>  
  136.                                             </tr>  
  137.                                         </table>  
  138.   
  139.   
  140.                                     </td>  
  141.                                 </tr>  
  142.                                 <tr>  
  143.                                     <td>  
  144.                                         <table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D; padding: 5px;width: 100%;table-layout:fixed;">  
  145.                                             <tr>  
  146.                                                 <th style=" background-color:#98AFC7; border-bottom: solid 4px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;">  
  147.                                                     <h3>Answer Yes or No to the below Questions ,this will help me to read your mind Star !.</h3>  
  148.                                                 </th>  
  149.                                             </tr>  
  150.   
  151.   
  152.   
  153.                                             <tr>  
  154.                                                 <td style="  border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  155.                                                     <b>  
  156.                                                         {{Question}}  
  157.                                                     </b>  
  158.                                                     <br />  
  159.                                                     <input type="radio" name="rdoAns" value="Yes" ng-click="rdoAnschk('Yes')" checked='checked' />YES  
  160.                                                     <input type="radio" name="rdoAns" value="No" ng-click="rdoAnschk('No')" />No  
  161.   
  162.                                                 </td>  
  163.                                             </tr>  
  164.   
  165.                                         </table>  
  166.   
  167.                                     </td>  
  168.   
  169.                                 </tr>  
  170.                             </table>  
  171.                     <tr>  
  172.                         <td>  
  173.                             <img src="~/Images/blank.gif" alt="" width="1" height="10" />  
  174.   
  175.                         </td>  
  176.                     </tr>  
  177.                     <tr>  
  178.   
  179.   
  180.   
  181.                         <td align="center">  
  182.   
  183.                             <table style=" background-color:#F0F8FF;color:#566D7E; border: dashed  2px #6D7B8D; padding: 5px;width: 14%;table-layout:fixed;">  
  184.                                 <tr>  
  185.                                     <td align="center" style="color:#566d7e;">  
  186.                                         <input type="button" id="Detail" value="Submit" data-ng-click="findAnswers()" style="background-color:#2B547E;color:#FFFFFF;width:100px;height:30px">  
  187.                                     </td>  
  188.                                 </tr>  
  189.                             </table>  
  190.                         </td>  
  191.                     </tr>  
  192.   
  193.   
  194.   
  195.   
  196.                 </table>  
  197.   
  198.             </td>  
  199.         </tr>  
  200.         <tr ng-hide="thirdbool" ng-init="hideresult()">  
  201.             <td>  
  202.                 <table>  
  203.                     <tr>  
  204.                         <td align="center">  
  205.   
  206.                             <table style=" background-color:#F0F8FF;color:#566D7E; border: dashed  2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">  
  207.                                 <tr>  
  208.                                     <td align="center" style="color:#566d7e;">  
  209.   
  210.                                         <div>  I hope so this is your Star <h3 style="color:#9F000F">{{YourDreamStarName}} </h3> whom you think in your Mind. </div>   
  211.                                           
  212.                                         <h3 style="color:#566D7E;">@Html.ActionLink("Shall we play again :)", "Index", "WhosinYourMind")</h3>  
  213.                                     </td>  
  214.                                 </tr>  
  215.                             </table>  
  216.                         </td>  
  217.                     </tr>  
  218.                 </table>  
  219.             </td>  
  220.         </tr>  
  221.     </table>  
  222.   
  223. </body>  
  224.   
  225. </html>  
  226.   
  227. <script src="~/Scripts/angular.js"></script>  
  228.   
  229. <script src="~/Scripts/shanuAngularScript/Modules.js"></script>  
  230.   
  231. <script src="~/Scripts/shanuAngularScript/Services.js"></script>  
  232.   
  233. <script src="~/Scripts/shanuAngularScript/Controllers.js"></script>  
Run your program

Here we can see that when I run the program, I first display the celebrity.

run you program

After clicking the Get ready to play link it will be redirected to the next page.



Here the user can select any one character profession that they can think of and click on Let's Start.

answer yes

Here the user can answer the question as Yes or No and click submit to check the next question.

Note: Here in my application I have set a maximum of 3 questions for a celebrity. The user can increase the questions depending on your requirements in the database and in Controler.js provide the question count the same as in the database in “$scope.finalresultCount = 3;”

The final result will be displayed like this.
we play

Note: Here are all the Celebrity Names, Celebrity Professions, Questions and Answers. All of them have been displayed from the database. There is no static data in my application. So the user can add their own celebrity Name, Profession and Question to the DB and have fun.

Supported Browsers: Chrome and Firefox.

Up Next
    Ebook Download
    View all
    Learn
    View all