AngularJS 2调用.net core WebAPI的几个坑

前几天，按照AngularJS2的英雄指南教程走了一遍，教程网址是http://origin.angular.live/docs/ts/latest/tutorial/。

在步骤完成后，又更进一步，在英雄增删改的时候，直接调用.net core的WebApi来实现后台数据的操作，替换教程中的模拟WebApi方式。在替换.net core WebApi时，还是遇到了一些坑的，这里记录一下。

先来看一下WebApi和AngularJS的源代码：

WebApi

 1     [Route("api/[controller]")]
 2     public class ValuesController : Controller
 3     {
 4         private List<Hero> heroes;
 5 
 6         public ValuesController()
 7         {
 8             heroes = GetHeroes()
 9 
10         }
11 
12         [HttpGet]
13         public IEnumerable<Hero> Get()
14         {
15             return heroes;
16         }
17 
18         [HttpGet("{id}")]
19         public Hero Get(int id)
20         {
21             return heroes.Single(h => h.Id == id);
22         }
23 
24         [HttpGet]
25         [Route("GetList")]
26         public IEnumerable<Hero> GetList(string key)
27         {
28             return heroes.Where(h => h.Name.Contains(key));
29         }
30 
31         [HttpPost]
32         public void Post([FromBody]Hero info)
33         {
34             Hero hero = new Hero();
35 
36             hero.Id = heroes.Max(h => h.Id) + 1;
37             hero.Name = info.Name;
38 
39             AddHeroes(hero);
40         }
41 
42         [HttpPut("{id}")]
43         public void Put(int id, [FromBody]Hero hero)
44         {
45             Hero x = heroes.Single(h => h.Id == id);
46 
47             x.Name = hero.Name;
48 
49             UpdateHeroes(x);
50         }
51 
52         [HttpDelete("{id}")]
53         public void Delete(int id)
54         {
55             Hero hero = heroes.Single(h => h.Id == id);
56             RemoveHeroes (hero);
57         }
58 }

View Code