设为首页 加入收藏

TOP

使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效(四)
2019-09-17 17:25:38 】 浏览:75
Tags:使用 ASP.NET Web API Client Gen Angular 应用程序 开发 更加 高效
_Controllers_Client.Hero>>{ return this.http.get(this.baseUri + 'api/Heroes').map(response=> response.json()); } /** * Get a hero. * GET api/Heroes/{id} * @param {number} id * @return {DemoWebApi_Controllers_Client.Hero} */ getById(id: number): Observable<DemoWebApi_Controllers_Client.Hero>{ return this.http.get(this.baseUri + 'api/Heroes/'+id).map(response=> response.json()); } /** * DELETE api/Heroes/{id} * @param {number} id * @return {void} */ delete(id: number): Observable<Response>{ return this.http.delete(this.baseUri + 'api/Heroes/'+id); } /** * Add a hero * POST api/Heroes?name={name} * @param {string} name * @return {DemoWebApi_Controllers_Client.Hero} */ post(name: string): Observable<DemoWebApi_Controllers_Client.Hero>{ return this.http.post(this.baseUri + 'api/Heroes?name='+encodeURIComponent(name), JSON.stringify(null), { headers: new Headers({ 'Content-Type': 'text/plain;charset=UTF-8' }) }).map(response=> response.json()); } /** * Update hero. * PUT api/Heroes * @param {DemoWebApi_Controllers_Client.Hero} hero * @return {DemoWebApi_Controllers_Client.Hero} */ put(hero: DemoWebApi_Controllers_Client.Hero): Observable<DemoWebApi_Controllers_Client.Hero>{ return this.http.put(this.baseUri + 'api/Heroes', JSON.stringify(hero), { headers: new Headers({ 'Content-Type': 'text/plain;charset=UTF-8' }) }).map(response=> response.json()); } /** * Search heroes * GET api/Heroes?name={name} * @param {string} name keyword contained in hero name. * @return {Array<DemoWebApi_Controllers_Client.Hero>} Hero array matching the keyword. */ search(name: string): Observable<Array<DemoWebApi_Controllers_Client.Hero>>{ return this.http.get(this.baseUri + 'api/Heroes?name='+ encodeURIComponent(name)).map(response=> response.json()); } }

 

提示

如果您希望生成的TypeScript代码符合java script和JSON的camel大小写,则可以在WebApiConfigWeb API的脚手架代码添加以下行

config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = 
            new Newtonsoft.Json.Serialization.CamelCasePropertyNamesContractResolver();

然后属性名称和函数名称将在camel大小写中,前提是C#中的相应名称都在Pascal大小写中。有关详细信息,请查看camelCasing或PascalCasing

客户端应用编程

在像Visual Studio这样的正常文本编辑器中编写客户端代码时,您可能会获得很好的智能感知。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as namespaces from '../clientapi/WebApiNG2ClientAuto';
import DemoWebApi_Controllers_Client = namespaces.DemoWebApi_Controllers_Client;

@Component({
    moduleId: module.id,
    selector: 'my-heroes',
    templateUrl: 'heroes.component.html',
    styleUrls: ['heroes.component.css']
})

 

使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效

使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效

通过IDE进行设计时类型检查,并在生成的代码之上进行编译时类型检查,可以更轻松地提高客户端编程的效率和产品质量。

不要做计算机可以做的事情,让计算机为我们努力工作。我们的工作是为客户提供自动化解决方案,因此最好先自行完成自己的工作。

兴趣点

在典型的角2个教程,包括官方的一个  这已经存档,作者经常督促应用程序开发者制作一个服务类,如“ HeroService”,而黄金法则是:永远委托给配套服务类的数据访问

WebApiClientGen为您生成此服务类DemoWebApi_Controllers_Client.Heroes,它将使用真正的Web API而不是内存中的Web API。在开发过程中WebApiClientGen,我创建了一个演示项目DemoAngular2各自用于测试的Web API控制器

典型的教程还建议使用模拟服务进行单元测试。WebApiClientGen使用真正的Web API服务要便宜得多,因此您可能不需要创建模拟服务。您应该在开发期间平衡使用模拟或实际服务的成本/收益,

首页 上一页 1 2 3 4 5 下一页 尾页 4/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇高速输出-我们戏说缓存 下一篇Web Api之Cors跨域(干货)---大..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目