AngularJS 结合 MVC Web API (ASP.NET MVC RESTful 服务)

Afazal MD 3104209

4.68/5 (59投票s)

2014 年 10 月 6 日

CPOL

6分钟阅读

365728

16244

本文将通过一个产品列表示例，解释 AngularJS 与 Web API 的集成，并实现使用 GET 和 POST 方法添加新产品。

下载源文件 - 40.5 KB

一、引言

在本文中，我将解释 AngularJS 在客户端是如何工作的，以及如何将 AngularJS 与 Web API (ASP.NET MVC RESTFul Service) 集成以进行 CRUD 操作。我将以产品列表和添加新产品为例。

如果我们想学习任何一门新的语言，会首先想到哪些方面？

如何进行验证？
如何执行服务器端代码并获取响应？
HTML 表单数据如何发送到服务器端代码以执行数据库活动？
页面加载时如何从数据库获取数据并显示？
如何实现会话管理？
如何实现安全性？

我希望在您阅读完这篇文章后，能够理解 AngularJS 的工作原理，并对以上一些问题有所解答。这篇博客将帮助您开始使用 AngularJS 和 Web API 进行开发。

二、什么是 AngularJS

AngularJS 是一个 JavaScript 框架。使用它，我们可以构建丰富且可扩展的 Web 应用程序。它完全基于 HTML、JavaScript 和 CSS 构建，没有任何其他依赖即可正常工作。

Angular 非常接近 MVC 和 MVVM，但 Angular 被声明为 MVW 模式，其中“W”代表“Whatever”（适合您的任何方式）。

基本上，Angular 有三个组件，如下所示：

模板 (视图)
作用域 (模型)
控制器 (Controller)

模板 (视图): 模板是应用程序的 HTML 部分。如果您使用 ASP.NET MVC，它相当于 cshtml 或任何其他类型的视图。在 Angular JS 中，不会有任何服务器端视图代码。这个框架的优点是，无需刷新整个页面，就可以将数据注入视图（无需刷新页面即可添加、修改和删除 HTML 数据）。

作用域 (模型): 作用域是应用程序在客户端的模型对象。

控制器: 控制器是一个函数，其中包含应用程序的逻辑单元。它将有两个参数，一个是控制器名称（这是一个空的 scope 对象），另一个是一个数组，可以在其中添加字段。控制器将暴露给视图。

三、为什么选择 AngularJS (AngularJS 的优点)

Angular 不依赖于任何服务器端技术，它基于纯 HTML、JavaScript 和 CSS 构建。
这是一个非常轻量级的应用程序。
它遵循 SPA (单页应用程序) 原则。
由于 Angular 的组件是分离的，因此应用程序的可测试性非常高。它支持 TDD 开发。
开发工作量减少。在任何项目中，HTML 开发人员是独立的，他们开发 HTML 页面并交给开发团队，开发人员然后将所有 HTML 文件转换为 cshtml 或 ASPX 或任何其他技术并继续工作。在这种情况下，开发和测试需要双重工作。

在 AngularJS 中，开发团队可以直接从 HTML 页面开始工作。

四、AngularJS 组件

模块
指令
过滤器。
表达式

五、AngularJS 与服务器端代码 (MVC Web API)

任何开发人员都担心，如果 Angular 只与 HTML 一起工作，那么服务器端代码如何执行？Angular 提供了更大的灵活性，可以通过 Ajax 调用获取任何服务器端代码。因此，在这种情况下，可以设计一个单独的组件供 Angular 调用。API 可以用 .NET、PHP、Java 或任何其他技术编写。

在本文中，我将以 Web API (ASP.NET MVC Web API) 为例。

以下是服务器端代码执行的架构设计。

Angular 将有一个控制器，该控制器将向 Web API 发送 Ajax 调用，并在执行代码后从服务器获取响应。

六、开发 MVC Web API

让我们开始使用 Visual Studio 2013 创建一个新的 Web API。

步骤 1

打开 Visual Studio 2013 -> 选择“新建项目” -> “Web” -> “ASP.NET Web 应用程序”。

第二步

选择 Web API

步骤 3

右键单击“Controllers”文件夹并添加新的控制器类文件。

步骤 4

选择“Controller”和“MVC 5 Controller with read/write action”

步骤 5

将控制器重命名为“ProductController”。

步骤 6

API 控制器类将如下所示：

步骤 7

在 Web API 中，我有两个函数，一个用于获取产品列表数据，另一个用于从 Angular 的产品添加页面 POST 产品数据并将其添加到产品列表中。

步骤 7.1：GetAllProducts

这是 GET RESTful 服务方法，它将返回所有产品数据。

Controller 构造函数：这仅用于填充初始产品数据。

public ProductController()
        {
            if (PgaeLoadFlag == 1) //use this only for first time page load
            {
                //Three product added to display the data
                products.Value.Add(new Product { ID = 1, Name = "bus", Category = "Toy", Price = 200.12M });
                products.Value.Add(new Product { ID = 2, Name = "Car", Category = "Toy", Price = 300 });
                products.Value.Add(new Product { ID = 3, Name = "robot", Category = "Toy", Price = 3000 });
                PgaeLoadFlag++;
            }
        }

运行 URL “https://:1110/api/product” 将得到结果。

 // GET api/product
        public List <product> GetAllProducts() //get method
        {
            //Instedd of static variable you can use database resource to get the data and return to API
            return products.Value; //return all the product list data
        }

该方法的输出如下所示：

步骤 7.2：ProductAdd

这是 POST RESTful 服务方法，它将保存从 Angular 表单或其他应用程序 POST 的产品数据。此方法将接收产品数据，但在此博客中，我使用了 Angular 页面表单。

 public void ProductAdd(Product product) //post method
        {
            product.ID = ProductID;
            products.Value.Add(product); //add the post product data to the product list
            ProductID++;
            //instead of adding product data to the static product list you can save data to the database.
        }