介绍

本文主要介绍使用SQL数据库表和MVC API在服务器上使用 json对象管理数据表记录。本教程适用于初学者/新手或学生。我已经为表在Angular JS中创建了CRUD功能。我还用一页代码说明了所有数据操作。希望以高级模式在程序中添加数据表对您有所帮助。

Angular Js代码要点

ng-app——此伪指令用于引导应用程序。通常，它放在诸如html或body标签的顶级元素中。
ng-controller——它是AngularJS的主要组件，包含状态和逻辑。它充当服务和视图之间的桥梁。
$scope——它提供了数据和视图之间的链接。它保存了视图所需的所有数据，并在HTML模板中使用。
{{expression}}——称为表达式，可以在其中编写类似JavaScript的代码。它应主要用于HTML页面中的小操作。
ng-init——该指令为我们提供了一种在页面上初始化变量的方法。
ng-repeat——实际上，它根据提供的数据列表重复使用的元素。在我们的示例中，persons是一个包含人员列表的JSON对象。
$http——它可以启动对服务器的AJAX请求并获得响应。这是Angular的核心服务。

示例截图

第一部分

第一部分显示了代码部分的简短视图。我们创建ng-app myApp并在主体部分创建ng-controller myTableCtrl。ng-app和ng-controller两个都属于angular JS的两个主要部分。头标签中的另一个标签包括angular.min.js和链接bootstrap.min.css，以运行Angular js功能和设计CSS。在HTML中，我们使用angular.module()函数添加获取angular app的代码，以便可以使用"appName".controller()函数访问控制器。接下来，我们创建JSON对象数组它的名字是填写表格的persons。此外，添加三种函数管理表记录，其名称是Save()，RecEdit()以及RecDel()。

在这里，我们创建了一个空的json对象数组，其名称为persons=[]。我还添加了两个新函数来调用API，它们的名称分别是GetRecords()和SaveRecords()，它们接收参数json对象。这两个函数都有带着post方法的$http请求，并调用Web API URL来读取或保存表数据。在本例中，我们使用IIS服务器localhost，应用程序名称为mywapi。

您已经看到在Angular js中，您可以使用$scope来访问任何函数或变量。但是函数GetRecords() 和SaveRecords()是与$scope无关的，因为它是本地函数，可以调用Web API。json中的功能参数为{"StrQry":"Query String"}。例如“ {'StrQry':'SELECT * FROM [TblPerson]'}”。我们将解释函数Save()、RecEdit()以及RecDel()。函数Save()检查行的键，如果大于0，则更新记录，否则使用Web API功能在数据表中添加新记录。这里$scope.per是一个JSON对象。这个空的json对象是ng-controller的一部分，它可以从ng-init='per={}'中的person里获得。

在HTML代码部分中，此部分提供了三个div。第一个div标签显示页面标题，第二个div标签显示人员表单，第三个div标签显示表格部分。在第二个div标签中，我们使用以红色矩形显示的angular js指令ng-init='per={}'对空的json对象进行初始化。接下来，我们在表单中的输入控件中使用ng-model指令，并通过指令ng-click在Angular js中获取按钮事件。现在最后，我们将讨论AngularJS中的主要部分数据表。ng-repeat指令用于在json对象数组中显示项。ng-repeat指令就像一个循环。利用ng-repeat显示在表格格式数组中的所有项。

第二部分（ASP.NET MVC WEB API和数据表）

现在，我们创建ASP.NET MVC API应用程序。ASP.NET Web API解决方案结构如下。要添加App_Code文件夹，请右键单击项目--->添加--->添加ASP.NET文件夹->选择App_Code。我们在App_Code文件夹中创建了两个CS类，名称分别为TblCUD.cs和TestDataLayer.cs。TblCUD.cs只有一个get，set属性用于接收JSON字符串，其名称为StrQry。接下来，TestDataLayer.cs有三个函数，首先与从web.config获取连接字符串有关。您需要根据本地环境进行更改。另外两个函数与访问SQL客户端和用于表数据记录操作的连接有关。

接下来，添加新的Web API控制器，在本例中为DefaultController。它具有四个API函数。第一个是根据get要求进行测试的。另外两个函数有post请求接收与数据表有关的操作。函数是使用MSSQL数据表来保存记录。另外，您需要在SQL Server数据库中创建数据表。在我们的例子中，表名称为TblPerson，结构如下所示：

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[TblPerson]([Id] [int] IDENTITY(1,1) NOT NULL,[Name] [varchar](20) NOT NULL,[Age] [int] NOT NULL,[City] [varchar](20) NOT NULL,
CONSTRAINT [PK_TblPerson] PRIMARY KEY CLUSTERED
([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
SET ANSI_PADDING OFF
GO

第三部分（关于Postman发布和测试API）

为了节省您的时间，我请求下载我们的应用程序源代码并发布在您的本地IIS服务器上。打开Web API应用程序，右键单击项目，然后单击“发布操作”并按照说明进行操作。只需打开IIS服务器，然后下一步，右键单击默认网站图标->添加应用程序--->提供应用程序别名->选择发布的路径位置->确定。

再次重复相同的过程，以在本地IIS服务器上发布Angular js应用程序。

现在，我们的下一步是通过Postman测试我们的API。您需要从网络上下载Postman客户端并安装在Google Chrome中。然后，您必须添加请求GET或POST和API URL。在我们的示例中，首先我们检查GET发布的API的请求方法。Get请求方法显示欢迎消息。因此，在Postman客户端中，您需要执行以下步骤：

打开Postman->选择方法get->然后添加API URL->单击send

接下来，我们检查post方法以获取数据表中的记录。打开postman->选择post方法->然后添加API URL->选择主体->单选raw按钮->输入类型JSON（application/json）->写入json对象数据->单击发送

注意

在本文中，我们没有讨论任何类型的Web API 安全性。本文的目的是展示Web API，测试API并创建用于学习目的的API。

结论

本文向初学者展示并说明了如何使用angular js在数据表中使用json数据保存和从Web API获取数据。另外，我们试图解释如何在IIS服务器上发布，并通过postman 客户端检查。

面向初学者的带MVC API的Angular Js Table CRUD MSSQL相关推荐

面向初学者的带有MVC API的Android 管理表CRUD MSSQL
目录介绍在Android中使用API进行表CRUD 屏幕截图示例第一节结论介绍我的上一篇文章面向初学者的带MVC API的Angular Js Table CRUD MSSQL和使用S ...
通过Web Api 和 Angular.js 构建单页面的web 程序
在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的页面,比如说:用户通过一个连接导航到一个页面,会发送一个请求到服务器端, ...
【Web API系列教程】1.3 — 实战：用ASP.NET Web API和Angular.js创建单页面应用程序（上）
前言在传统的web应用程序中,客户端(浏览器)通过请求页面来启动与服务器的通信.然后服务器处理该请求,并发送HTML页面到客户端.在随后页面上的操作中--例如,用户导航到一个链接或提交一个包含数据的 ...
【HTML】Angular JS + Table 根据数据动态合并单元格
问题描述: 根据数据值将单元格合并如一级指标二级指标原始演示效果: 目标效果如图所示: 完整的http.post请求JS $http.post('../hnTProF3c/List', para ...
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
关于python的一些好的书籍推荐-python官方推荐30本面向初学者的书籍！你看过几本？...
现在大多数初学者学习python都是看教学视频,但是小编想说的是,如果你能把一本书籍认认真真的读完,那么比你看教学视频的效果要好的多!今天小编就来带大家看看python官方推荐的30本面向初学者的书籍 ...
学python买什么书好-python官方推荐30本面向初学者的书籍！你看过几本？
现在大多数初学者学习python都是看教学视频,但是小编想说的是,如果你能把一本书籍认认真真的读完,那么比你看教学视频的效果要好的多!今天小编就来带大家看看python官方推荐的30本面向初学者的书籍 ...
angular.js的路由和模板在asp.net mvc 中的使用
首先创建asp.NET mvc 程序,创建一个web api : 1 public class UserController : ApiController 2 { 3 private static ...
面向初学者的图形数据库：为什么我们需要NoSQL数据库，ACID与BASE的解释说明
Table of Contents 为什么我们需要NoSQL数据库 NoSQL数据库的Many&Motley世界数据量数据速度数据种类数据价结论 ACID与BASE的解释说明 ACI ...

面向初学者的带MVC API的Angular Js Table CRUD MSSQL

介绍