7 天学习 MVC 项目 - 奖励日 1

• 下载 Day7Bonus.zip

引言

本文是“7 天学会 MVC 项目”系列的续篇。

• 在前 6 篇文章中，我们从零开始创建了一个完整的 MVC 项目。
• 在第 7 天，我们创建了同一项目的单页版本。
• 这一天将是读者的额外福利日。在这里，我们将了解 Web API 和 Angular 的重要性，并观看两者的一个小演示。

注意：在本系列中，我不会使用 Web API 和 Angular 创建一个完整的项目。我将很快为此开始一个新系列。这里我们只涵盖以下三点。

• 什么是 Web API？为什么使用它？
• Web API 演示
• 什么是 Angular？
• Angular 演示。
• Angular 与 Web API 演示
• 从 MVC 5 开始

我建议您根据自己的兴趣直接跳转到相应的章节。

完整系列

• 第 1 天
• 第 2 天
• 第 3 天
• 第 4 天
• 第 5 天
• 第 6 天
• 第 7 天
• 额外日 1
• 额外日 2

我们很高兴地宣布，本文现已推出纸质版书籍，您可以通过 www.amazon.com 和 www.flipkart.com 购买。

什么是 Web API？为什么使用它？

Web API 是一种 Asp.Net 技术，用于创建基于 HTTP 的服务。就像 Web Forms 和 Asp.Net MVC 一样，Web API 是 Asp.Net 的一种风味，因此它自动获得了 Asp.Net 的许多功能，如表单身份验证、异常处理等。

让我们回答几个关于 Web API 的问题。如果您对 Web API 的理论不感兴趣，我建议您直接跳到实验部分。

Web API 是 Asp.Net 的第三种风味。这是否意味着，我们使用 Web API 创建 Web 应用程序？

我们非常清楚 Asp.Net 的用途。它旨在创建 Web 应用程序。

Web 应用程序是可以通过 Web 访问的应用程序。从未规定“Web 应用程序必须有 UI”。它们可能只是通过 Web 暴露数据的一些业务应用程序。

Asp.Net Web Forms 和 Asp.Net MVC 是 Asp.net 的风味，它们负责 UI 部分。它将用于创建基于 Web 的 UI 应用程序。

Web API 与 Web Services 和 WCF Services 有何不同？

Web Service 和 WCF Service 做同样的事情。它将数据暴露给外部世界。

那么 Web API 与它们有何不同？

简短的答案是“Web Services 和 WCF Services 是基于 SOAP 的服务。在这里，HTTP 只用作传输协议。Web API 纯粹是基于 HTTP 的服务。这里不会有任何 SOAP 参与”。

让我们详细了解一下。

为什么 WCF 和 Web Services 需要 SOAP？

为了理解这一点，让我们讨论一个场景。

我们希望将一些数据从 Technology1 发送到 Technology2，其中 Technology2 是 WCF/Web 服务，通信必须通过互联网/Web 进行。

Web 意味着 HTTP。HTTP 允许我们向特定的 URL 发出请求，并通过该请求传递一些数据。

现在，根据我们在第 7 天讨论的数据传输，Technology1 将其数据转换为 XML 字符串（或大部分是 JSON 字符串），然后将其发送到 Technology2。

注意：当 .Net Web 服务或 WCF 服务是通信点时，数据将始终格式化为 XML 字符串。

值得讨论的要点

• 当开发人员设计服务时，他/她实际上在服务内部创建了一个或多个方法。每个方法都用于某些特殊功能。我们称之为 Web 方法。当涉及到通信时，Technology1 将实际调用服务中的这些方法。现在在 HTTP 中，我们没有指定方法名称的规定。剩下的唯一选择是，当客户端通过 HTTP 发送请求时，方法名称将以某种方式与数据连接起来，并作为数据本身发送。
  在服务侧，服务框架将（从客户端接收到的）数据分成实际数据和方法名称。然后它调用服务中相应的方法，将实际数据作为参数传递。
• 当 Technology1 将数据发送到服务时，服务如何确保数据是从有效客户端发送的。可能有人不允许访问服务并试图发送数据。为了解决这个问题，就像方法名称解决方案一样，Technology1 将验证凭据连接到数据并将其作为一个整体发送。在服务侧，服务框架将（从客户端接收到的）数据分成凭据、方法名称和实际数据。它验证凭据并确保请求是经过身份验证的请求，然后才进行 Web 方法调用。

服务如何从传入数据中提取不同部分？

现在，根据我们最终的讨论，当 Technology1 将数据发送到服务时，数据实际上将包含三件事——实际数据、验证凭据和方法名称。

在服务侧，服务框架独立理解每个部分将非常困难，因为服务是通用的，它应该适用于所有人。其次，客户端可以以任何格式发送数据。例如，客户端可以以“Data|Credential|MethodName”格式发送完整数据，也可以以“Credential|Data|MethodName”格式发送。没有固定格式。

解决方案 - 标准信封

为了解决这个问题，业界提出了一种标准信封概念，称为 SOAP 信封。

SOAP 只是一个专门的 XML，它将封装所有需要发送的东西，但以标准格式。HTTP 将 SOAP 信封从客户端发送到服务，反之亦然。

以下是供参考的 SOAP XML 示例。

<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body xmlns:m="http://www.example.org/stock">
  <m:MyMethodName>
    <m:MyData>Data in Json or XML format</m: MyData >
  </m: MyMethodName >
</soap:Body>
</soap:Envelope>

注意

• 如前所述，当服务是 Web 服务或 WCF 服务时，数据将表示为 XML 字符串。
• 当服务返回某些内容时，将遵循相同的步骤。服务将创建 SOAP XML 字符串，客户端将从中提取响应数据。

SOAP 有什么问题？

SOAP 归根结底是 XML，因此它导致了两个问题。

• 它增加了数据的整体大小，从而影响了性能。
• 我们在第 7 天讨论了 XML 的复杂性。我们了解到，对于轻量级框架（如 JavaScript、移动框架等）创建和解析 XML 字符串将是多么困难。

解决方案是什么？

解决方案将是纯粹基于 HTTP 的服务。没有 SOAP 信封的服务。HTTP 将直接将数据从一个位置传输到另一个位置。这就是 REST 原则出现的地方。

REST 提倡以更高效的方式利用 Web 现有功能来创建服务。它说以数据表示的格式传输数据，而不是将它们放入 SOAP 信封中。

基于 HTTP 的服务完全基于 REST 原则，因此它们也被称为基于 REST 的服务。

Web 的现有功能是什么？

• 在 Web 中，我们有一个 URL 概念，它唯一标识一个资源。
• 在 Web 中，不同的操作将通过不同的 HTTP 动词来标识。例如 – HTTP 动词 GET 表示检索数据，PUT 表示更新数据，POST 表示创建数据，DELETE 表示删除数据。

行业如何实现该解决方案？

方法名称的解决方案

现在，对于基于 SOAP 的服务（Web 和 WCF 服务），每个服务都由一个 URL 标识。同样，REST 服务也将通过 URL 标识。

不同之处在于，对于 REST 服务，我们定义方法的方式将有所不同。

• 它要么定义为标准方法。标准方法意味着方法名称是固定的。它将是 GET、POST、PUT 或 DELETE。
• 或者它将定义任何名称的方法，但在这种情况下，每个自定义方法都将有一个 URL。

无论哪种情况，都不需要从客户端发送方法名称作为参数。

• 在选择 1 的情况下，客户端将通过 HTTP 向 REST 服务发出请求。请求的类型将是 GET、POST、PUT 或 DELETE。现在在服务端，服务框架将检查请求的类型并相应地调用服务中的方法。方法名称问题得到解决。
• 在选择 2 的情况下，客户端将通过 HTTP 直接向 RESET 服务方法发出请求。这是可能的，因为每个方法都将有一个唯一的 URL。

安全解决方案

当我们谈论 HTTP 时，我们有一个 HTTP 头和 HTTP 正文的概念，它们都能够携带一些信息。我们总是可以将凭据作为头的一部分传递，将数据作为正文的一部分传递。为了确保在传输过程中没有人能够看到头和正文中的数据，我们可以实现 SSL。这明确了一点，安全不会是问题。

数据传递呢？

在这种情况下，数据将通过 HTTP 直接以 JSON 或 XML 格式传递。大部分将是 JSON。

WCF REST 与 Web API 有何不同？

WCF Rest 是早期 Microsoft 用于创建基于 REST 服务的实现。

WCF 从未打算用于 REST。其唯一目的是支持 SOA。使用 WCF 创建 REST 服务涉及太多步骤，并且将来添加新功能对 Microsoft 来说将是一个大问题。

非 WCF 开发人员将无法创建 WCF REST 服务。

Asp.Net Web API 将更简单，即使是非 WCF 开发人员也能够使用它创建基于 HTTP 的服务。

Web API 演示

步骤 1 - 创建 Web API 项目

步骤 1.1 打开 Visual Studio，点击“文件”>>“新建”>>“项目”。从对话框中选择“Asp.Net Web 应用程序”，输入名称，然后点击“确定”。

步骤 1.2 在下一个对话框中选择“空”选项，勾选“Web API”复选框，然后点击“确定”。

现在，在我们继续之前，我想更多地谈谈上面的这个对话框。在第 1 天我们开始 MVC 项目时，我故意跳过了关于这个对话框的讨论。

将来，将不再有单独的 Asp.Net MVC、Web API 或 Web Forms 项目。我们有 Asp.Net，我们将创建 Asp.Net 项目。

在一个 Asp.Net 项目中，我们可以同时拥有几个 Web Forms 类型的选项和几个 MVC 类型的选项。

对话框中有两个部分——模板和引用。

解释 1

假设我们一开始选择了空模板。

现在，如果您想创建 MVC 选项，您必须在项目中添加几个引用。所以手动右键单击项目，选择添加引用，选择 System.Web.MVC，然后点击确定。现在对更多引用做同样的操作。

Instead of that simply check MVC checkbox in the dialog box.

以上两个选项将创建一个空项目，其中包含 Asp.Net MVC 项目所需的所有引用。

如果您认为您的项目也将包含 Web Forms 或 Web API，那么也请勾选相应的复选框。

解释 2

现在您可能想知道对话框中的其他模板是什么？

这很简单。微软认为每个项目都会有一些共同点。比如每个项目都会有登录界面、主页面或布局页面、错误页面等。微软说，开发人员不必每次都在每个项目中手动创建它们，而是让 Visual Studio 自动创建。如果您选择 Web Forms 模板，所有这些共同文件将以 Web Forms 样式创建。如果您选择 MVC 模板，所有这些共同文件将以 MVC 样式创建。

步骤 2 – 创建 API

右键单击控制器文件夹，选择“添加”>>“控制器”。这次选择“Web API 2 控制器 – 空”选项，然后点击“添加”。

将控制器命名为 EmployeeController，然后点击“添加”。

您会注意到创建了一个继承自 ApiController 的新类。这将是我们的 Web API。

步骤 3 – 创建模型

在 Model 文件夹中创建名为 Employee 的新类，如下所示。

namespace WebAPISample.Models
{
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Salary { get; set; }
    }
}

步骤 4 – 创建 GET 操作

打开 EmployeeController，输入 using 语句，如下所示。

using WebAPISample.Models;

现在创建 GET 操作，如下所示。

public Employee GET()
{
    Employee e = new Employee();
    e.FirstName = "Sukesh";
    e.LastName = "Marla";
    e.Salary = 25000;
    return e;
}

第五步——执行和测试

按 F5 执行应用程序。从浏览器向“/api/Employee”发出请求。

注意：以上输出仅适用于 Chrome 浏览器。我们将在下一节详细讨论。

关于 Web API 实验

为什么 URL 中指定了 Api 关键字？

打开 Global.asax 文件。Application_Start 将定义如下。

protected void Application_Start()
{
    GlobalConfiguration.Configure(WebApiConfig.Register);
}

在项目中，App_Start 文件夹中会找到一个名为 WebApiConfig.cs 的文件。打开它。

它包含以下代码。

namespace WebAPISample
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

如您所见，Web API 特定的路由在其内部定义。

这就是为什么需要“api”关键字的原因。

GET 方法是如何被调用的？

在这种情况下，我们的 HTTP 服务“Employee”被视为一个资源，它将由 URL“https://:somePort/api/Employee”标识。当 HTTP 请求发送到此 URL 时，Web API 引擎检查请求的类型。在我们的例子中，请求类型是“Get”，因此 Web API 引擎调用了 Get 方法。

请求类型是如何变成 Get 的？

在这个例子中，我们使用浏览器的地址栏来发出请求。由浏览器地址栏发出的请求总是导致 GET 请求。

其他请求呢？

在 Web API 中，简单地创建四个方法，分别命名为 GET、POST、PUT、DELETE。

每个方法都代表一种请求类型。

现在从测试的角度来看，GET 方法可以通过浏览器的地址栏轻松测试，但是 POST、PUT、DELETE 不能直接通过浏览器请求。我们必须使用一些工具或一些 UI，通过一些编码来为我们完成这项工作。

我们很快将就此进行一次实践实验。

如果我们想定义自定义方法怎么办？

在实际场景中，我们总是希望创建不止一种 GET/POST/PUT/DELETE 函数。例如 – GetCustomers、GetCustomerById、GetCustomerByDepartment。

在这种情况下，我们必须定义多个路由或更改默认路由。

请看下面的例子。

config.Routes.MapHttpRoute(
                name: "SecondRoute",
                routeTemplate: "api/GetCustomerById/{id} ",
                defaults: new {controller= “Customer”, action= “GetCustomerById” }
            );
            config.Routes.MapHttpRoute(
                name: "ThridRoute",
                routeTemplate: "api/{controller}/{action}"
            );//generic route like Asp.Net MVC

如何确认它是 REST 服务？

查看响应。没有涉及 SOAP 标签。我们直接得到了数据。

同样，在请求时，我们没有发送任何 SOAP XML。只是简单地使用 HTTP 发出请求即可。

为什么返回 XML 作为响应？

当我们向服务发出请求时，它以 XML 格式返回数据。

在我回答这个问题之前，让我先明确一点。是的，数据是 XML 格式，但 SOAP 信封已经消失了☻

现在就 XML 格式而言，数据不能在不同技术之间直接发送。它必须转换为 XML 或 JSON 字符串，然后进行传输。在 Web API 的情况下，我们返回的是纯粹的员工数据，它将被 Web API 引擎转换为 XML 字符串并返回。

你认为这是一个问题吗？实际上这是一个功能 ☻

Web API 有一个非常好的功能叫做内容协商。客户端可以协商输出内容。如果客户端请求 XML，Web API 将返回 XML；如果客户端请求 JSON，Web API 将返回 JSON。

在上次测试中我使用了 Chrome 浏览器。在 Internet Explorer 中检查相同的示例。您将获得 JSON 作为响应。

这是否意味着我的 Web 应用程序将存在兼容性问题？

不。基本上，最终用户永远不会通过浏览器地址栏直接访问 Web API。他们将使用一些 UI。UI 将借助一些编程语言，如 C#、JavaScript 等与 Web API 通信。这意味着访问 Web API 的后台代码总是相同的。当我们使用 C# 或 JavaScript 访问 Web API 时，默认情况下我们得到 JSON，但我们也可以指定响应内容类型并获取 XML。

什么是 Angular？

我们使用 JavaScript 使静态 HTML 动态化。使用 JavaScript，我们可以动态更改现有 HTML 的外观、值或结构。

Angular 是当今业界最受欢迎的 JavaScript 框架之一。所以我相信你至少应该了解它的基础知识。

Angular 是 Google 推出的一种 JavaScript 框架，主要专注于单页应用程序。

注意：在本系列中，我只是想让大家熟悉 AngularJS。它不会包含详细的 Angular 主题。

AngularJS 是一个库吗？

不，它是一个框架。

库和框架有什么区别？

库提供一组可重用的 API，而框架在提供可重用 API 的同时，还会进行一些特殊的自动化操作。

例如 –

JQuery 是一个可重用的库，它提供了一组函数，使 DOM 操作和 DOM 遍历变得更容易。

.Net 是一个框架，它提供可重用的功能，但它也处理编译、执行，它使垃圾回收在后台运行，并确保清除未使用的内存。

所以框架是自己做很多事情的东西。

为什么需要 Angular？

为了理解这一点，我们必须了解传统 JavaScript 编程的问题。

（完成本文中的所有实验后，请再次阅读以下解释）

我想您在看完下面的示例后就能很好地回答这个问题。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
        var SomeValue;
        function SetValue() {
            SomeValue= "Initial Value";
            document.getElementById('MyTextbox').value = SomeValue;
        }
        function UpdateValue() {
            SomeValue = "New Value";
        }
</script>
</head>
<body >
<input type="text" id="MyTextbox" value="" disabled />
<input type="button" id="BtnClick" value="Click Me" />
</body>
</html>

在上面的演示中，我们试图实现什么？

• 有一个名为 SomeValue 的变量，我们在页面加载时将该变量的值加载到文本框中。
• 当按钮被点击时，变量的值被更新为一些新值。

现在让我们了解上面示例代码或简单来说传统 JavaScript 编程的问题。

1. 假设将来我们被要求更改 UI 外观。假设客户要求使用标签或 span 而不是文本框。这看起来是一个非常简单的更改，但难道它不会影响您的 JavaScript 吗？所以问题是，每次我们更改 UI 设计时，JavaScript 很可能会受到影响
2. 按钮点击确实会更新变量的值，但它会更新文本框中的值吗？不。所以问题是，每次 JavaScript 值更新时，UI 都需要进行显式更新。
3. 我们编写的 JavaScript 代码非常混乱。您不会发现各个部分之间有固定的分离。例如，我们的 JavaScript 将同时包含，
   1. 逻辑部分
      1. 与服务器通信以获取新值
      2. 验证输入
      3. 在使用 FirstName 和 LastName 之前将其组合。
   2. 表现部分
      1. 在 TxtSalary 文本框中显示薪水
      2. 如果薪水大于 20000，文本框应为红色，否则为绿色

解决方案 - Angular

使用 Angular，我们可以编写 HTML，并独立于 HTML 编写 JavaScript。在运行时，Angular 会动态地将 JavaScript 连接到 HTML。

Angular 在运行时创建了 UI 和 JavaScript 之间的双向绑定。因此，UI 值的任何更改都会自动更新 JavaScript 变量，而任何 JavaScript 更改也会自动反映在 UI 中。

绑定完全是运行时进行的，因此我们获得了演示层（HTML）和逻辑层（JavaScript）之间的清晰分离。Angular 将 MVW 架构引入了 JavaScript 编程世界。

Angular 如何工作

要使用 Angular，我们需要两样东西：JavaScript 和 HTML。

以下是 Angular 工作原理的逐步解释。如果您不能 100% 理解，请不要担心，完成演示后再读一遍。

1. JavaScript - 在 Angular 中，关键概念是模块。模块充当应用程序不同部分的容器。模块主要封装以下两件事。
   1. 模型——这是要在 UI 中显示的数据。模型也可以是决定 UI 如何显示的东西。
   2. 控制器——将模型连接到 UI
2. 在 Angular 中有一个叫做指令的概念。它们是特殊属性，将附加到 HTML 元素上，并改变这些元素的默认行为。
3. HTML - 视图将使用 HTML 进行设计。一个 HTML 可以借助 HTML 容器元素（如“table”、“div”等）分解成多个独立的区域。
   每个部分都将借助 Angular 指令“ng-App”被视为独立的应用程序。“ng-App”属性将分配给在步骤 1 中创建的模块。
   在某些情况下，整个 HTML 页面被视为一个应用程序。在这种情况下，“ng-App”指令将应用于 body 或 HTML 标签。
4. JavaScript – 如我在步骤 1 中所说，每个模块将创建一个或多个控制器。
5. HTML - 每个应用程序可能包含一个或多个子部分，这些子部分借助 HTML 容器元素（如“table”、“div”等）在其内部定义。这些子部分将相互依赖。根据逻辑操作，它们将被划分。每个子部分将从不同的控制器获取数据。哪个部分从哪个控制器获取数据将通过名为“ng-controller”的特殊指令决定。
6. HTML – 在每个子部分内部，将编写一些 HTML，每个 HTML 都可以通过模型的形式从控制器获取数据。
7. 执行
   1. 当应用程序执行时，在运行时，Angular 解析器将解析 HTML 中的所有应用程序。为了识别应用程序，它将搜索 ng-App 指令。
   2. 一旦找到可解析元素，Angular 将在可解析元素内部找到 ng-controller 指令，并相应地创建控制器的对象。
   3. 将创建新的子作用域，并作为可注入参数提供给控制器的构造函数，即 $scope。（不用担心这一点。您很快就会明白）
   4. 之后，Angular 使用控制器暴露的数据（模型）解析 HTML。

Angular 演示

实验 1 – 简单 Angular 演示

步骤 1 – 下载 Angular

我们将使用上一个实验中创建的相同 Web API 项目进行此演示。

右键单击项目，选择“管理 NuGet 包”。在在线部分搜索 angular 并安装“AngularJs core”。

步骤 2 – 创建 HTML

在项目中创建一个名为 HTML 的新文件夹，并创建一个名为 SimpleAngular.html 的新 HTML 文件，如下所示。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

</body>
</html>

步骤 3 – 包含 Angular

在 Simple.html 文件中包含 Angular.js 文件，如下所示

<script src="../Scripts/angular.js"></script>

步骤 4 - 创建 Angular 模块

<script>
    var MyModule = angular.module("MyAngularModule", []);
</script>

如您所见，angular.module 函数接受两个参数。第一个参数是模块的名称，第二个参数将用于指定其他依赖模块。

在本系列中，我们不会深入探讨第二个参数。

注意：“MyAngularModule”是 Angular 模块的名称，而“MyModule”只是一个 JavaScript 引用对象。

步骤 5 – 创建 HTML 应用程序

将 ng-App 指令附加到 body 标签，如下所示。

</script>
</head>
<body ng-app="MyAngularModule">

</body>

如您所见，这次整个主体被视为一个应用程序。

步骤 6 – 创建控制器

在模块内部创建控制器，如下所示。

var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {

    });
</script>

目前，只需将 $scope 视为一个变量，它将封装视图所需的所有模型。我们将在稍后详细讨论它。

步骤 7 – 将控制器附加到视图

只需借助“Div”标签在 body 内部定义一个子部分，并将控制器附加到它。

<body ng-app="MyAngularModule">

    <div ng-controller="MyController">


    </div>

</body>

步骤 8 – 定义模型数据

在控制器函数中定义模型数据，如下所示。

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {
        $scope.CustomerName = "Sukesh Marla";
        $scope.Designation = "Corporate Trainer";
    });
</script>

步骤 9 – 在视图中显示模型数据

在视图中使用以下 HTML 显示模型数据

<body ng-app="MyAngularModule">

    <div ng-controller="MyController">

        <span>{{CustomerName}}</span>

        <span> - </span>

        <i>{{Designation}}</i>

    </div>

</body>

步骤 10 – 执行和测试

按 F5 键执行应用程序。输入 HTML 文件的物理 URL 并检查输出。

关于实验 1 的讨论

什么是 $scope

这是一个子作用域。当 Angular 解析器找到 ng-Controller 时，它会创建两件事。

• 控制器的新实例
• 新的子作用域

这个新的子作用域作为可注入参数提供给控制器的构造函数，即 $scope。

我们将视图所需的一切都定义为这个 $scope 的成员。

{{}} 符号表示什么？

这在 Angular 中称为表达式。Angular 解析器将从当前子作用域获取 {{ 和 }} 之间指定的变量的值并显示它。

什么是 MVW？

我们将在 Angular 的实验 3 结束时讨论这个问题。

实验 2 - 更改 UI 设计

在这个实验中，我们有一个小的更改需求。我们的需求是“在禁用文本框中显示 CustomerName”。

步骤 1 – 将 UI 设计更改为如下。

<body ng-app="MyAngularModule">

    <div ng-controller="MyController">

        <input type="text"  value="{{CustomerName}}" disabled />

        <span> - </span>

        <i>{{Designation}}</i>

    </div>

</body>

步骤 2 – 执行和测试

按 F5 键执行应用程序。输入 HTML 文件的物理 URL 并检查输出。

如您所见，UI 的更改不再影响 JavaScript 代码。

实验 3 – 理解双向绑定

在这个实验中，我们只是将上面的实验提升到更高的层次。

要求

• Designation 将不再显示在 UI 中
• CustomerName 文本框将被启用
• CustomerName 也将显示在文本框旁边的 span 中
• 更新按钮将添加到 UI
• 单击“更新”时，文本框的值将更新为“New Updated Value”

步骤 1 – 更改 UI 部分

将正文内容更改为以下标记。

<div ng-controller="MyController">

    <input type="text" ng-model="CustomerName" />

    <span>{{CustomerName}}</span><br />

    <input type="button" value="Update"

            ng-click="UpdateValue();" />

</div>

如您所见，引入了两个新指令。

• ng-model
  正如我之前所说，指令会改变 HTML UI 元素的默认行为。ng-model 会改变输入控件的默认行为。通常，当输入控件的值更新时，它不会做任何事情，但当附加 ng-bind 时，它会在模型和控件之间创建双向绑定。因此，一旦模型值改变，UI 值就会刷新；每次 UI 值更新时，模型也会自动更新。
• ng-click
  就像 onclick 一样，它将 click 事件处理程序附加到控件，但这次事件处理程序将成为当前子作用域的一部分。因此，在事件处理程序内部，我们可以访问所有当前子作用域元素，包括模型。

步骤 2 – 重新定义控制器

将控制器代码重新定义为以下内容

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope) {
        $scope.CustomerName = "Sukesh Marla";
        $scope.Designation = "Corporate Trainer";
        $scope.UpdateValue = function () {
            $scope.CustomerName = "New Updated Value";
        }
    });
</script>

步骤 3 – 执行和测试

按 F5 键执行应用程序。输入 HTML 文件的物理 URL 并检查输出。

关于实验 3 的讨论

什么是 MVW？

在 Angular 中，View 表示用户将与之交互的 UI，而 Model 表示 View 所需的数据。

现在，让我们谈谈控制器。

• 控制器将控制视图和数据（模型）之间的通信。因此，我们可以称之为 MVC 架构中的控制器。
• 控制器不仅将视图所需的所有数据封装在 $scope 内部，还封装了视图中的事件。因此，我们可以将其称为 MVVM 架构中的 ViewModel。
• 它还封装了演示逻辑。例如，假设我们想要显示一些值，然后根据某些条件对其进行格式化。例如——如果薪水大于 2000，则以红色显示薪水，否则以蓝色显示。在 Asp.Net MVC 中，我们借助 ViewModel 处理了这种情况，但当我们谈论 MVP 架构时，它是 Presenter 的功能。因此，我们可以称之为 Presenter。

这就是我们称之为模型-视图-任意（Model-View-Whatever）的原因。任何可以将视图和模型连接起来的东西。

Angular 与 Web API 演示

这个实验将再次是前一个实验的升级。在这个实验中，

• 将有两个文本框，一个用于 CustomerName，一个用于 Designation。
• 我们将从 Web API 获取文本框的初始值。
• 点击按钮后，当前文本框值将传递给 Web API。Web API 将升级该值并将新值返回给 Angular。

步骤 1 – 创建 Web API 模型

在 Model 文件夹中创建一个名为 Customer 的新类，如下所示。

namespace WebAPISample.Models
{
    public class Customer
    {
        public string CustomerName { get; set; }
        public string Designation { get; set; }
    }
}

步骤 2 – 创建 Web API 控制器

在 Controller 文件夹中创建一个名为 Customer 的新 Web API。

步骤 3 – 创建 GET 操作

打开 CustomerController.cs 文件，并按如下所示放置 using 语句。

using WebAPISample.Models;

现在，在 CustomerController 中创建一个名为 GET 的新动作方法。整体结构如下所示。

namespace WebAPISample.Controllers
{
    public class CustomerController : ApiController
    {
        public Customer GET()
        {
            Customer c = new Customer();
            c.CustomerName = "Sukesh Marla";
            c.Designation = "Corporate Trainer";
            return c;
        }
    }
}

步骤 4 - 更改 AngularJs 端的控制器代码

MyModule.controller("MyController", function ($scope,$http) {
    $http.get("/api/Customer").then
    (
        function (r) {
            $scope.Customer = r.data;
        }
    );
    $scope.UpdateValue = function () {

    }
});

什么是 $http？

为了让生活更轻松，Angular 提供了几个有用的服务。服务只是对一些可重用功能的封装。

例如， $http 服务允许我们调用服务器 API。

$http 的实例何时创建？

当 Angular 解析器找到 ng-controller 指令时，它会创建一个控制器实例和一个新的子作用域。尽管服务像 $scope 一样被注入到控制器中，但服务不会在开始时实例化。它会在第一次使用时实例化。

注意：服务实例只创建一次。之后，所有引用都将重用相同的对象。它严格遵循单例模式。

什么是 $http.get？

$http.get 将向服务器 API 发出 GET 请求。这将是一个异步调用。简单来说，在服务器执行完成之前，$http.get 之后的下一行代码就会执行。

与 $http.get 一起使用的“then”函数有什么作用？

正如我之前所说，$http.get 会异步调用服务。因此，它不会返回实际值，而是返回一个特殊的 Promise 对象。

Promise 对象暴露了一个名为“then”的函数，该函数期望一个函数类型的参数。

当 Web API 执行完成时，传递给“then”函数的函数将自动执行。

步骤 5 – 更改 UI

将正文部分的内容更改为以下标记。

<div ng-controller="MyController">

    <input type="text" ng-model="Customer.CustomerName" />

    <input type="text" ng-model="Customer.Designation" />

    <input type="button" value="Update"

            ng-click="UpdateValue();" />

</div>

步骤 6 – 执行和测试

按 F5 键执行应用程序。输入 HTML 文件的物理 URL 并检查输出。

注意：文本框可能需要稍等片刻才能填充值。

步骤 7 – 创建 POST 操作

在 CustomerController 中创建一个名为 POST 的新动作方法，如下所示。

public Customer POST(Customer c)
{
    c.CustomerName += " New";
    c.Designation += " New";
    return c;
}

步骤 8 – 更改 UpdateValue 函数

将 Angular 端的 UpdateValue 函数更改为以下内容。

<script>
    var MyModule = angular.module("MyAngularModule", []);
    MyModule.controller("MyController", function ($scope,$http) {
        $http.get("/api/Customer").then
        (
            function (r) {
                $scope.Customer = r.data;
            }
        );
        $scope.UpdateValue = function () {
            $http.post("/api/Customer", $scope.Customer).then
                (
                    function (r) {
                        $scope.Customer = r.data;
                    }
                );
        }
    });
</script>

就像 GET 一样，POST 也将返回 Promise 对象，其余一切都相同。

$http.post 将发送 POST 请求到 Web API，在服务器端 Web API 引擎将执行 POST 操作。

步骤 8 – 执行和测试

按 F5 键执行应用程序。输入 HTML 文件的物理 URL 并检查输出。

双向绑定的完整魔力。

从 MVC 5 开始

如果您想从 MVC 5 开始，请从下面的视频“2 天学会 MVC 5”开始。

结论

到此，我们的额外日文章——Web API 和 Angular 简介就完成了。

您的评论、邮件总是激励我们做得更多。请在下方发表您的想法和评论，或发送邮件至 SukeshMarla@Gmail.com

在 Facebook、LinkedIn 或 Twitter 上关注我们，以获取新发布的更新。

如需在孟买进行线下技术培训，请访问 StepByStepSchools.Net

如需在线培训，请访问 JustCompile.com 或 www.Sukesh-Marla.com