_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大小写,则可以在WebApiConfig
Web 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']
})
通过IDE进行设计时类型检查,并在生成的代码之上进行编译时类型检查,可以更轻松地提高客户端编程的效率和产品质量。
不要做计算机可以做的事情,让计算机为我们努力工作。我们的工作是为客户提供自动化解决方案,因此最好先自行完成自己的工作。
兴趣点
在典型的角2个教程,包括官方的一个 这已经存档,作者经常督促应用程序开发者制作一个服务类,如“ HeroService
”,而黄金法则是:永远委托给配套服务类的数据访问。
WebApiClientGen
为您生成此服务类DemoWebApi_Controllers_Client.Heroes
,它将使用真正的Web API而不是内存中的Web API。在开发过程中WebApiClientGen
,我创建了一个演示项目DemoAngular2和各自用于测试的Web API控制器。
典型的教程还建议使用模拟服务进行单元测试。WebApiClientGen
使用真正的Web API服务要便宜得多,因此您可能不需要创建模拟服务。您应该在开发期间平衡使用模拟或实际服务的成本/收益,