Multiple ways of calling data from server to UI in angular2

vinayak ghanti

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

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

vinayak ghanti9y ago
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 ghanti9y ago
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 Zeeshan9y ago
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

Multiple ways of calling data from server to UI in angular2

3 Replies

My Score

Score{{GetScores?.score}}

Rank:{{GetScores?.level}}

My Score

Score{{GetScores?.score}}

Rank:{{GetScores?.level}}