CODEWITHSUNDEEP
asp.net-web-apiangular
smolesen
smolesen

Reputation: 1333

Angular2 calling ASP.NET 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:

<!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...

Upvotes: 1

Views: 10337

Answers (1)

micronyks
micronyks

Reputation: 55443

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

    }
}

Upvotes: 4

Related Questions