Question

我是Angular / Angular2的全新手，也许我进入了太深的水......但是我试图使用角度来显示来自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" }};
    }
}

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

非常感谢任何帮助......

Answer 1

我在不使用任何外部服务的情况下向您展示。稍后当您移动时，您将了解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")
                                );

    }
}

Angular2调用ASP.NET Web API

1 个答案: