current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite
1

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

share|improve this question
up vote 3 down vote accepted

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

    }
}
share|improve this answer
    
Just what I needed to move on, thanks! – smolesen Mar 27 at 18:33
    
You are welcome @smolsen... – micronyks Mar 28 at 2:23
    
@smolesen What is this.obj means its not declared? – jkyadav Oct 4 at 9:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.