Angular2调用ASP.NET Web API

我是一个Angular/Angular2的新手，也许我陷入了过深的水......但我试图显示来自Web API控制器的结果角... 到目前为止，我有：Angular2调用ASP.NET Web API

boot.ts：

import {bootstrap} from 'angular2/platform/browser' 
import {HTTP_PROVIDERS} from 'angular2/http' 
import {AppComponent} from './app' 

bootstrap(AppComponent, [HTTP_PROVIDERS]);

app.ts：

import {Component} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

@Component({ 
    selector: 'my-app', 
    template: '{{title}}' 
}) 
export class AppComponent { 
    http: Http; 
    public title; 
    constructor(http: Http) { 
     this.title = 'Loading list'; 
     this.http = http; 
    } 
}

的index.html：

个

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Angular 2 with ASP.NET 5</title> 
    <link href="libs/css/bootstrap.css" rel="stylesheet"/> 
    <!-- 1. Load libraries --> 
    <script src="libs/es6-shim.min.js"></script> 
    <script src="libs/system-polyfills.js"></script> 
    <script src="libs/shims_for_IE.js"></script> 
    <script src="libs/angular2-polyfills.js"></script> 
    <script src="libs/system.js"></script> 
    <script src="libs/rx.js"></script> 
    <script src="libs/angular2.dev.js"></script> 
    <script src="libs/http.dev.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       appScripts: { 
        defaultExtension: 'js' 
       } 
      } 
     }); 
    </script> 
    <script> 

     System.import('appScripts/boot') 
      .then(null, console.error.bind(console)); 
    </script> 

</head> 
<body> 
<h2>Device list 1</h2> 
<my-app>Loading...</my-app> 
</body> 
</html>

DeciveController.cs

[Route("[controller]")]  
public class DevicesController 
{ 
    [HttpGet] 
    public object Get() 
    { 
     return new[] { new { id= "1", name = "Raspberry 1" }, 
new {id="2", name = "Raspberry 2" }}; 
    } 
}

，但我无法弄清楚如何调用控制器....

任何帮助将不胜感激......

来源

2016-03-26 smolesen

我米显示你没有使用任何外部服务。稍后随着您的移动，您将了解Angular2中的服务。

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

export class AppComponent { 
    http: Http; 
    public title; 
    constructor(http: Http) { 
     this.title = 'Loading list'; 
     this.http = http; 
     this.url='/api/Devices'; 
     this.http.get(this.url) 
           .map(response => response.json()) 
           .subscribe((res) =>{ 
                this.obj=res;     
                console.log(this.obj);         
                }, 
           (err)=>console.log(err), 
           ()=>console.log("Done") 
           ); 

    } 
}

来源

2016-03-26 14:25:24 micronyks

正是我需要继续前进，谢谢！ – smolesen

不用客气@smolsen ... – micronyks

@smolesen什么是this.obj意味着它没有声明？ – jkyadav

Angular2调用ASP.NET Web API

回答

相关问题