使用 MVC 和 WCF REST 构建 Angular JS 过滤、排序和动画

syed shanu

4.89/5 (21投票s)

2015年5月6日

CPOL

11分钟阅读

51427

2013

如何使用 AngularJs 过滤器、AngularJs 排序、AngularJs 动画、图片鼠标悬停和鼠标移出事件

下载源代码 - 8.7 MB

引言

在本文中，我们将看到如何使用

AngularJs 过滤器
AngularJs 排序
AngularJs 动画
图片鼠标悬停和鼠标移出事件

您还可以查看我之前关于使用 MVC 和 WCF Rest 服务的 AngularJs 的文章

本文将详细解释如何使用 Angular JS 和 WCF Rest 服务创建一个在线读心术问答游戏。本文将解释

如何创建 WCF Rest 服务并从数据库中检索数据
如何在 MVC 应用程序中安装 Angular JS 包
如何创建我们的 Angular JS 应用程序以创建我们自己的主从网格
如何在 Angular JS 中使用 WCS 服务创建我们自己的在线读心术问答游戏

注意：先决条件是 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。

由于本文解释了如何在 AngularJS 中使用过滤器、排序和简单动画，我们在此逐一介绍。

ng-repeat：首先，我们从ng-repeat开始。它可用于在我们的Table td或List中逐一显示数据数组。例如，假设我们想显示从1到10的数据。通常，我们通过循环逐一显示值，或者将1到10的值添加到数组中并通过循环显示。要在 AngularJs 中使用循环并逐一显示数据，我们使用ng-repeat。

例如，我们来看看上面的情况，如何在表格中显示从1到10的数据，代码如下：

<table>
    <tbody ng-repeat="Numbers in [1, 2, 3, 4,5,6,7,8,9,10] ">
        <tr>
            <td>
                {{Numbers}}
            </td>
        </tr>
    </tbody>
</table>

该示例可用于从名称Array中逐一显示名称。

<table>
   <tbody ng-repeat="Names in ['Shanu','Afraz',
   'Raja','Afreen','Mak','Albert'] ">
        <tr>
            <td>
                {{Names}}
            </td>
        </tr>
    </tbody>
</table>

要测试此示例，我们需要将 angular.js 添加到我们的根文件夹中。完整的代码将是这样。这里，我们可以看到我们首先添加了 angular.js 引用。

<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script>
        angular.module('MyAngularModule', [])
        .controller('myAngularController', function (
          $scope
        ) {
        });
    </script>
</head>
<body ng-controller="myAngularController">
    <table>
        <tbody ng-repeat="Numbers in [1, 2, 3, 4,5,6,7,8,9,10] ">
            <tr>
                <td>
                    {{Numbers}}
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody ng-repeat="Names in ['Shanu','Afraz',
        'Raja','Afreen','Mak','Albert'] ">
            <tr>
                <td>
                    {{Names}}
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

1) 过滤器

过滤器可以使用管道符号添加到ng-repeat中，例如，考虑上面的例子。

例如，我们可以考虑上面我们使用ng-repeat显示数组名称的例子。现在，我们可以为上面的例子添加过滤器。

这里，我们可以看到我们已经在ng-repeat中添加了过滤器，并且为过滤器指定了textbox的模型id。当用户在textbox上按下键时，过滤器将应用于循环并显示相应的值。

ng-repeat="Names in ['Shanu','Afraz','Raja','Afreen','Mak','Albert'] | filter:myNameFilters

完整代码

<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script>
        angular.module('MyAngularModule', [])
        .controller('myAngularController', function (
          $scope
        ) {
        });
    </script>
</head>
<body ng-controller="myAngularController">
    Filter By NAme : <input type="text" ng-model="myNameFilters">
    <table border=1>
 <tbody ng-repeat="Names in ['Shanu','Afraz','Raja','Afreen','Mak','Albert']  |
                              filter:myNameFilters ">
            <tr>
                <td>
                    {{Names}}
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2) 排序

与filter类似，我们使用管道符号在ng-repeat中添加带有字段和反向值的orderBy。OrderBy可以使用管道符号添加到ng-repeat中，例如，我们考虑上面的例子。在那里我们使用ng-repeat显示了数组的名称。现在我们可以为上面的例子添加过滤器。

这里，在第一个Tr和Td中，我显示了表格标题，并在点击事件中，我按升序和降序显示了按名称排序。

ng-repeat="nme in Names | filter:myNameFilters | orderBy:predicate:reverse

完整代码

<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script>
        angular.module('MyAngularModule', [])
        .controller('myAngularController', function (
          $scope
        ) {
        });
    </script>
</head>
<body ng-controller="myAngularController" ng-init="Names = [{name:'Shanu'},
                     {name:'Afraz'},{name:'Afreen'},{name:'Vijay'},
                     {name:'Mak'}, {name:'Raja'}]">

    Filter By NAme : <input type="text" ng-model="myNameFilters">
    <table border=1>
        <tr>
            <td ng-click="predicate = 'name'; reverse=!reverse">
                <b>Toy Code</b>
            </td>
        </tr>

        <tbody ng-repeat="nme in Names   |
         filter:myNameFilters  | orderBy:predicate:reverse">
            <tr>
                <td>
                    {{nme.name}}
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

3) 动画

要在 AngularJs 中使用动画，我们必须包含“angular-animate.min.js”并在module my中传递参数“ngAnimate”

代码将如下所示

添加引用

<script src="http://code.angularjs.org/1.2.2/angular-animate.min.js"></script>

在Module中传递参数为“ngAnimate”

 angular.module('MyAngularModule', ['ngAnimate'])

将您的动画 CSS 添加到您的 HTML 页面。在我的例子中，我将使用ng-repeat绑定文本的显示进行淡入淡出。

完整代码

<html ng-app="MyAngularModule" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.2/angular-animate.min.js"></script>
    <style>
        .ng-enter {
            -webkit-transition: 1s;
            transition: 3s;
            opacity: 0;
        }

        .ng-enter-active {
            opacity: 1;
        }

        .ng-leave {
            -webkit-transition: 1s;
            transition: 2s;
        }

        .ng-leave-active {
            opacity: 0;
        }
    </style>
    <script>
        angular.module('MyAngularModule', ['ngAnimate'])
        .controller('myAngularController', function (
          $scope
        ) {
        });
    </script>
</head>
<body ng-controller="myAngularController" ng-init="Names = [{name:'Shanu'},
                     {name:'Afraz'}, {name:'Afreen'}, {name:'Vijay'},
                     {name:'Mak'}, {name:'Raja'}]">

    Filter By NAme : <input type="text" ng-model="myNameFilters">
    <table border=1>
        <tr>
            <td ng-click="predicate = 'name'; reverse=!reverse">
                <b>Toy Code</b>
            </td>
        </tr>
        <tbody ng-repeat="nme in Names   | filter:myNameFilters  |
                                           orderBy:predicate:reverse">

            <tr>
                <td>
                    {{nme.name}}
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

参考链接

这些都是使用 HTML 的几个简单例子。现在让我们详细看看如何在我们的 MVC 应用程序中使用 WCF Rest Service 实现这一点。

Using the Code

1) 创建数据库和表

我们将在数据库ToysDB下创建一个ToysDetails表。以下是创建数据库、表和示例insert查询的脚本。在您的 SQL Server 中运行此脚本。我使用了 SQL Server 2012。

-- =============================================
-- Author      : Shanu
-- Create date : 2015-03-20
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier    : Shanu
-- Modify date : 2015-03-20
-- =============================================
--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] = 'ToysDB' )
DROP DATABASE ToysDB
GO

CREATE DATABASE ToysDB
GO

USE ToysDB
GO

-- 1) //////////// ToysDetails table

-- Create Table ToysDetails, this table will be used
-- to store the details like Toys Information

IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'ToysDetails' )
DROP TABLE Professional_Type
GO

CREATE TABLE ToysDetails
(
   Toy_ID VARCHAR(20) NOT NULL,
   Toy_Name VARCHAR(100)  NOT NULL,
   Toy_Price int  NOT NULL,
   Image_Name VARCHAR(100)  NOT NULL,
   Item_Date DateTime  NOT NULL,
   AddedBy VARCHAR(100)  NOT NULL,
CONSTRAINT [PK_ToysDetails] PRIMARY KEY CLUSTERED
(
  [Toy_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 ToysDetails Table

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
                 values('Toy001','Abacus',250,'Abacus.png',getdate(),'Shanu')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy002','Babel Fish',350,'Babelfish.png',getdate()-10,'Afraz')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy003','Base Ball',1400,'Baseball.png',getdate()-24,'Shanu')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy004','Basket Ball',1390,'BasketballBall.png',getdate()-36,'Raj')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy005','Blue Fish',450,'BlueFish.png',getdate()-90,'Afraz')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy006','Brown Bear',1250,'BrownBear.png',getdate()-34,'Mak')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy007','CabrioletRed Car',950,'CabrioletRed.png',getdate()-20,'Albert')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy008','Chevelot Car',1150,'Chevelot.png',getdate()-26,'Gowri')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy009','Duck',399,'Duck.png',getdate()-44,'Afraz')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy010','FireEscape Van',897,'FireEscape.png',getdate()-12,'Shanu')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy011','Mini Car',750,'MiniCar.png',getdate(),'Shanu')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy012','Nemo',675,'Nemo.png',getdate()-1,'Kim')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy013','Old Car',1950,'OldCar.png',getdate()-3,'Jack')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy014','Red Car',679,'RedCar.png',getdate(),'Lee')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy015','Soccer Ball',950,'SoccerBall.png',getdate(),'Shanu')

Insert into ToysDetails(Toy_ID,Toy_Name,Toy_Price,Image_Name,Item_Date,AddedBy) _
values('Toy016','Tennis Ball',350,'TennisBall.png',getdate()-29,'Afraz')

select * from ToysDetails

-- 1) END //

2）创建 WCF REST 服务

打开 Visual Studio 2013 -> 选择文件 - 新建 - 项目 – 选择 WCF 服务应用程序 -> 选择您的 项目路径 并命名您的 WCF 服务，然后点击确定。

创建 WCF 服务后，我们可以在解决方案资源管理器中看到“IService.CS”和“Service1.svc”，如下所示

IService.CS - > 在“IService.CS”中，默认情况下我们可以看到 3 个契约
[ServiceContract] - > 描述服务可用的方法或任何操作。服务契约是一个接口，方法可以使用操作契约属性在服务接口中声明
[OperationContract] -> 类似于 Web 服务[WEBMETHOD]
[DataContract] -> 描述客户端和服务之间的数据交换

[ServiceContract]

下面的代码将自动为所有 IService.CS 文件创建。我们可以在这里更改和编写自己的代码。

    public interface IService1
    {
        [OperationContract]
        string GetData(int value);

        [OperationContract]
        CompositeType GetDataUsingDataContract(CompositeType composite);
    }

    [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; }
        }
    }

数据合同

在我们的示例中，我们需要获取所有Toys详细信息，因此我创建了一个数据契约“ToyItemDataContract”。在这里，我们可以看到我们已经将我们所有的表列名声明为数据成员。

public class ToysDetailDataContract
    {
        [DataContract]
        public class ToyItemDataContract
        {
            [DataMember]
            public string Toy_ID { get; set; }

            [DataMember]
            public string Toy_Name { get; set; }

            [DataMember]
            public string Toy_Price { get; set; }

            [DataMember]
            public string Image_Name { get; set; }

            [DataMember]
            public string Item_Date { get; set; }

            [DataMember]
            public string AddedBy { get; set; }
        }
    }

服务合同

在“Operation Contract”中，我们可以看到“WebInvoke”和“WebGet”，它们用于在 REST 服务中从数据库检索数据。

  RequestFormat = WebMessageFormat.Json,
  ResponseFormat = WebMessageFormat.Json,

在这里，我们可以看到请求和响应格式。这里我使用了 Json 格式。

JSON -> JavaScript 对象表示法是一种轻量级数据交换格式
UriTemplate -> 是我们的方法名，这里，我们的方法返回类型是List。

这里，我声明了“GetToyDetails”方法，并用于从数据库中获取所有玩具的详细信息。

[ServiceContract]
    public interface IService1
    {
[OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetToyDetails/")]
        List<ToysDetailDataContract.ToyItemDataContract> GetToyDetails();    }

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
{.
     [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetToyDetails/")]
        List<ToysDetailDataContract.ToyItemDataContract> GetToyDetails();
    }

    public class ToysDetailDataContract
    {
        [DataContract]
        public class ToyItemDataContract
        {
            [DataMember]
            public string Toy_ID { get; set; }

            [DataMember]
            public string Toy_Name { get; set; }

            [DataMember]
            public string Toy_Price { get; set; }

            [DataMember]
            public string Image_Name { get; set; }

            [DataMember]
            public string Item_Date { get; set; }

            [DataMember]
            public string AddedBy { get; set; }
        }
    }
}

使用 ADO.NET 实体数据模型添加数据库

右键点击您的 WCF 项目并选择 添加新项->选择 ADO.NET 实体数据模型，然后点击添加。

选择 从数据库生成 EF 设计器，然后单击 下一步。

单击 新建连接。

在这里，我们可以选择我们的数据库服务器名称，并输入您的数据库服务器 SQL Server 身份验证用户 ID 和密码。我们已经创建了数据库“ToysDB”，所以我们可以选择数据库并点击确定。

单击 下一步，选择我们需要使用的表，然后单击完成。

在这里，我们可以看到我们现在已经创建了shanuToyDetailsModel。

Service1.SVC

在“Service.SVC.CS”中实现IService接口并覆盖和定义操作契约的所有方法。

例如，在这里我们可以看到我在Service1类中实现了IService1。为我们的实体模型创建了对象，并在GetToyDetails中使用 LINQ 查询。

public class Service1 : IService1
    {
shanuToysDBEntities OME;

        public Service1()
        {
            OME = new shanuToysDBEntities();
        }

public List<ToysDetailDataContract.ToyItemDataContract> GetToyDetails()
        {
            var query = (from a in OME.ToysDetails
                         select a).Distinct();

            List<ToysDetailDataContract.ToyItemDataContract> ToyDetailList =
                 new List<ToysDetailDataContract.ToyItemDataContract>();

            query.ToList().ForEach(rec =>
            {
                ToyDetailList.Add(new ToysDetailDataContract.ToyItemDataContract
                {
                    Toy_ID = rec.Toy_ID,
                    Toy_Name = rec.Toy_Name,
                    Toy_Price = Convert.ToString(rec.Toy_Price),
                    Image_Name = rec.Image_Name,
                    Item_Date = Convert.ToString(rec.Item_Date),
                    AddedBy = rec.AddedBy
                });
            });
            return ToyDetailList;
        }

“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_AngularJsFilter.Model;

namespace shanu_AngularJsFilter
{
public class Service1 : IService1
    {
        shanuToysDBEntities OME;

        public Service1()
        {
            OME = new shanuToysDBEntities();
        }

public List<ToysDetailDataContract.ToyItemDataContract> GetToyDetails()
        {
            var query = (from a in OME.ToysDetails
                         select a).Distinct();

            List<ToysDetailDataContract.ToyItemDataContract> ToyDetailList =
                           new List<ToysDetailDataContract.ToyItemDataContract>();

            query.ToList().ForEach(rec =>
            {
                ToyDetailList.Add(new ToysDetailDataContract.ToyItemDataContract
                {
                    Toy_ID = rec.Toy_ID,
                    Toy_Name = rec.Toy_Name,
                    Toy_Price = Convert.ToString(rec.Toy_Price),
                    Image_Name = rec.Image_Name,
                    Item_Date = Convert.ToString(rec.Item_Date),
                    AddedBy = rec.AddedBy
                });
            });
            return ToyDetailList;
        }
    }
}

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://:5029/Service1.svc/。

添加您的名字，然后单击确定。

现在我们已成功将 WCF 服务添加到我们的 MVC 应用程序中。

安装 Angular JS 包的步骤

右键单击您的 MVC 项目并点击-> 管理 NuGet 包。

选择在线并搜索 Angular JS。选择 AngularJs 并点击安装。

现在我们已经将 AngularJS 包安装到了我们的 MVC 项目中。现在让我们创建我们的 Angular Js。

Modules.js
Controllers.js
Services.js

创建 Angular JS 脚本文件的步骤

右键单击脚本文件夹并创建您自己的文件夹，以创建我们的 Angular Js 模型/控制器和服务 JavaScript。在您的脚本文件夹中，添加三个 JavaScript 文件，并命名为Modules.js、Controllers.js和Services.js，如下所示

Modules.js：在这里，我们添加了对 Angular.js JavaScript 的引用。在我们的应用程序中，我们将使用 AngularJs 动画。为了使用动画，我们需要添加“angular-animate.js”和“angular-animate.min.js”。我们将模块名称命名为“RESTClientModule”，为了使用动画，我们需要将参数'ngAnimate'传递给我们的模块。

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
    app = angular.module("RESTClientModule", ['ngAnimate']);
})();

Services.js：在这里，我们添加了对 Angular.js JavaScript 和我们的 Module.js 的引用。

这里，我们为我们的服务命名，并在controllers.js中使用此名称。这里，对于 Angular 服务，我将其命名为“AngularJs_WCFService”。您可以自己命名，但请注意更改Controllers.js中的名称。这里，我们可以在方法中看到我传递了 WCF 服务 URL 的 URL。

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
/// <reference path="Modules.js" />

app.service("AngularJs_WCFService", function ($http) {
    //Get Order Master Records
    this.GetToyDetails = function () {
        return $http.get("https://:5029/Service1.svc/GetToyDetails/");
    };
});

Controllers.js：在这里，我们添加了对 Angular.js JavaScript 和我们的 Module.js 和 Services.js 的引用。与服务类似，对于控制器，我将其命名为“AngularJs_WCFController”。

在控制器中，我执行了所有业务逻辑，并将 WCF JSON 数据中的数据返回到我们的 MVC HTML 页面。

变量声明
首先，我声明了所有需要使用的局部变量以及当前日期，并使用$scope.date存储日期。
方法
- GetToyDetails()：此方法用于从 JSON 中获取所有玩具的详细信息，并将结果绑定到主页。
- $scope.showImage
$scope.showImage = function (imageNm, ToyCode, ToyName, ToyPrize,animatval) {
在图片鼠标悬停时，我们获取详细信息并在详细视图中显示数据和图片。在此方法中，我使用了$scope.showAnim布尔值来淡入和淡出详细信息显示中的图片。

Controller.js 完整源代码

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
/// <reference path="Modules.js" />
/// <reference path="Services.js" />

app.controller("AngularJs_WCFController",
function ($scope,$timeout, $rootScope, $window, AngularJs_WCFService) {
    $scope.date = new Date();
    // To show and Hide the Table to display  Character Type Selection and Question
    var firstbool = true;
    $scope.Imagename = "";
    $scope.ToyCode = "";
    $scope.ToyName = "";
    $scope.ToyPrize = "";
    $scope.showAnim = true;

GetToyDetails();
    // To Get All Records
    function GetToyDetails() {

        var promiseGet = AngularJs_WCFService.GetToyDetails();
        promiseGet.then(function (pl) {
            $scope.getToyDetailsDisp = pl.data
            if($scope.getToyDetailsDisp.length>0)
            {
                $scope.Imagename = $scope.getToyDetailsDisp[0].Image_Name;
                $scope.ToyCode = $scope.getToyDetailsDisp[0].Toy_ID;
                $scope.ToyName = $scope.getToyDetailsDisp[0].Toy_Name;
                $scope.ToyPrize = $scope.getToyDetailsDisp[0].Toy_Price;
            }
            else {
                $scope.Imagename = "";
                $scope.ToyCode ="";
                $scope.ToyName = "";
                $scope.ToyPrize = "";
            }
        },
             function (errorPl) {
             });
    }

    $scope.showImage = function (imageNm, ToyCode, ToyName, ToyPrize,animatval) {
        $scope.Imagename = imageNm;
        $scope.ToyCode = ToyCode;
        $scope.ToyName = ToyName;
        $scope.ToyPrize = ToyPrize;
        if(animatval==1)
        {
            $scope.showAnim = false;
        }
        else
        {
            $scope.showAnim = true;
        }
    }});

现在，我们已经创建了 Angular Js 模块/控制器和服务。接下来是什么？

创建 MVC 控制器和视图以显示我们的结果

添加 Controller

右键单击 Controllers -> 添加控制器 -> 选择 MVC 5 控制器 – 空 -> 点击添加。

更改控制器名称，这里我将其命名为“WhosinYourMindController”，然后点击确定。

添加视图：右键单击 Controller Index 并点击 添加视图。

索引视图：将视图命名为“Index”。

在视图中设计您的页面并引用angular.Js、Modules.js、Services.js和Controllers.js。

在 Angular JS 中，我们使用 {{ }} 来绑定或显示数据。

在这里，我们可以看到我首先创建了一个表格，然后是这个表格。

首先在表格中，我使用了data-ng-controller="AngularJs_WCFController"，在这里，我们可以看到data-ng-controller将用于将控制器的数据绑定到我们的 HTML 表格。

使用Data-ng-repeat绑定数据，并添加Filter和Order By到详细信息中，以便对我们的显示执行过滤和排序。
```
<tbody data-ng-repeat="detail in getToyDetailsDisp | filter:search  | 
orderBy:predicate:reverse" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
```
在这里，我使用了ng-animate来在加载时以淡入动画显示数据。
筛选文本框，如列标题所示。
```
<input ng-model="search.Toy_ID" style="width:100px">

<input ng-model="search.Toy_Name" >
```
在这里，我们可以看到我使用textbox按字段名称过滤每一列。

Sort：当用户点击表格标题TD时，我将使用ng-click事件对相应的列进行排序

<td ng-click="predicate = 'Toy_Name'; reverse=!reverse">
                            <b>Toy Name</b>
                        </td>

图像鼠标悬停和鼠标事件，以动画方式显示详细图像。

<img src="~/Images/Thumb/{{detail.Image_Name}}" alt="{{detail.Toy_Name}}" 
 ng-mouseover="showImage(detail.Image_Name,detail.Toy_ID,detail.Toy_Name,detail.

Toy_Price,1)" ng-mouseleave="showImage(detail.Image_Name,detail.Toy_ID,detail.Toy_Name,

detail.Toy_Price,2)">

详细图像中

<div>
     <div class="animate-show" ng-show="showAnim">
         <img alt="" src="~/Images/Actual/{{Imagename}}" />
      </div>
</div>

完整的 HTML 代码

<style type="text/css">
    .ng-enter
      {
          -webkit-transition: 1s;
          transition: 1s;
          opacity:0;
      }
      .ng-enter-active
      {
            -webkit-transition: 1s;
          transition: 1s;
          opacity:1;
      }
      .ng-leave
      {
          -webkit-transition: 1s;
          transition: 1s;
      }

      .ng-leave-active
      {
          opacity:0;
      }

      .animate-show {
  opacity: 1;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  opacity: 0;
}

</style>
<html data-ng-app="RESTClientModule">
@{
    ViewBag.Title = "Angular JS Filters and Sorting";
}

<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>Shanu - ANgularJs Filter and Sorting with
                    simple Animation using MVC and WCF Rest Service  :)</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:#FFFFFF; border: solid 2px #6D7B8D;
                 padding: 5px;width: 99%;table-layout:fixed;"
                 cellpadding="2" cellspacing="2">
     <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;
         border: solid 1px #659EC7;">
                        <td >
                            Toy Image
                        </td>
                        <td>
                            Toy Details
                        </td>
                    </tr>
     <tr style="height: 30px; background-color:#FFFFFF ; color:#336699 ;
         border: solid 1px #659EC7;">
                        <td >
                            <div >
                                <div class="animate-show" ng-show="showAnim">
                                   <img alt="" src="~/Images/Actual/{{Imagename}}" />
                                </div>
                            </div>
                        </td>
                        <td>
                            <h3 style="color:#9F000F">
                             Toy Code : <b>{{ToyCode}} </b></h3><br />

                            <h3 style="color:#9F000F">
                             Toy Name : <b>{{ToyName}} </b></h3><br />

                            <h3 style="color:#9F000F">
                             Toy Price : <b>{{ToyPrize}} </b></h3><br />
                       </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
  <table style=" background-color:#FFFFFF; border: solid 2px #6D7B8D;
         padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
     <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;
                              border: solid 1px #659EC7;">
                        <td width="40" align="center">
                        <b>Image</b>
                        </td>
                        <td width="40" align="center" style="border: solid 1px #FFFFFF;
                            padding: 5px;table-layout:fixed;cursor: pointer;"
                            ng-click="predicate = 'Toy_ID'; reverse=!reverse">

                           <b>Toy Code</b>
                       </td>

                        <td width="120" align="center" style="border: solid 1px #FFFFFF;
                            padding: 5px;table-layout:fixed;cursor: pointer;"
                            ng-click="predicate = 'Toy_Name'; reverse=!reverse">
                            <b>Toy Name</b>
                        </td>

                        <td width="40" align="center" style="border: solid 1px #FFFFFF;
                            padding: 5px;table-layout:fixed;cursor: pointer;"
                            ng-click="predicate = 'Toy_Price'; reverse=!reverse">
                            <b>Price</b>
                        </td>

                        <td width="90" align="center" style="border: solid 1px #FFFFFF;
                            padding: 5px;table-layout:fixed;cursor: pointer;"
                            ng-click="predicate = 'Item_Date'; reverse=!reverse">
                            <b>Date</b>
                        </td>

                        <td width="90" align="center" style="border: solid 1px #FFFFFF;
                            padding: 5px;table-layout:fixed;cursor: pointer;"
                            ng-click="predicate = 'AddedBy'; reverse=!reverse">
                            <b>User Name</b>
                        </td>
                    </tr>
         <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;
                                  border: solid 1px #659EC7;">
                        <td width="40" align="center">
                           Filter By ->
                        </td>
                    <td width="40" style="border: solid 1px #FFFFFF; padding: 5px;
                                   table-layout:fixed;">
                            <input ng-model="search.Toy_ID" style="width:100px">
                        </td>

  <td width="120" align="center" style="border: solid 1px #FFFFFF; padding: 5px;
                                 table-layout:fixed;">
                            <input ng-model="search.Toy_Name" placeholder="filter Name...">
                        </td>
 <td width="40" align="center" style="border: solid 1px #FFFFFF; padding: 5px;
                               table-layout:fixed;">
                        </td>
      <td width="90" align="center" style="border: solid 1px #FFFFFF; padding: 5px;
                                    table-layout:fixed;">
                            <input ng-model="search.Item_Date">
                        </td>
                        <td width="90" align="center" style="border: solid 1px #FFFFFF;
                                       padding: 5px;table-layout:fixed;">
                            <input ng-model="search.AddedBy">
                        </td>
                    </tr>
                    <tbody data-ng-repeat="detail in getToyDetailsDisp |
                           filter:search  | orderBy:predicate:reverse"
                           ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
                        <tr>
                            <td align="center" style="border: solid 1px #659EC7;
                                padding: 5px;table-layout:fixed;">
                                <span style="color:#9F000F">
                                    <img src="~/Images/Thumb/{{detail.Image_Name}}"
                                         alt="{{detail.Toy_Name}}"
                                         ng-mouseover="showImage(detail.Image_Name,
                                         detail.Toy_ID,detail.Toy_Name,detail.Toy_Price,1)"

                                         ng-mouseleave="showImage(detail.Image_Name,
                                         detail.Toy_ID,detail.Toy_Name,detail.Toy_Price,2)">
                                </span>
                            </td>
                            <td style="border: solid 1px #659EC7; padding: 5px;
                                table-layout:fixed;">
                                <span style="color:#9F000F">
                                    {{detail.Toy_ID}}
                                </span>
                            </td>
                            <td style="border: solid 1px #659EC7; padding: 5px;
                                table-layout:fixed;">
                                <span style="color:#9F000F">
                                    {{detail.Toy_Name}}
                                </span>
                            </td>
                            <td align="right" style="border: solid 1px #659EC7;
                                              padding: 5px;table-layout:fixed;">
                                <span style="color:#9F000F">
                                    {{detail.Toy_Price}}
                                </span>
                            </td>
                            <td style="border: solid 1px #659EC7; padding: 5px;
                                table-layout:fixed;">
                                <span style="color:#9F000F">
                                    {{detail.Item_Date}}
                                </span>
                            </td>
                            <td style="border: solid 1px #659EC7; padding: 5px;
                                               table-layout:fixed;">
                                <span style="color:#9F000F">
                                    {{detail.AddedBy}}
                                </span>
                            </td>
                        </tr>
</table>
            </td>
        </tr>
</table>
    <img src="~/Images/blank.gif" alt="" width="1" height="10" />
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/shanuAngularScript/Modules.js"></script>
<script src="~/Scripts/shanuAngularScript/Services.js"></script>
<script src="~/Scripts/shanuAngularScript/Controllers.js"></script>

运行您的程序

在这里，我们可以看到当我运行程序时，首先，我显示所有玩具的详细信息。

按玩具名称过滤。在这里，我们可以在玩具名称过滤器中看到，我输入了“car”，在表格中，我们只能看到包含“car”的玩具名称。

接下来，我们可以看到上面相同的结果已经按玩具代码反向排序。

注意：在我的应用程序的 Image 文件夹中，我添加了缩略图和实际图像。在数据库中，我提供了与两个文件夹中相同的名称。如果您需要添加更多照片，您可以在两个文件夹中添加，并在数据库中，请添加与文件夹中相同的图像名称，并使用新记录或更新现有记录。

支持的浏览器：Chrome 和 Firefox

历史

2015 年 5 月 6 日：初始版本