65.9K
CodeProject 正在变化。 阅读更多。
Home

如何使用 AngularJS 在 Web API 中获取数据

Shamim Uddin
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.64/5 (14投票s)

2016 年 8 月 13 日

CPOL

3分钟阅读

viewsIcon

47878

downloadIcon

574

在这篇文章中，我想分享如何使用 angular JS 在 Web API 中从数据库获取数据。

背景

我们知道 AngularJS 是客户端脚本，所以我们不能在服务器端使用它。 在这篇文章中，我们将从数据库中获取数据，因此我们将使用 SQL Server 数据库，数据将通过 Web API 从服务器端的数据库中调用，而客户端将使用 AngularJS 调用。 最后，在获取所有数据后，我们将把它绑定到 HTML 表格中。 听起来不错？ 在这里，我将使用 Visual Studio 应用程序。 现在，我们将去创建我们的应用程序。 我希望你会喜欢这个。

首先，我们将创建一个数据库。 以下查询可用于在您的 SQL Server 中创建数据库。 创建数据库

CREATE DATABASE SchoolMangement;

创建表

GO
/****** Object:  Table [dbo].[tbl_Student]    Script Date: 7/24/2016 11:12:09 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tbl_Student](
	[StudentID] [int] IDENTITY(1,1) NOT NULL,
	[FirstName] [nvarchar](50) NULL,
	[LastName] [nvarchar](50) NULL,
	[Email] [nvarchar](50) NULL,
	[Address] [nvarchar](250) NULL,
 CONSTRAINT [PK_tbl_Student] PRIMARY KEY CLUSTERED 
(
	[StudentID] 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

现在，数据库已经创建。 最后，我们将得到一个像这样的表

222

我们可以在数据库中插入数据

INSERT [dbo].[tbl_Student] ([StudentID], [FirstName], [LastName], [Email], [Address]) _
VALUES (1, N'Parvaz', N'Reza', N'parvaz@gmail.com', N'Amla,Kushtia')
GO
INSERT [dbo].[tbl_Student] ([StudentID], [FirstName], [LastName], [Email], [Address]) _
VALUES (2, N'Mamun', N'Uddin', N'mamun@yahoo.com', N'mirpur,Kushtia')
GO
INSERT [dbo].[tbl_Student] ([StudentID], [FirstName], [LastName], [Email], [Address]) _
VALUES (3, N'Seam', N'Alli', N'seam@gmail.com', N'Dhaka,Bangladesh')

让我们创建一个 MVC 应用程序。 点击“文件”，然后点击“新建”，然后点击“项目”，然后选择“ASP.NET Web 应用程序”。 这将给出项目名称，位置，并点击确定按钮。 从以下弹出的窗口中，我们将选择 MVC，并为 MVC 和 Web API 选择核心引用和文件夹。

565656

单击“确定”后，将为您创建一个带有 MVC 类似文件夹结构以及核心引用的项目。

767676y

我们将设置 AngularJS。 如果您不知道如何设置 AngularJS，请点击这里。 设置好 AngularJS 后，我们将创建一个数据模型。 创建实体数据模型。 右键单击您的 model 文件夹，然后单击新建，选择 ADO.NET 实体数据模型。 按照给定的步骤操作。 完成该过程后，您可以在 *model* 文件夹中看到 edmx 文件和其他文件。 在这里，我给我们的实体数据模型名称为 SchoolMangementEntities。 现在您可以看到一个带有 edmx 扩展名的文件已经创建。 创建控制器。 右键单击您的 *Controller* 文件夹，然后选择“添加”，单击“控制器”，选择“MVC 5 控制器 - 空”，并命名为 StudentController。

public class StudentController : Controller
    {
        //
        // GET: /Student/
        public ActionResult Index()
        {
            return View();
        }
	}

创建视图

右键单击 StudentController 中的 Index 方法，然后单击“添加视图”。 按照给定的步骤操作

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

创建 Web API 控制器

我们将在我们的项目中创建一个名为“API”的文件夹，用于存放 API，右键单击 API 文件夹，选择“添加”，单击“控制器”，选择“Web API 2 控制器 - 空”，并命名为 “StudentController”。

public class StudentController : ApiController
    {
        SchoolMangementEntities _ctx = null; // SchoolMangementEntities is data model name
       
        public StudentController()
        {
            _ctx = new SchoolMangementEntities();
        }
        public List<tbl_Student> GetStudents()
        {
            List<tbl_Student> students = null;
            try
            {
                students = _ctx.tbl_Student.ToList();
            }
            catch 
            {
                students = null;
            }
            return students;
        }
    }

正如您所看到的，我们有用于获取数据的操作 GetStudents，因此从数据库获取数据的编码部分已经准备就绪。 现在，我们需要检查我们的 Web API 是否已准备好执行操作！ 要检查这一点，您只需要运行 URL：https://:10956/api/student/GetStudents。

32323

现在我们将开始我们的 Angular 部分 JS。 右键单击 Module 文件夹，选择 JavaScript 文件，命名为“app.js”，它位于 ScriptsNg 文件夹中。 在此文件中写入以下代码。

var app;
(function () {
    'use strict'; //Defines that JavaScript code should be executed in "strict mode"
    app = angular.module('myapp', []);
})();

我们创建自定义服务。 右键单击 Services 文件夹，选择 JavaScript 文件，命名为“StudentService”，它位于 ScriptsNg 文件夹中。 在此文件中写入以下代码。

app.service('StudentService', function ($http) {
    //**********----Get All Record----***************
    var urlGet = '';
    this.getAll = function (apiRoute) {
        urlGet = apiRoute;
        return $http.get(urlGet);
    }
});

我们创建 StudentController，右键单击 Controller 文件夹，选择 JavaScript 文件，命名为“StudentController”，它位于 ScriptsNg 文件夹中。 在此文件中写入以下代码。

app.controller('StudentCtrl', ['$scope', 'StudentService',
    // we inject StudentService  inject because we call getAll method for get all student
function ($scope, StudentService) {
    // this is base url 
    var baseUrl = '/api/student/';
    // get all student from database
    $scope.getStudents=function()
    {
        var apiRoute = baseUrl + 'GetStudents/';
        var _student = StudentService.getAll(apiRoute);
        _student.then(function (response) {
            $scope.students = response.data;
        },
        function (error) {
            console.log("Error: " + error);
        });

    }
    $scope.getStudents();

}]);

现在，我们将处理我们创建的 Index 视图

<div ng-app="myapp">
    <div ng-controller="StudentCtrl">
        <table class="table table-striped table-bordered table-hover table-checkable datatable">
            <thead class="grid-top-panel">
                <tr>
                    <th>StudentID</th>
                    <th>First Name</th>
                    <th>LastName</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="dataModel in students">
                    <td>{{dataModel.StudentID}}</td>
                    <td>{{dataModel.FirstName}}</td>
                    <td>{{dataModel.LastName}}</td>
                    <td>{{dataModel.Email}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptsNg/Module/app.js"></script>
<script src="~/ScriptsNg/Controller/StudentController.js"></script>
<script src="~/ScriptsNg/Services/StudentService.js"></script>

最后，我们得到以下结果

121212

© . All rights reserved.