Multiple ways of calling data from server to UI in angular2

Question

Hi Guys Am new to angular2 i have doubt am running asp.net mvc 5 with razor engine application i have successfully made a setup of angular2 am able to create component Now i want to call data from controllers JSONResult through angular2 how can i implement it ? or we need to have web api ? any links or suggestion will be greater. Thanks Vinayak

vinayak ghanti · Answer

Thanks for your answer Afzaal Ahmad Zeeshan and i was looking in angular2 anyway this how it worked for me angular2. app.component.ts import {Component} from '@angular/core'; import {DemoService} from './demo.service'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'score-app' template:` My Score Score {{GetScores?.score}} Rank: {{GetScores?.level}} ` styles: ['h3 { color:#f7a00f; }'] }) export class AppComponent { public GetScores; public GetMychalls public GetSTAs public GetHistorys constructor(private _demoService: DemoService) { } ngOnInit() { this.GetingScore(); } GetingScore() { this._demoService.GetScores().subscribe( data => { this.GetScores = data[0]; //console.error(getings score ); } error => { console.error(Error saving Score!); return Observable.throw(error); } ); } } Demo.Service.ts import {Injectable} from '@angular/core'; import {Http Response Headers RequestOptions} from @angular/http; import {Observable} from 'rxjs/Rx'; @Injectable() export class DemoService { constructor(private http:Http) { } GetScores() { return this.http.get('/Home/GetScore/').map((res: Response) => res.json()); } }

vinayak ghanti · Answer

Thanks for your answer Afzaal Ahmad Zeeshan and i was looking in angular2 anyway this how it worked for me angular2. app.component.ts import {Component} from '@angular/core'; import {DemoService} from './demo.service'; import {Observable} from 'rxjs/Rx'; @Component({ selector: 'score-app' template:` My Score Score {{GetScores?.score}} Rank: {{GetScores?.level}} ` styles: ['h3 { color:#f7a00f; }'] }) export class AppComponent { public GetScores; constructor(private _demoService: DemoService) { } ngOnInit() { this.GetingScore(); } GetingScore() { this._demoService.GetScores().subscribe( data => { this.GetScores = data[0]; //console.error(getings score ); } error => { console.error(Error saving Score!); return Observable.throw(error); } ); } } Demo.Service.ts import {Injectable} from '@angular/core'; import {Http Response Headers RequestOptions} from @angular/http; import {Observable} from 'rxjs/Rx'; @Injectable() export class DemoService { constructor(private http:Http) { } GetScores() { return this.http.get('/Home/GetScore/').map((res: Response) => res.json()); } } and in index.cshtml add the score-app : loading..

Afzaal Ahmad Zeeshan · Answer

Did you try using the following code $http.get(yourcontrollerurl).success(function () { // process the data here. }); You can also perform other actions such as checking what was returned or modifying the UI of the web page. For another example please see: https://www.linkedin.com/pulse/http-post-get-web-api-calls-using-angularjs-suresh-muttagi