一个使用 AngularJS、WebAPI 和 Entity Framework 的基本 SPA 应用程序

下载 CRUD_using_AngualrJS_WebAPI_and_Entity_Framework-noexe.zip

引言

SPA（Single Page Application）是 Web 应用程序开发中的最新趋势。它是一种 Web 应用程序，最初加载单个 HTML 页面，并随着用户与应用程序的交互而动态更新。

在本文中，我们将探讨 SPA 的需求，并探索可用于创建单页应用程序的技术。我们还将看到如何使用 AngularJS、WebAPI 和 Entity Framework 创建一个基本应用程序。

背景

SPA 的目标是为用户提供类似于桌面应用程序的体验。SPA 通过减少对服务器的往返次数来提供丰富的用户体验。这是通过将尽可能多的逻辑转移到客户端来实现的。

在单页应用程序或 SPA 中，页面永远不会重新加载，尽管页面的一部分可能会刷新。这将对服务器的往返次数减少到最低限度。

如果我们考虑任何 Web 应用程序，都会涉及两个主要组件：Web 服务器和 Web 浏览器或客户端。

传统 Web 应用程序

在 传统的 Web 应用程序中，每次客户端调用服务器时，服务器都会返回一个新的 HTML 页面。这会导致浏览器中页面刷新。任何使用 ASP.NET 或任何其他服务器端框架进行编程的人都会对此很熟悉。如果用户在网页上的每个小动作都需要刷新页面，那就不太用户友好。这是传统 Web 应用程序中的正常情况，因为客户端早期计算资源有限。但随着计算的进步和多核处理器在机器上变得普遍，这种工作流似乎未能充分利用客户端。

此外，此类 Web 应用程序在带宽受限的情况下可能难以运行。这就是单页应用程序发挥作用的地方。

SPA 应用程序

SPA 也像传统 Web 应用程序一样请求一个初始网页。但在此第一个页面加载后，所有与服务器的交互都是异步发生的。 服务器端代码仅用于检索和持久化应用程序数据及其他资源。

现在让我们了解单页应用程序的通用架构。首先从宏观上看，应用程序的结构如下

SPA 应用程序

从图表中可以看出，与传统 Web 应用程序相比，SPA 中客户端承担了更多责任。仅使用 JavaScript 和 HTML 实现所有这些附加责任
本身会增加复杂性，实现和维护如此复杂的应用程序也不是一项容易的任务。

Jquery 大大降低了操作 DOM 的复杂性，但我们仍然需要理解 DOM 架构才能操作它。此外，测试使用 Javascript 或 Jquery 编写的代码可能是一个巨大的挑战。

所以从头开始构建 SPA 可能是一个真正的噩梦。这就是 Javascript 演示框架发挥作用的地方。有可用的 Javascript 开源框架来创建 SPA。其中两个最常见的是 DurandalJS 和 AngularJS。

大多数 SPA 应用程序的结构是：

主要组件有：

模型 (Model) 是应用程序的单一数据源。

视图 (View) 向最终用户表示模型。有一个更改跟踪系统，通过该系统，每当模型更改时，所有依赖视图都会自动更新。同样，视图更改会更新绑定的模型。有一个主外壳页面和一些作为微型页面加载到外壳中的视图。

控制器 (Controller) 将视图和模型联系起来。

使用代码

在此应用程序中，我们将使用以下框架和技术：

客户端

AngularJS Google 的一个开源 JavaScript 框架。它有助于使用模型、视图和控制器来构建基于浏览器的应用程序。

服务器

WebAPI 是一个用于构建 HTTP 服务的框架，并且适用于构建 RESTful 服务。

Entity Framework 和 SQL Server Entity Framework 是一个对象关系映射器，它使 .NET 开发人员能够使用领域特定对象处理关系数据。SQL Server 是 .NET 应用程序中最常用的关系数据库。

这里我们将使用 Angular 来构建一个提供 CRUD 功能的简单应用程序，因此我们将研究 Angular 的主要特性。Angular 是一个完整的 SPA 框架，因此它包含许多不同的特性，而不仅仅是 Angular 作为演示框架提供的许多特性，其中一些是：

• 使用依赖注入为我们管理依赖关系。
• 声明式地像 HTML 一样，因此它与 HTML 很好地融合。它扩展了 HTML，而不是试图操纵它。
• 包含 Jquery 的原生版本 Jqlite，用于 DOM 操作。
• 双向数据绑定
• 为测试而设计

创建客户端

AngularJS 脚本

现在让我们开始使用 AngularJS 构建我们的第一个基本 SPA。我们将在此过程中讨论 AngularJS 的特性。使用 AngularJS 我们需要做的第一件事是包含 AngularJS 库，如下所示：

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

现在我们已经准备好在应用程序中使用 AngularJS 功能了。

现在我们将创建一个模块来定义应用程序的范围，以及一个控制器来协调视图和模型。尽管我们只创建一个模块，但实际应用程序可以包含多个模块。以下是模块以及调用服务 get 方法的方法。还有其他 CRUD 操作的方法，它们与下面的 get 方法类似。

var customersApp= angular.module('customersApp', ['ngGrid']);
 customersApp.controller('customerCtrl', function ($scope,userRepository) { })   

您可能想知道 userRepository 是什么。为此，我们首先需要了解服务（Services）和工厂（Factories）的概念

服务和工厂

它们用于生成代表该服务的对象或函数，该服务可供应用程序的其余部分使用。

然后，此对象或函数作为参数传递给任何想要使用此服务或工厂的其他函数。这之所以可能，是因为 AngularJS 自动提供了依赖注入 (DI)。

当声明 serviceName 为可注入参数时，将为您提供该函数的一个实例。换句话说，就是 new Function()。因此，当使用服务作为参数时，将创建服务函数的一个新实例。

当使用工厂作为参数时，参数的值是调用传递给工厂方法的函数所返回的值。下面的插图将使其更清晰。

app.factory('MyFactory', function(){  
   return {      
   testfunction: function(text){   
          return "Hello"+text;    
          }    
   }          
});  

这里，如果我们将 MyFactory 用作函数参数，那么该参数的值就是函数 testfunction 返回的值。这里我们将使用工厂从 WebAPI 中获取数据。

customersApp.factory('customerRepository', function ($http) {
    return {
        getCustomers: function (callback) {
            $http.get(url).success(callback);
        }  

该 $http 服务是 AngularJS 内置的服务，用于与远程 HTTP 服务器通信。其中一个最重要的服务是 $scope 服务。它充当控制器和视图或 HTML 模板之间的胶水。

控制器并不知道应用程序中有什么视图。它只知道作用域，它设置了作用域，并且作用域可以从视图访问。如果您在 MVVM 或类似的表示模式中工作过，那么它类似于视图模型。现在让我们继续创建控制器。

 customersApp.controller('customerCtrl', function ($scope, customerRepository) {
    getCustomers();
    function getCustomers() {
        customerRepository.getCustomers(function (results) {
            $scope.customerData = results;
        }) 
    }  

get 方法从 WebAPI 获取数据。其他用于 CRUD 操作的方法类似。

现在脚本已经准备好，我们可以创建视图模板了。

视图

指令是一种扩展 HTML 的方式。我们可以创建自定义 HTML 元素或扩展现有元素。因此，我们可以将我们想要提供的功能封装在指令中。我们也可以在不使用指令的情况下使用 Jquery 提供附加功能，因此您可以考虑指令的优势。但下面的示例将明显显示指令的优势。

使用 Jquery，我们首先必须编写

<input id="dateOfBirth"> 

然后调用

$('#dateOfBirth').datepicker() 

与此形成对比的是，如果日期选择器是一个指令，我们如何使用它

<input datepicker> 

因此，使用指令不仅更方便，而且也使它们成为我们 HTML 的一部分。指令可以是元素或属性。

ngBind ngBind 属性告诉 Angular 用给定表达式的值替换指定的 HTML 元素的文本内容。我们通常使用花括号标记 {{ }} 或数据绑定表达式，它们提供相同的功能。

ngModel 将输入元素绑定到控制器设置的 scope 上的属性

ng-app 设置 AngularJS 应用程序的范围，可以放置在任何元素上，尽管通常放置在根元素上。ng-app 初始化 AngularJS 应用程序，因此这是任何使用 AngularJS 的应用程序中必需的指令。

ng-controller 将控制器附加到视图

我们需要添加到页面的第一个指令是 <html ng-app="customersApp">

上述指令将实例化 AngularJS 应用程序。现在我们将使用 ng-controller 指令指定要使用的控制器。我们将使用我们定义的控制器。

<body ng-controller="customerCtrl">

因此，我们在视图中唯一需要做的就是使用 $scope 访问数据。您可能已经感觉到，这创建了一个解耦的架构，因为视图和控制器不需要相互了解。

现在我们可以在视图中使用数据绑定表达式来显示数据。数据绑定表达式使用以下形式 {{ name }}，其中 name 是我们添加到 $scope 的变量名。

现在我们已经创建了 HTML 模板，我们可以转到 WebAPI 部分来存储和检索数据。

WebAPI

WebAPI 是一个构建 HTTP 服务的框架，可供不同类型的客户端（如浏览器和移动设备）使用。它是构建 RESTful 服务的理想平台。我们将使用 WebAPI 对数据库执行 CRUD 操作。使用 WebAPI 执行 CRUD 操作非常简单。它提供了映射到标准 HTTP 动词 GET、POST、PUT、DELETE 的方法。

这些方法用于执行数据库操作和处理客户端请求。

首先我们将创建客户实体，我们需要使用 WebAPI 方法对其执行操作。

  public class Customer
    {
        public string id { get; set; }
        public string city { get; set; }
        public string name { get; set; }
        public string address { get; set; }
        public string contactNo { get; set; }
        public string emailId { get; set; }
    }
    public class CustomerContext : DbContext
    {
        public DbSet<Customer> Customers { get; set; }
    }  

接下来我们添加 WebAPI 控制器类。

在模型选项中，我们将选择我们的 Customer 类，我们将为我们生成操作。由于我们使用的是 Entity Framework，因此数据访问代码由 Entity Framework 为我们处理。以下是使用 Entity Framework 的 CRUD 操作。

  public class CustomerController : ApiController
    {
        // GET api/<controller>
        public IEnumerable<Customer> Get()
        {
            CustomerContext customersdb = new CustomerContext();
            return customersdb.Customers;
        }
       // POST api/<controller>
        public void Post([FromBody]Customer customer)
        {
            CustomerContext customersdb = new CustomerContext();
            customersdb.Customers.Add(customer);
            customersdb.SaveChanges();
        }
        // PUT api/<controller>/5
        public void Put(int id, [FromBody]Customer customer)
        {
            CustomerContext customersdb = new CustomerContext();
            Customer customerToRemove=customersdb.Customers.Find(customer.id);
            customersdb.Customers.Remove(customerToRemove);
            Customer updatedCustomer = customer;
            customersdb.Customers.Add(updatedCustomer);
            customersdb.SaveChanges();
        }
        // DELETE api/<controller>/5
          public void Delete(string id)
        {
            CustomerContext customersdb = new CustomerContext();
            Customer cust=customersdb.Customers.Find(id);
            customersdb.Customers.Remove(cust);
            customersdb.SaveChanges();
        } 
 
    } 

由于我们采用的是代码优先方法，因此当我们运行应用程序时，将为我们创建数据库结构。

我们可以使用该应用程序插入新客户，以及编辑和删除客户。

摘要

所以这是对单页应用程序的基本介绍。我们看到了如何使用 AngularJS 和 WebAPI 创建一个 CRUD 应用程序。像 AngularJS 这样的 Javascript 框架可以帮助我们快速开始创建一个 SPA 应用程序。