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:
<!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" }};
}
}
but I can't figure out how to call the controller....
Any help would be greatly appreciated...
asked Mar 26, 2016 at 11:40
1 Answer 1
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")
);
}
}
answered Mar 26, 2016 at 14:25
-
@smolesen What is this.obj means its not declared?jkyadav– jkyadav2016年10月04日 09:02:22 +00:00Commented Oct 4, 2016 at 9:02
lang-js