Angular2调用ASP.NET Web API

编程入门 行业动态 更新时间:2024-10-28 16:27:33
本文介绍了Angular2调用ASP.NET Web API的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我是Angular/Angular2的新手,也许我涉水太深了....但是我正尝试使用angular显示来自Web API控制器的结果... 到目前为止,我有:

I'm a total newbie to Angular/Angular2, and maybe I'm getting into too deep water.... but I'm trying to display the result from a Web API controller using angular... So far I have:

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:

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

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" }}; } }

但是我不知道如何调用控制器....

but I can't figure out how to call the controller....

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

Any help would be greatly appreciated...

推荐答案

我向您展示的是未使用任何外部服务的情况.稍后,当您移动时,您将了解Angular2中的服务.

I'm showing you without using any external service. later as you move, you will learn what service is in 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

本文发布于:2023-10-29 13:29:47,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1539820.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:ASP   NET   API   Web

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!