AngularJS-Dienst in Angular konvertieren

Question

Wie konvertiert man AngularJS in Angular? Ich habe eine Komponente mit dem Namen ForgotPassword erstellt und habe keine Ahnung, wie ich http.post korrekt an meinen C# -Controller senden kann.

function (window, angular) { 
"use strict"; 

angular.module("Mobile") 
.service("accountService", ["$http", function ($http) { 
return { 

forgotPassword: function (email, success, error) { 
$http.post("Account/ForgotPassword", { Email: email}).success(success).error(error); 
    } 
    } 
}]); 
})(window, window.angular); 

Answer 1

Sie müssten eine Serviceklasse

app.serivce.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AppProvider {  
    constructor(private http: Http) { 
    } 

    public forgotPassword(email: string):Observable<any> { 
    let url:string = 'apiUrl/Account/ForgotPassword'; 
    let body: any = { Email: email } 

    return this.http.post(url, body).map((res:Response) => res.json()); 
    } 
} 

Diese Methode aus Ihrem component.ts

Datei

Answer 2

accountComponent.ts genannt würde schaffen

constructor(private accountSer: accountService) 

forgotPasswordButton(){ 
this.accountSer.forgotPassword(value) 
} 

accountService.ts

import { Injectable, ErrorHandler } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 


import 'rxjs/Rx'; 



@Injectable() 
export class UserDetailService { 
    public headers: Headers; 
    constructor(private http: Http) { 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
    } 
    forgotPassword(value){ 
    this.http.post('Account/ForgotPassword', JSON.stringify(value), { headers: this.headers }).subscribe();}} 

Answer 3

Erstellen einer Serviceklasse

import {Injectable} from '@angular/core'; 
import {Http, Response, Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class accountService { 

    forgotPassword(param): Observable<any> { 
     return this.http.post('Account/ForgotPassword', 
      JSON.stringify(param), 
      {headers: this.headers}) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 
} 

dann Dienst in die Komponente

import {accountService} '../../services/accountService ' 

rufen Sie Ihren Service von der Komponente importieren

export class ForgotPasswordComponent implements OnInit { 
    constructor(private http: HttpClient , public httpService: accountService) { 


    forgotPassword() { 
     this.busy = this.httpService.forgotPassword() 
      .subscribe(
       data => { Email:this.email }, 
       error => console.log('error'), 
       () => this.forgotPasswordComplete(null) 

      ); 
    } 

    forgotPasswordComplete(result: any) { 
     //alert('error loading http service'); 
    } 
    } 
}