MVC AngularJS 和 WCF Rest 服务用于“你是天才”测验
4.92/5 (33投票s)
使用 AngularJS 和 WCF Rest 服务创建一个在线“你是天才”测验游戏。
引言
您还可以查看我之前与使用 MVC 和 WCF REST 服务的 AngularJs 相关的文章。
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
与 Angular JS、MVC 和 WEB API 相关的先前文章。
- 使用 MVC、AngularJs 和 Web API 2 进行图像预览
- MVC、Angular JS 使用 WEB API 2 和存储过程进行 CRUD 操作
- 使用 MVC 和 AngularJS 进行动态项目调度
- MVC Web API 和 AngularJS 图像拼图游戏
那么，什么是心灵读数问答游戏？
心灵读数问答游戏是一种问答游戏，用户可以从名字列表中选择一个他们梦想中的明星。在线问答中，会有一些有限的问题，用户会被问到与他们梦想中的明星相关的是或否选项。根据用户的答案，系统最终会找出用户心中的那个人并给出结果。
在我（Shanu-Who's In Your Mind Reader）的在线问答应用程序中，用户可以从主页的列表中想到一个名人。我将确定您心中想的是谁。您可以从列表中选择任何受欢迎的人。他或她可能是演员、女演员、板球运动员或列表中的任何其他名人。我会问一些关于您心中所想的人的问题。您可以回答是或否。最后，我会告诉您您心中所想的明星的个性。
本文将详细介绍如何使用 Angular JS 和 WCF REST 服务创建在线心灵读数问答游戏。本文将介绍：
- 如何创建 WCF REST 服务并从数据库中检索数据。
- 如何将 Angular JS 包安装到 MVC 应用程序中。
- 如何创建我们的 Angular JS 应用程序来创建我们自己的主从网格。
- 如何使用 WCS 服务在 Angular JS 中创建我们自己的在线心灵读数问答游戏。
注意：先决条件是 Visual Studio 2013（如果您没有 Visual Studio 2013，可以从 Microsoft 网站此处下载）。
在这里，我们可以看到一些关于 Windows Communication Foundation (WCF) 的基础知识和参考链接。WCF 是一个用于构建面向服务应用程序的框架。
面向服务的应用程序
使用协议，服务可以在网络上共享和使用。
例如，让我们考虑现在我们正在做一个项目，我们需要创建一个通用的数据库函数，这些函数需要在多个项目中使用，而且这些项目位于不同的位置并通过互联网连接。
在这种情况下，我们可以创建一个 WCF 服务，并将所有通用数据库函数写入我们的 WCF 服务类中。我们可以将 WCF 部署到 IIS 中，并在我们的应用程序中使用 URL 来执行数据库功能。在代码部分，让我们看看如何创建 WCF REST 服务并在 Angular JS 应用程序中使用它。
如果您有兴趣阅读更多关于 WCF 的内容，请访问此链接。
Angular JS
我们可能熟悉模型、视图、视图模型 (MVVM) 以及模型、视图和控制器 (MVC) 是什么。Angular JS 是一个纯粹基于 HTML、CSS 和 JavaScript 的 JavaScript 框架。
Angular JS 的模型视图 whatever (MVW) 模式类似于 MVC 和 MVVM 模式。在我们的示例中，我使用了模型、视图和服务。在代码部分，让我们看看如何在我们的 MVC 应用程序中安装和创建 Angular JS。
如果您有兴趣阅读更多关于 Angular JS 的内容，请访问此链接。
Using the Code
1. 创建数据库和表
我们将在数据库 MindReader 下创建 Professional_Type、Character_Type、Character_Name 和 Questions 表。
以下是创建数据库、表和示例插入查询的脚本。
在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2012。
-- =============================================
-- Author : Shanu
-- Create date : 2015-03-16
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-03-16
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'MindReader' )
DROP DATABASE MindReader
GO
CREATE DATABASE MindReader
GO
USE MindReader
GO
-- 1) //////////// Professional_Type table
-- Create Table Professional_Type ,This table will be used to store the details like
-- Professional type as Sports,Bollywood Movie Star,kollywood Movie Star
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Professional_Type' )
DROP TABLE Professional_Type
GO
CREATE TABLE Professional_Type
(
Profes_ID VARCHAR(10) NOT NULL,
Profes_Type VARCHAR(50)
CONSTRAINT [PK_Professional_Type] PRIMARY KEY CLUSTERED
(
[Profes_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the Character_Type Table
Insert into Professional_Type(Profes_ID,Profes_Type) values('1','Sports')
Insert into Professional_Type(Profes_ID,Profes_Type) values('2','Bollywood Movie Star')
Insert into Professional_Type(Profes_ID,Profes_Type) values('3','kollywood Movie Star')
-- 1) END //
-- 2) //////////// Character_type table
-- Create Table Character_Type ,This table will be used to store the details
-- like Character type as Cricket,Bollywood Actor,kollywood Actor
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Character_Type' )
DROP TABLE Character_Type
GO
CREATE TABLE Character_Type
(
Char_ID VARCHAR(10) NOT NULL,
Profes_ID VARCHAR(10) NOT NULL CONSTRAINT _
fk_Professional_Type FOREIGN KEY REFERENCES Professional_Type,
Char_Type VARCHAR(50)
CONSTRAINT [PK_Character_Type] PRIMARY KEY CLUSTERED
(
[Char_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, _
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the Character_Type Table
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('1','1','Cricket')
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('2','2','Bollywood Actor')
--Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('3','2','Bollywood Actress')
Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('4','3','kollywood Actor')
--Insert into Character_Type(Char_ID,Profes_ID,Char_Type) values('5','3','kollywood Actress')
-- 2) END //
-- 3) //////////// Character_Name
-- Create Table Character_Name ,This table will be used
-- to store the details of Character Names
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Character_Name' )
DROP TABLE Character_Name
GO
CREATE TABLE Character_Name
(
Char_Name_ID VARCHAR(10) NOT NULL,
Char_ID VARCHAR(10) NOT NULL CONSTRAINT _
fk_Character_Type FOREIGN KEY REFERENCES Character_Type,
Char_Name VARCHAR(50),
Char_Status VARCHAR(20)
CONSTRAINT [PK_Char_Name] PRIMARY KEY CLUSTERED
(
[Char_Name_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the Character_Type Table
--Sports
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('1','1','Sachin Tendulkar','Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('2','1','Sunil Gavaskar' ,'Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('3','1','Mohammed Azharuddin','Past')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('4','1','Mahender Singh Dhoni','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('5','1','Shikhar Dhawan','Present')
--Bollywood Actor
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('6','2','Amitabh Bachchan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('7','2','Shah Rukh Khan' ,'Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('8','2','Aamir Khan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('9','2','Salman Khan','Present')
--kollywood Actor
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('10','4','Rajini Kanth','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('11','4','Ajith Kumar' ,'Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('12','4','Kamala Hasan','Present')
Insert into Character_Name(Char_Name_ID,Char_ID,Char_Name,Char_Status) _
values('13','4','Vijay','Present')
-- 3) END //
--//test Select
--select * from Professional_Type
--select * from Character_Type
--select * from Character_Name
--////end test select
-- 4) //////////// Questions
-- Create Table Questions, This table will be used to store the details of Character Names
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'Questions' )
DROP TABLE Questions
GO
CREATE TABLE Questions
(
Question_ID VARCHAR(10) NOT NULL,
Char_Name_ID VARCHAR(10) NOT NULL CONSTRAINT _
fk_Character_Name FOREIGN KEY REFERENCES Character_Name,
Question VARCHAR(300),
Answer VARCHAR(100)
CONSTRAINT [PK_Questions] PRIMARY KEY CLUSTERED
(
[Question_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, _
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
-- Insert the sample records to the Character_Type Table
--Sports
--// Sachin
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('1','1','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('2','1','Is he born in Mumbai, Maharastra?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('3','1','Is he also called as nick name Little Master?','Yes')
--// Sunil Gavaskar
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('4','2','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('5','2','Is he born in Mumbai, Maharastra?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('6','2','Is he also called as nickname Sunny?','Yes')
--// Mohammed Azharuddin
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('7','3','Is he Present Player?','No')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('8','3','Is he born in Hyderabad, Andhra Pradesh?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('9','3','Is he also called as nickname Ajju?','Yes')
--// Mahender Singh Dhoni
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('10','4','Is he Present Player?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('11','4','Is he born in Ranchi, Jharkhand?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('12','4','Is he also called as nickname Mahi?','Yes')
--// Shikhar Dhawan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('13','5','Is he Present Player?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('14','5','Is he born in Delhi?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('15','5','Is he also called as nickname Gabbar?','Yes')
--Bollywood Actor
--// Amitabh Bachchan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('16','6','Is Your Actor Born in Allahabad, Uttar Pradesh?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('17','6','Is Your Actor Father Was a Hindi Poet?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('18','6','Is your Actor married to a Actress named Jaya Bhaduri?','Yes')
--// Shah Rukh Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('19','7','Is your Actor born in New Delhi?','Yes')
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')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('21','7','Is your Actor is called as King Khan?','Yes')
--// Aamir Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('22','8','Is your Actor born in Mumbai?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('23','8','Is his father was a producer?' ,'Yes')
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')
--// Salman Khan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('25','9','Is your Actor born in Indore?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('26','9','Is his father was a screenwriter?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('27','9',') Is your Actor brothers name is Arbaaz khan?','Yes')
--kollywood Actor
--// Rajini Kanth
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('28','10','Is your Actor born in Karnataka?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('29','10','Is your Actor is called as Super Star?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('30','10','Is your Actor is called as Thalapathy?','Yes')
--// Ajith Kumar
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('31','11','Is Your Actor Born in Hyderabad?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('32','11','Is Your Actor Motor Bike racer?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('33','11','Is your Actor nick name is Thala?','Yes')
--// Kamala Hasan
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('34','12','Is your Actor born in Paramakudi?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('35','12','Is your Actor received padma shri award during 1990?' ,'Yes')
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')
--// Vijay
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('37','13','Is your Actor born in Chennai?','Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('38','13','Is his father producer/Director?' ,'Yes')
Insert into Questions(Question_ID,Char_Name_ID,Question,Answer) _
values('39','13','Is your Actor Called as Ilaya Thalapathy?','Yes')
-- 4) END //
--//test Select
select * from Professional_Type
select * from Character_Type
select * from Character_Name
select * from Questions order by Question_ID,Char_Name_ID
--////end test select
--// this is sample join query which i will be used in WCF function for Linq query
select A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
FROM
Questions A
Inner JOIN Character_Name B
ON A.Char_Name_ID=B.Char_Name_ID
WHERE
B.Char_ID='1'
order by cast(A.Question_ID as INT)
2. 创建 WCF REST 服务
打开 Visual Studio 2013 -> 选择 文件-新建-项目 – 选择 WCF 服务应用程序 -> 选择您的项目路径并命名您的 WCF 服务，然后单击 确定。
创建 WCF 服务后，我们可以在“解决方案资源管理器”中看到“IService.CS”和“Service1.svc”，如下所示：
IService.CS - > 在“IService.CS”中，默认可以看到三个契约：
[ServiceContract]- > 描述了服务可用的方法或任何操作。服务契约是一个接口，并且可以使用 Operation Contract 属性在服务接口中声明方法。[OperationContract]- > 类似于 Web 服务[WEBMETHOD]。[DataContract]- > 描述客户端和服务之间的数据交换。
[ServiceContract]
以下代码将自动为所有 IService.CS 文件创建。我们可以在这里更改并编写自己的代码。
public interface IService1
{
[OperationContract]
string GetData(int value);
[OperationContract]
CompositeType GetDataUsingDataContract(CompositeType composite);
// TODO: Add your service operations here
}
// Use a data contract as illustrated in the sample below to add composite types
// to service operations.
[DataContract]
public class CompositeType
{
bool boolValue = true;
string stringValue = "Hello ";
[DataMember]
public bool BoolValue
{
get { return boolValue; }
set { boolValue = value; }
}
[DataMember]
public string StringValue
{
get { return stringValue; }
set { stringValue = value; }
}
}
数据合同
在我们的示例中，我们需要同时从数据库获取角色类型和角色名称，因此我创建了三个数据契约：“CharacterTypeDataContract”、“CharacterNameDataContract”和“questionAnswersDataContract”。
在这里，我们可以看到我们将整个表列名声明为数据成员。
public class whosInYourMinDataContract
{
[DataContract]
public class CharacterTypeDataContract
{
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Character_Type { get; set; }
}
[DataContract]
public class CharacterNameDataContract
{
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
[DataContract]
public class questionAnswersDataContract
{
[DataMember]
public string Question_ID { get; set; }
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Question { get; set; }
[DataMember]
public string Answer { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
}
服务合同
在“Operation Contract”中，我们可以看到“WebInvoke”和“WebGet”，它们用于在 REST 服务中从数据库检索数据。
RequestFormat = WebMessageFormat.JsonResponseFormat = WebMessageFormat.Json
在这里，我们可以看到请求和响应格式，我在这里使用了 Json 格式。
- JSON -> JavaScript Object Notation 是一种轻量级的数据交换格式。
UriTemplate- > 是我们的方法名称，这里我们的方法返回类型是List。
在这里，我声明了三个方法：“GetCharacterType”、“getCharacterNames”和“questionAnswers”。“GetOrderMaster”方法用于获取名人职业（他或她可能是板球运动员、电影演员等），“getCharacterNames”用于从数据库获取所有名人姓名，而“questionAnswers”用于从数据库获取所有问题。
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetCharacterType/")]
List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/getCharacterNames/")]
List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/questionAnswers/{Char_ID}")]
List<whosInYourMinDataContract.questionAnswersDataContract>
questionAnswers(string Char_ID);
}
Iservice.Cs -> 完整源代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Shanu_QuizWcfService
{
// NOTE: You can use the "Rename" command on the "Refactor"
// menu to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetCharacterType/")]
List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/getCharacterNames/")]
List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames();
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/questionAnswers/{Char_ID}")]
List<whosInYourMinDataContract.questionAnswersDataContract>
questionAnswers(string Char_ID);
}
// Use a data contract as illustrated in the sample below
// to add composite types to service operations.
public class whosInYourMinDataContract
{
[DataContract]
public class CharacterTypeDataContract
{
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Character_Type { get; set; }
}
[DataContract]
public class CharacterNameDataContract
{
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
[DataContract]
public class questionAnswersDataContract
{
[DataMember]
public string Question_ID { get; set; }
[DataMember]
public string Char_Name_ID { get; set; }
[DataMember]
public string Char_ID { get; set; }
[DataMember]
public string Question { get; set; }
[DataMember]
public string Answer { get; set; }
[DataMember]
public string Char_Name { get; set; }
[DataMember]
public string Char_Status { get; set; }
}
}
}
使用 ADO.NET 实体数据模型添加数据库
右键单击您的 WCF 项目，选择 添加新项 -> 选择 ADO.NET 实体数据模型，然后单击 添加。
选择 从数据库生成 EF 设计器，然后单击 下一步。
单击 新建连接。
在这里，我们可以选择我们的数据库服务器名称，输入您的数据库服务器 SQL Server 身份验证用户名和密码。我们已经创建了名为“OrderManagement”的数据库，所以我们可以选择该数据库并单击 确定。
单击 下一步，选择我们需要使用的表，然后单击 完成。
在这里，我们可以看到我们已经创建了 shanuQuizModel。
Service1.SVC
“Service.SVC.CS”实现了 IService 接口，并重写并定义了所有 Operation Contract 方法。
例如，在这里我们可以看到我已经实现了 Service1 类中的 IService1。为我们的实体模型创建了对象，并在 questionAnswers 中使用 LINQ 查询，我使用了 Linq Join 查询来连接 2 个表并根据 Char_Id 过滤结果，然后将结果添加到列表中。
public class Service1 : IService1
{
shanuQuizEntities OME;
public Service1()
{
OME = new shanuQuizEntities();
}
public List<whosInYourMinDataContract.questionAnswersDataContract>
questionAnswers(string Char_ID)
{
var query = (from A in OME.Questions
join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID
where B.Char_ID.Equals(Char_ID)
select new
{
A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
}).ToList().OrderBy(q => Int32.Parse(q.Question_ID));
List<whosInYourMinDataContract.questionAnswersDataContract>
questionAnswersList = new List<whosInYourMinDataContract.questionAnswersDataContract>();
query.ToList().ForEach(rec =>
{
questionAnswersList.Add
(new whosInYourMinDataContract.questionAnswersDataContract
{
Question_ID =rec.Question_ID,
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Question = rec.Question,
Answer = rec.Answer,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return questionAnswersList;
}
}
“Service.SVC.CS” - 完整源代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using Shanu_QuizWcfService.Model;
namespace Shanu_QuizWcfService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu
// to change the class name "Service1" in code, svc and config file together.
// 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.
public class Service1 : IService1
{
shanuQuizEntities OME;
public Service1()
{
OME = new shanuQuizEntities();
}
public List<whosInYourMinDataContract.CharacterTypeDataContract> GetCharacterType()
{
var query = (from a in OME.Character_Type
select a).Distinct();
List<whosInYourMinDataContract.CharacterTypeDataContract>
CharacterTypeList =
new List<whosInYourMinDataContract.CharacterTypeDataContract>();
query.ToList().ForEach(rec =>
{
CharacterTypeList.Add
(new whosInYourMinDataContract.CharacterTypeDataContract
{
Char_ID = rec.Char_ID,
Character_Type = rec.Char_Type
});
});
return CharacterTypeList;
}
public List<whosInYourMinDataContract.CharacterNameDataContract> getCharacterNames()
{
List<whosInYourMinDataContract.CharacterNameDataContract>
CharacterNameList =
new List<whosInYourMinDataContract.CharacterNameDataContract>();
try
{
var query = (from a in OME.Character_Name
select a).ToList().OrderBy(q => Int32.Parse(q.Char_Name_ID));
query.ToList().ForEach(rec =>
{
CharacterNameList.Add
(new whosInYourMinDataContract.CharacterNameDataContract
{
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return CharacterNameList;
}
catch (Exception ex)
{
throw new FaultException<string>
(ex.Message);
}
}
public List<whosInYourMinDataContract.questionAnswersDataContract>
questionAnswers(string Char_ID)
{
var query = (from A in OME.Questions
join B in OME.Character_Name on A.Char_Name_ID equals B.Char_Name_ID
where B.Char_ID.Equals(Char_ID)
select new
{
A.Question_ID,
A.Char_Name_ID,
B.Char_ID,
A.Question,
A.Answer,
B.Char_Name,
B.Char_Status
}).ToList().OrderBy(q => Int32.Parse(q.Question_ID));
List<whosInYourMinDataContract.questionAnswersDataContract> questionAnswersList =
new List<whosInYourMinDataContract.questionAnswersDataContract>();
query.ToList().ForEach(rec =>
{
questionAnswersList.Add
(new whosInYourMinDataContract.questionAnswersDataContract
{
Question_ID =rec.Question_ID,
Char_Name_ID = rec.Char_Name_ID,
Char_ID = rec.Char_ID,
Question = rec.Question,
Answer = rec.Answer,
Char_Name = rec.Char_Name,
Char_Status = rec.Char_Status
});
});
return questionAnswersList;
}
}
}
Web.Config
在 WCF 项目中，“Web.Config”
- 将
<add binding="basicHttpsBinding" scheme="https" />更改为<add binding="webHttpBinding" scheme="http" /> - 将
</behaviors>替换为
<endpointBehaviors>
<behavior>
<webHttp helpEnabled="True"/>
</behavior>
</endpointBehaviors>
</behaviors>
运行 WCF 服务：现在，我们已经创建了 WCF REST 服务，让我们运行并测试我们的服务。在我们的服务 URL 中，我们可以添加方法名称，就可以看到来自数据库的 JSON 结果数据。
创建 MVC Web 应用程序
现在我们完成了 WCF 部分，现在是时候创建我们的 MVC Angular JS 应用程序了。
我们可以向现有项目添加新项目，并创建一个新的 MVC Web 应用程序，如下所示：
右键单击您的解决方案，然后单击 添加新项目 -> 输入您的项目名称，然后单击 确定。
选择 MVC，然后单击 确定。
现在我们已经创建了 MVC 应用程序，现在是时候添加 WCF 服务并将 Angular JS 包安装到我们的解决方案中了。
添加 WCF 服务
右键单击 MVC 解决方案，单击 添加 -> 单击 服务引用。
输入您的 WCF URL，然后单击 GO。我的 WCF URL 是 https://:4194/Service1.svc。
添加您的名字，然后单击 确定。
现在我们已成功将 WCF 服务添加到我们的 MVC 应用程序中。
安装 Angular JS 包的步骤
右键单击您的 MVC 项目，然后单击 -> 管理 NuGet 程序包。
<p<img src="893821/14.jpg">
选择 Online，然后搜索 Angular JS。选择 AngularJs，然后单击 安装。
现在我们已经将 AngularJS 包安装到了我们的 MVC 项目中。现在让我们创建我们的 Angular Js。
- Modules.js
- Controllers.js
- Services.js
创建 Angular Js 脚本文件的步骤
右键单击 Script 文件夹，然后创建您自己的文件夹来创建我们的 Angular Js 模型/控制器和服务的 JavaScript。在您的 script 文件夹中，添加三个 JavaScript 文件，并分别命名为 Modules.js、Controllers.js 和 Services.js，如下所示：
Modules.js：在这里，我们添加对 Angular.js JavaScript 的引用，并创建一个名为“RESTClientModule”的 Angular 模块。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();
Services.js：在这里，我们添加对 Angular.js JavaScript 和我们的 Module.js 的引用。
在这里，我们给我们的服务命名，并在 controllers.js 中使用这个名字。在这里，我给 Angular 服务命名为“AngularJs_WCFService”。您可以给自己起名字，但请小心在 Controllers.js 中更改名字。在这里，我们可以看到方法中，我已经传递了我们的 WCF 服务 URL。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
app.service("AngularJs_WCFService", function ($http) {
//Get Order Master Records
this.GetCharacterType = function () {
return $http.get("https://:4194/Service1.svc/GetCharacterType");
};
//Search Order Master Records
this.getCharacterNames = function () {
return $http.get("https://:4194/Service1.svc/getCharacterNames/");
}
this.getquestionAnswers = function (Char_ID) {
return $http.get("https://:4194/Service1.svc/questionAnswers/" + Char_ID);
}
});
Controllers.js：在这里，我们添加对 Angular.js JavaScript 和我们的 Module.js 和 Services.js 的引用。与 Services 类似，我给控制器命名为“AngularJs_WCFController”。
在 Controller 中，我执行了所有业务逻辑，并将数据从 WCF JSON 数据返回到我们的 MVC HTML 页面。
1) 变量声明
首先，我声明了所有需要使用的本地变量和当前日期，并使用 $scope.date 存储日期。
注意：$scope.finalresultCount = 3; 这是一个非常重要的变量。在这里，我将默认值设置为 3。在我的问答程序中，每个名人有 3 个问题。如果我们增加问题的数量，那么我们需要在这里给出相同的计数。
2）方法
Hidetables()
此方法用于隐藏和显示 Table TR 的显示，以便在同一页面上显示名人职业选择、回答问题以及显示最终结果。
getCharacterNames()
在此方法中，我将从 JSON 中获取所有名人姓名，并将结果绑定到主页。从那里，用户可以想到一个名人并开始玩问答游戏。
GetCharacterType()
在此方法中，我将从 JSON 中获取所有名人职业类型，并将最终结果绑定到单选按钮。
findYourAnswer()
在此方法中，我将逐个从数据库中获取问题，并将问题绑定给用户回答。
$scope.findAnswers = function()
当用户单击提交按钮时，将调用此方法。在此方法中，我将执行所有业务逻辑，如显示下一个问题、检查最终结果并显示合适的名人姓名作为最终结果。
Controller.js 完整源代码
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
/// <reference path="Services.js" />
app.controller("AngularJs_WCFController",
function ($scope, $rootScope, $window, AngularJs_WCFService) {
$scope.date = new Date();
// 1) To Store the user selected Character Profession
$scope.CharacterID = 4;
$scope.CharacterType = 'kollywood Actor';
// 2) To show and Hide the Table to display Character Type Selection and Question
var firstbool = true;
var secondbool = false;
var thirdbool = false;
// * 3) Question and Answer final Judgement Local Variables
$scope.Question_ID;
$scope.Char_Name_ID;
$scope.Char_ID;
$scope.Question;
$scope.Answer;
$scope.Char_Name;
$scope.Char_Status;
$scope.User_Selected_Result = 'Yes';
$scope.loopCount = 0;
$scope.resultCount = 0;
$scope.finalresultCount = 3;
$scope.NextStar = 0;
$scope.totalQuestionCount = 0;
$scope.QuestionIncrement = 0;
$scope.YourDreamStarName = "";
// end 3)
Hidetables()
function Hidetables() {
if ($scope.firstbool == false) {
$scope.firstbool = true;
$scope.secondbool = false;
$scope.thirdbool = true
}
else
{
$scope.firstbool = false;
$scope.secondbool = true;
$scope.thirdbool = true;
}
}
hideresult()
function hideresult() {
if ($scope.thirdbool == false) {
$scope.thirdbool = true;
}
}
GetCharacterType();
getCharacterNames();
//To Get All Records
function GetCharacterType() {
var promiseGet = AngularJs_WCFService.GetCharacterType();
promiseGet.then(function (pl) {
$scope.getCharacterTypeDisp = pl.data
},
function (errorPl) {
});
}
//To Get Student Detail on the Base of Student ID
function getCharacterNames() {
var promiseGet = AngularJs_WCFService.getCharacterNames();
promiseGet.then(function (pl) {
$scope.getCharacterNamesDisp = pl.data;
// alert(res.Char_Name);
},
function (errorPl) {
});
}
$scope.radioCheckValue = function (CharID, CharType) {
$scope.CharacterID = CharID;
$scope.CharacterType = CharType;
};
$scope.get = function () {
$scope.firstbool = true;
$scope.secondbool = false;
$scope.NextStar = 0;
$scope.loopCount = 0;
findYourAnswer();
}
function findYourAnswer()
{
var promiseGet = AngularJs_WCFService.getquestionAnswers($scope.CharacterID);
promiseGet.then(function (pl) {
$scope.questionAnswersDisp = pl.data
$scope.totalQuestionCount = $scope.questionAnswersDisp.length;
for (x in $scope.questionAnswersDisp) {
if (x == $scope.loopCount) {
$scope.Question_ID = $scope.questionAnswersDisp[x].Question_ID;
$scope.Char_Name_ID = $scope.questionAnswersDisp[x].Char_Name_ID;
$scope.Char_ID = $scope.questionAnswersDisp[x].Char_ID;
$scope.Question = $scope.questionAnswersDisp[x].Question;
$scope.Answer = $scope.questionAnswersDisp[x].Answer;
$scope.Char_Name = $scope.questionAnswersDisp[x].Char_Name;
$scope.Char_Status = $scope.questionAnswersDisp[x].Char_Status;
$scope.QuestionIncrement = $scope.QuestionIncrement + 1;
}
}
},
function (errorPl) {
});
}
$scope.rdoAnschk = function (chkResult) {
$scope.User_Selected_Result = chkResult;
};
$scope.findAnswers = function () {
if ($scope.User_Selected_Result == 'Yes')
{
$scope.resultCount = $scope.resultCount + 1;
}
else
{
if ($scope.Answer == 'No') {
$scope.resultCount = $scope.resultCount + 1;
if ($scope.NextStar > 0) {
$scope.NextStar = $scope.NextStar - 1;
}
}
else {
if ($scope.resultCount > 0) {
$scope.resultCount = $scope.resultCount - 1;
}
$scope.NextStar = $scope.NextStar + 1;
}
}
if ($scope.NextStar == $scope.finalresultCount)
{
alert('Hope my guess was Wrong! lets start for other Star ');
$scope.NextStar = 0;
}
if ($scope.resultCount == $scope.finalresultCount) {
$scope.secondbool = true;
$scope.thirdbool = false;
$scope.YourDreamStarName = $scope.Char_Name;
alert('Your Dream Star in your mind is ' + $scope.YourDreamStarName);
return;
}
$scope.loopCount = $scope.loopCount + 1;
findYourAnswer();
if($scope.QuestionIncrement>= $scope.totalQuestionCount)
{
$scope.secondbool = true;
$scope.thirdbool = false;
$scope.YourDreamStarName = "Sorry My Dear Friend.
All the Questions are Completed. I cont find your answer. Shall we try again";
alert($scope.YourDreamStarName);
return;
}
}
});
现在，我们已经创建了 AngularJs 模块/控制器和服务。接下来是什么？
创建 MVC 控制器和视图以显示我们的结果
添加 Controller
右键单击Controllers -> Add Controller -> 选择 MVC 5 Controller – Empty -> 单击 Add。
更改控制器名称，我在这里将其命名为“WhosinYourMindController”，然后单击 OK。
添加视图：右键单击 Controller Index，然后单击 Add View。
1）Index View：将视图命名为“Index”。
在视图中设计页面，并引用 angular.js、Modules.js、Services.js 和 Controllers.js。
在 Angular JS 中，我们使用 {{ }} 来绑定或显示数据。
在这里，我们可以看到我首先创建了一个表格，然后是这个表格。
首先在表格中，我使用了 data-ng-controller="AngularJs_WCFController"，在这里，我们可以看到 data-ng-controller 将用于将控制器的数据绑定到我们的 HTML 表格。
使用 <tbody data-ng-repeat=" detail in getCharacterNamesDisp">，我们可以获取所有记录，并使用 <td><span>{{ detail.Char_Name}}</span></td>，将所有数据绑定到表格中。
<html data-ng-app="RESTClientModule">
@{
ViewBag.Title = "Who is in Your Mind Reader";
}
<body>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table width="99%" style="
border-bottom:3px solid #3273d5;">
<tr>
<td width=" 250">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}} .
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Who is in Your Mind Reader Quiz :)</h3>
</td>
<td align="right">
<div ng-controller="AngularJs_WCFController">
Today Date is :
{{date | date:'yyyy-MM-dd'}}
</div>
</td>
</tr>
</table>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table id="tblContainer"
data-ng-controller="AngularJs_WCFController"
style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#ECF3F4; border: solid 2px #6D7B8D;
padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7;
border-bottom: solid 4px #FFFFFF; padding: 5px;
width: 99%;table-layout:fixed;">
<h3>Think Any one of your Dream Star
in your mind from the list Below.</h3>
</th>
</tr>
<tbody data-ng-repeat="detail in getCharacterNamesDisp">
<tr>
<td style=" border: dashed 2px #6D7B8D;
padding: 5px;width: 99%;table-layout:fixed;">
<b> <span style="color:#9F000F">
{{detail.Char_Name}}</span></b>
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table id="tblContainers"
style='width: 20%;table-layout:fixed;' align="center">
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E;
border: dashed 2px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#9F000F;">
<h3>@Html.ActionLink("Get Ready to Play!",
"CharacterTypeView", "WhosinYourMind")</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/shanuAngularScript/Modules.js"></script>
<script src="~/Scripts/shanuAngularScript/Services.js"></script>
<script src="~/Scripts/shanuAngularScript/Controllers.js"></script>
2）CharacterTypeView 视图
添加另一个名为“CharacterTypeView”的视图。
这是我们的主视图。在这里，我将显示名人职业类型，用户可以选择他们在索引页面列表中想到的任何一个名人职业。用户可以开始游戏。回答所有问题，最终找到结果。
<html data-ng-app="RESTClientModule">
@{
ViewBag.Title = "Select Your Character Profession";
}
<body>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table width="99%"
style=" border-bottom:3px solid #3273d5;">
<tr>
<td width=" 250">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}} .
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Who is in Your Mind Reader Quiz :)</h3>
</td>
<td align="right">
<div ng-controller="AngularJs_WCFController">
Today Date is :
{{date | date:'yyyy-MM-dd'}}
</div>
</td>
</tr>
</table>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table width="100%"
data-ng-controller="AngularJs_WCFController">
<tr ng-hide="firstbool" ng-init="Hidetables()">
<td>
<table id="tblContainer"
style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#ECF3F4;
border: solid 2px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7;
border-bottom: solid 4px #FFFFFF; padding: 5px;
width: 99%;table-layout:fixed;">
<h3>Select Your Character Profession
which you have think in your mind.</h3>
</th>
</tr>
<tbody data-ng-repeat="detail in getCharacterTypeDisp">
<tr>
<td style=" border: dashed 2px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;">
<b>
<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)" />
<span style="color:#9F000F">
{{detail.Character_Type}}</span>
</b>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
<table id="tblContainers"
style='width: 60%;table-layout:fixed;' align="center">
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E;
border: dashed 2px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;">
<tr>
<td align="center"
style="color:#566d7e;">
You have selected <div>
<h3 style="color:#9F000F">
{{CharacterType}}
</h3></div> as you have think in mind.
Now its time to read your mind
lets start now.<br />
<h4> Time to Begin :)"</h4>
<input type="button" id="Detail"
value="lets Start" data-ng-click="get()"
style="background-color:#2B547E;
color:#FFFFFF;width:100px;height:30px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr ng-hide="secondbool" ng-init="Hidetables()">
<td>
<table>
<tr>
<td>
<table id="tblContainer"
style='width: 100%;table-layout:fixed;'>
<tr>
<td align="right">
<table id="tblContainers"
style='width: 20%;table-layout:fixed;'
align="right">
<tr>
<td align="center">
<table style="
background-color:#F0F8FF;color:#566D7E;
border: dashed 2px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;">
<tr>
<td align="center"
style="color:#566d7e;">
<div>You have selected
<h4 style="color:#9F000F">
{{CharacterType}}
</h4></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style=" background-color:#ECF3F4;
border: solid 2px #6D7B8D;
padding: 5px;width: 100%;table-layout:fixed;">
<tr>
<th style=" background-color:#98AFC7;
border-bottom: solid 4px #FFFFFF;
padding: 5px;width: 99%;
table-layout:fixed;">
<h3>Answer Yes or No
to the below Questions,
this will help me to read your
mind Star !.</h3>
</th>
</tr>
<tr>
<td style=" border: dashed 2px #6D7B8D;
padding: 5px;width: 99%;table-layout:fixed;">
<b>
{{Question}}
</b>
<br />
<input type="radio" name="rdoAns"
value="Yes"
ng-click="rdoAnschk('Yes')"
checked='checked' />YES
<input type="radio" name="rdoAns"
value="No"
ng-click="rdoAnschk('No')" />No
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td>
<img src="~/Images/blank.gif" alt=""
width="1" height="10" />
</td>
</tr>
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E;
border: dashed 2px #6D7B8D;
padding: 5px;width: 14%;table-layout:fixed;">
<tr>
<td align="center"
style="color:#566d7e;">
<input type="button" id="Detail"
value="Submit"
data-ng-click="findAnswers()"
style="background-color:#2B547E;
color:#FFFFFF;width:100px;height:30px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr ng-hide="thirdbool" ng-init="hideresult()">
<td>
<table>
<tr>
<td align="center">
<table style=" background-color:#F0F8FF;color:#566D7E;
border: dashed 2px #6D7B8D; padding: 5px;
width: 99%;table-layout:fixed;">
<tr>
<td align="center" style="color:#566d7e;">
<div> I hope so this is your Star
<h3 style="color:#9F000F">
{{YourDreamStarName}}
</h3> whom you think in your Mind. </div>
<h3 style="color:#566D7E;">@Html.ActionLink
("Shall we play again :)", "Index",
"WhosinYourMind")</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/shanuAngularScript/Modules.js"></script>
<script src="~/Scripts/shanuAngularScript/Services.js"></script>
<script src="~/Scripts/shanuAngularScript/Controllers.js"></script>
运行您的程序
在这里，我们可以看到，当我运行程序时，我首先显示名人。
单击“准备玩”链接后，它将重定向到下一页。
在这里，用户可以选择他们心中所想的任何一个角色职业，然后单击开始。
在这里，用户可以回答是或否的问题，然后单击提交以检查下一个问题。
注意：在我应用程序中，我为每个名人设置了最多 3 个问题。您可以根据您的要求在数据库和 Controller.js 中增加问题数量，并在“$scope.finalresultCount = 3;”中给出与数据库相同的问题计数。
最终结果将显示如下：
关注点
注意：这里所有的名人姓名、名人职业、问题和答案都来自数据库。我的应用程序中没有静态数据。因此，用户可以向数据库添加自己的名人姓名、职业和问题，并尽情享受。
支持的浏览器：Chrome 和 Firefox
历史
- 2015 年 4 月 6 日：初始版本