使用TypeScript,AngularJs和Web API构建基本的CRUD Web 应用

拼搏现实的明天。 2021-12-03 07:37 289阅读 0赞

原文地址:[using typescript with angularjs and web api][] 版权归其作者所有.

在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更具有可维护性的Js应用程序.同时也可以集成现有的第三方库文件,你可以在接下来的Demo中看到这项特性.这个基本的HTML应用将借助Asp.net Web API实现增,删,查,改功能.

主要特点如下:

*  使用TypeScript构建AngularJs的Controller,
 *  使用TypeScript并利用AngularJs 的Ajax功能与Web API进行通信,
 *  使用TypeScript的强类型来定义AngularJs对象.

在这个例子中,我使用VS 2012和Sublime Text来编写代码.你也可以选择自己喜欢的文本编辑器,如果你需要语法高亮或者代码自动补全功能,你需要单独下载程序包.

对于VS插件和windows下的可执行文件(tsc.exe,安装包的一部分),请访问: [http://www.typescriptlang.org/\#Download][http_www.typescriptlang.org_Download]. 如果你想选择一个不同的编辑器,(例如:Sublime Text或者Vim),请从这里寻找帮助 : [http://aka.ms/qwe1qu][http_aka.ms_qwe1qu]. TypeScript编译程序是必不可少的工具.

服务端通过Asp.net Web API实现(.Net平台下构建Http服务的实现,我个人很喜欢),当然你也可以选择自己喜欢的技术.

**使用Asp.net Web API 提供Http服务.**

对于这个例子,我处理的模型由一个单一实体构成----Product.

//Model
    public abstract class Entity
    {
        public Guid Id { get; set; }
    }
    
    public class Product : Entity
    {
        public string Name { get; set; }
        public decimal Price { get; set; }
    }

我们需要一个持久化机制来存储这些实体.我选择使用仓储模式把这些内容存在内存里.请根据需要,随意替换成适合你的东西(例如:Entity Framework或者Nhibernate.)

// IRepository
    public interface IRepository<TEntity>
        where TEntity : Entity
    {
        TEntity Add(TEntity entity);
        TEntity Delete(Guid id);
        TEntity Get(Guid id);
        TEntity Update(TEntity entity);
        IQueryable<TEntity> Items { get; }
    }

//InMemoryRepository
    public class InMemoryRepository<TEntity> : IRepository<TEntity> where TEntity : Entity
    {
        private readonly ConcurrentDictionary<Guid, TEntity> _concurrentDictionary 
            = new ConcurrentDictionary<Guid, TEntity>();
    
        public TEntity Add(TEntity entity)
        {
            if (entity == null)
            {
                //we dont want to store nulls in our collection
                throw new ArgumentNullException("entity");
            }
    
            if (entity.Id == Guid.Empty)
            {
                //we assume no Guid collisions will occur
                entity.Id = Guid.NewGuid();
            }
    
            if (_concurrentDictionary.ContainsKey(entity.Id))
            {
                return null;
            }
    
            bool result = _concurrentDictionary.TryAdd(entity.Id, entity);
    
            if (result == false)
            {
                return null;
            }
            return entity;
        }
    
        public TEntity Delete(Guid id)
        {
            TEntity removed;
            if (!_concurrentDictionary.ContainsKey(id))
            {
                return null;
            }
            bool result = _concurrentDictionary.TryRemove(id, out removed);
            if (!result)
            {
                return null;
            }
            return removed;
        }
    
        public TEntity Get(Guid id)
        {
            if (!_concurrentDictionary.ContainsKey(id))
            {
                return null;
            }
            TEntity entity;
            bool result = _concurrentDictionary.TryGetValue(id, out entity);
            if (!result)
            {
                return null;
            }
            return entity;
        }
    
        public TEntity Update(TEntity entity)
        {
            if (entity == null)
            {
                throw new ArgumentNullException("entity");
            }
            if (!_concurrentDictionary.ContainsKey(entity.Id))
            {
                return null;
            }
            _concurrentDictionary[entity.Id] = entity;
            return entity;
        }
    
        public IQueryable<TEntity> Items
        {
            get { return _concurrentDictionary.Values.AsQueryable(); }
        }
    }

一旦我们在这里完成了对象持久化,我们就可以创造一个Http服务,来提供一些基本的操作.我使用的是Asp.net Web API,所以我还要再创建一个 Controller.

//Product HTTP Service
    public class ProductsController : ApiController
    {
        public static IRepository<Product> ProductRepository
            = new InMemoryRepository<Product>();
    
        public IEnumerable<Product> Get()
        {
            return ProductRepository.Items.ToArray();
        }
    
        public Product Get(Guid id)
        {
            Product entity = ProductRepository.Get(id);
            if (entity == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return entity;
        }
    
        public HttpResponseMessage Post(Product value)
        {
            var result = ProductRepository.Add(value);
            if (result == null)
            {
                // the entity with this key already exists
                throw new HttpResponseException(HttpStatusCode.Conflict);
            }
            var response = Request.CreateResponse<Product>(HttpStatusCode.Created, value);
            string uri = Url.Link("DefaultApi", new { id = value.Id });
            response.Headers.Location = new Uri(uri);
            return response;
        }
    
        public HttpResponseMessage Put(Guid id, Product value)
        {
            value.Id = id;
            var result = ProductRepository.Update(value);
            if (result == null)
            {
                // entity does not exist
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return Request.CreateResponse(HttpStatusCode.NoContent);
        }
    
        public HttpResponseMessage Delete(Guid id)
        {
            var result = ProductRepository.Delete(id);
            if (result == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return Request.CreateResponse(HttpStatusCode.NoContent);
        }
    }

我们努力去实现标准的Http,因此附加逻辑来处理 Response.在这个步骤结束后,我们将会有一个功能完整的,(实现了CRUD)Http服务.

[![fiddler][]][fiddler]

**开始使用Angular Js 和 TypeScript**

服务端创建好以后,我们接着开始创建真正的网站部分.它将完全由Html/CSS/Js(TypeScript将会编译成Js)构成.我选择的初始模版像这样:

请注意:ProductsController.js文件是从名为ProductsController.ts的TypeScript源代码通过tsc.exe编译得到的.(我使用了命令行来执行这个编译步骤.).让我们为这个页面创建一个Angular Js的Controller.

//ProductsController.ts
    module Products {
        export interface Scope {
            greetingText: string;
        }
    
        export class Controller {
            constructor ($scope: Scope) {
                $scope.greetingText = "Hello from TypeScript + AngularJS";
            }
        }
    }

Produscts Module将被编译成一个 Js的命名空间,我们的Controller将被转译为 Products.Controller供程序使用.现在我们可以在页面中绑定一个欢迎致辞.请注意:结合TypeScript的特点,我们以Scope接口的形式定义了$scope对象.Typescript也允许我们使用 any 这种类型来定义,但就个人而言,我更倾向于使用更加严格的定义方式,因为他可以帮助你在编译时捕获错误信息.(VS2012甚至会在你编写的错误代码下面加入红色下划线,这真是太棒了.)现在,我们需要编译ProductsController.ts,在HTML中引用ProductsController.js,并且修改视图(view)来显示信息.

<div ng-controller="Products.Controller">
        <p>{
        {greetingText}}</p>
    </div>

[![fiddler][fiddler 1]][fiddler 1]

现在AngularJs Controller已经完成,让我们继续添加更多的功能.

**创建Model模块**

我们将创建一个Model模块,它会包含一个Product类,作为DTO对象(序列化为JSON)与Http的服务端进行交互.

module Model {
        export class Product {
            Id: string;
            Name: string;
            Price: number;
        }
    }

这个简单的模块包含了一个类型的定义,将会在页面的contrller中使用.

**环境声明( *ambient declarations.*)**

为了使用AngularJs提供的Ajax功能,我们将$Http服务传入到Controller的构造器中:

class Controller {
        private httpService: any;
    
        constructor ($scope: Scope, $http: any) {
            this.httpService = $http;
            //...
        }
        //...
    }

由于我们将$Http定义成了any的类型,所以编译器不会帮助我们在编译时发现潜在的错误.为了解决这个问题,我们使用环境声明**(译者注:元数据??)**.环境声明用来告诉编译器将要被引入的元素有特殊的意义(在这里是指Angular Js)并且不会被扩展.换而言之就是第三方类库的接口.声明源文件(.d.ts扩展名)被限制为只能包含环境声明.下面的angular.d.ts文件定义了两个接口,被我们用来调用Http服务.

declare module Angular {
        export interface HttpPromise {
            success(callback: Function) : HttpPromise;
            error(callback: Function) : HttpPromise;
        }
        export interface Http {
            get(url: string): HttpPromise;
            post(url: string, data: any): HttpPromise;
            delete(url: string): HttpPromise;
        }
    }

declare关键字是可选的,他会被隐式声明在所有的 .d.ts 文件中.

**TypeScript 和 Angular Js**

为了让编译器知道新增的两个模块(Model和Angular),我们需要添加两个引用信息到ProductsController.ts中.同时我们想要定义 Scope接口来包含视图使用的所有属性和方法.

页面将包含一个新增Product的表单(name,price文本框和一个按钮)同时展示一个包含所有Product的列表,其中的每个记录都可以被单独的删除.为了使演示变的简单,我忽略了更新记录的功能,但是只要我们实现了相应的操作,更新实现起来也是很简单的.

Scope接口看起来如下:

/// <reference path='angular.d.ts' />
    /// <reference path='model.ts' />
    
    module Products {
    
        export interface Scope {
            newProductName: string;
            newProductPrice: number;
            products: Model.Product[];
            addNewProduct: Function;
            deleteProduct: Function;
        }
        // ...
    }

只要有product被新增或者被删除,我们就从服务端重新获取所有的product并刷新列表.由于先前我们所做的工作,现在我们可以使用强类型的 Angular.Http和Angular.HttpPromise接口.

controller将包含私有方法与我们的服务端进行通信(getAllProducts, addProduct and deleteProduct).

export class Controller {
        private httpService: any;
    
        constructor ($scope: Scope, $http: any) {
            this.httpService = $http;
    
            this.refreshProducts($scope);
    
            var controller = this;
    
            $scope.addNewProduct = function () {
                var newProduct = new Model.Product();
                newProduct.Name = $scope.newProductName;
                newProduct.Price = $scope.newProductPrice;
    
                controller.addProduct(newProduct, function () {
                    controller.getAllProducts(function (data) {
                        $scope.products = data;
                    });
                });
            };
    
            $scope.deleteProduct = function (productId) {
                controller.deleteProduct(productId, function () {
                    controller.getAllProducts(function (data) {
                        $scope.products = data;
                    });
                });
            }
        }
    
        getAllProducts(successCallback: Function): void{
            this.httpService.get('/api/products').success(function (data, status) {
                successCallback(data);
            });
        }
    
        addProduct(product: Model.Product, successCallback: Function): void {
            this.httpService.post('/api/products', product).success(function () {
                successCallback();
            });
        }
    
        deleteProduct(productId: string, successCallback: Function): void {
            this.httpService.delete('/api/products/'+productId).success(function () {
                successCallback();
            });
        }
    
        refreshProducts(scope: Scope) {
            this.getAllProducts(function (data) {
                        scope.products = data;
                    });
        }
    
    }

非常棒的一点就是,我们不需要人为的引入任何定制的序列化逻辑.当通过$http服务取回数据后,我们可以把他们当成强类型的Product集合进行操作.add操作也是一样----我们仅仅传入一个Product,他将被自动序列化并最终在服务端被解析.

**创建视图(View)**

最后一步,我们需要创建一个集合新controller特性的视图.我将使用bootstrap来使他变简单一些.

<!DOCTYPE html>
    <html ng-app>
    <head>
        <title>Product list</title>
        <link rel="stylesheet" href="Content/bootstrap.css" />
        <script type="text/javascript" src="Scripts/angular.js"></script>
        <script type="text/javascript" src="Scripts/Controllers/model.js"></script>
        <script type="text/javascript" src="Scripts/Controllers/productsController.js"></script>
    </head>
    <body>
        <div ng-controller="Products.Controller">
            <form class="form-horizontal" ng-submit="addNewProduct()">
                <input type="text" ng-model="newProductName" size="30"
                    placeholder="product name">
                <input type="text" ng-model="newProductPrice" size="5"
                    placeholder="product price">
                <button class="btn" type="submit" value="add">
                    <i class="icon-plus"></i>
                </button>
            </form>
            <table class="table table-striped table-hover" style="width: 500px;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Price</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="product in products">
                        <td>{
        {product.Name}}</td>
                        <td>${
        {product.Price}}</td>
                        <td>
                            <button class="btn-small" ng-click="deleteProduct(product.Id)">
                                <i class="icon-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    </html>

最终的结果就像这样:

[![end][]][end]

现在我们的页面应该实现了应有的功能,并且可以与Http 服务端按照预期的情况进行通信工作了.

[![created][]][created]

最后:Wordpress和Android应用可能会因为一些原因影响post数据,不完整版,非常抱歉.

转载于:https://www.cnblogs.com/woodywu/p/3620765.html

[using typescript with angularjs and web api]: http://www.piotrwalat.net/using-typescript-with-angularjs-and-web-api/
[http_www.typescriptlang.org_Download]: http://www.typescriptlang.org/#Download
[http_aka.ms_qwe1qu]: http://aka.ms/qwe1qu
[fiddler]: http://www.piotrwalat.net/wp-content/uploads/2012/10/fiddler.png
[fiddler 1]: http://www.piotrwalat.net/wp-content/uploads/2012/10/fiddler1.png
[end]: http://www.piotrwalat.net/wp-content/uploads/2012/10/end.png
[created]: http://www.piotrwalat.net/wp-content/uploads/2012/10/created.png