Wie posten Sie Service mit Winkel 2?

-2

Hallo ich bin neu in eckigen 2 .Ich habe eine Lösung vorbereitet. Es gibt drei Dateien auf index.html, hallo_world.html, hello_world.ts den Code von drei Dateien sind unten angegeben. Ich möchte von Winkel 2. Daten veröffentlichen freundlich mir helfen, wie kann ich Daten mit Winkel 2Wie posten Sie Service mit Winkel 2?

Index.HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>Angular 2 QuickStart</title> 
<script 
src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> 

<script src="https://code.angularjs.org/tools/typescript.js"></script> 

<script src="https://code.angularjs.org/2.0.0-beta.0/angular2- 
polyfills.js"></script> 

<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> 

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 

<!-- 2. Configure SystemJS --> 
<script> 
    System.config({ 
    transpiler: 'typescript', 
    typescriptOptions: { emitDecoratorMetadata: true }, 
    packages: {'src': {defaultExtension: 'ts'}} 
    }); 
</script> 

<!-- 3. Bootstrap --> 
<script> 
    System.import('angular2/platform/browser').then(function(ng){ 
    System.import('src/hello_world').then(function(src) { 
     ng.bootstrap(src.HelloWorld); 
     }); 
    }); 
</script> 

</head> 

    <!-- 4. Display the application --> 
    <body> 
    <hello-world>Loading...</hello-world> 
    <!-- <click-me > Click</click-me>--> 
    </body> 
    </html>

hello_world.html

<div class="container"> 
    <h2>Registration form</h2> 
    <form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="email">First Name:</label> 
    <div class="col-sm-10"> 
    <input type="text" [(ngModel)]="yourFName" class="form-control" placeholder="Enter firstname"> 
    </div> 
</div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Last Name:</label> 
    <div class="col-sm-10"> 
    <input type="text" [(ngModel)]="yourLName" class="form-control" placeholder="Enter lastname"> 
    </div> 
</div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="email">Email:</label> 
    <div class="col-sm-10"> 
    <input type="email" [(ngModel)]="yourEmail" class="form-control" placeholder="Enter email"> 
    </div> 
</div>  
<div class="form-group"> 
    <label class="control-label col-sm-2" for="pwd">Password:</label> 
    <div class="col-sm-10"> 
    <input type="password" [(ngModel)]="yourpwd" class="form-control" id="pwd" placeholder="Enter password"> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
    <div class="checkbox"> 
     <label> 

      <input type="checkbox" [ngModel]="rememberMe" (ngModelChange)="addProp($event)"> Remember me</label> 
    </div> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 

    <button type="submit" (click)="onClickMe($event)" class="btn btn-default">Submit</button> 
    </div> 
    </div> 
    </form> 
    </div>

hello_world schreiben .ts

import {Component} from 'angular2/core'; 
    import { Http, Response } from '@angular/http'; 
    @Component({ 
    selector: 'hello-world', 
    templateUrl: 'src/hello_world.html'  
    }) 

    export class HelloWorld { 
    yourFName: string = ''; 
    yourLName: string = ''; 
    yourEmail: string = ''; 
    yourpwd: string = ''; 
    rememberMe: string=''; 
    clickMessage = ''; 
    public users = [ 
    { name: 'Jilles',Salary:57000, age: 30 }, 
    { name: 'Todd',Salary:65000, age: 30 }, 
    { name: 'Lisa',Salary:91000,age: 36} 
    ]; 
    onClickMe($event) {  
    alert('Click is working') 
    } 
    }

Quelle

2016-12-06 4605786

Überprüfung der angular.io Website, es zeigt Ihnen, wie es geht ... https://angular.io/docs/ts /latest/guide/server-communication.html – btinoco

Erstellen eines Dienst Ihre http Anruf mit Observablen zu machen ....

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

@Injectable() 
export class HeroService { 
    private heroesUrl = 'app/heroes'; // URL to web API 

    constructor (private http: Http) {} 

    addHero (name: string): Observable<Hero> { 

     let options = new RequestOptions({ headers: headers }); 

     return this.http.post(this.heroesUrl, { name }, options) 
       .map(this.extractData) 
       .catch(this.handleError); 
     } 

     private extractData(res: Response) { 
     ...code here for good response... 
     } 

     private handleError (error: Response | any) { 
      ...code here for bad response... 
     } 
}

dann den Dienst zu Ihrer Komponente hinzufügen und die addHero Funktion aufrufen schreiben (add) einen neuen Helden. Stellen Sie sicher, dass Sie den Service über Ihre Servicedatei importieren.

constructor (private heroService: HeroService) {} 

addHero (name: string) { 
     if (!name) { return; } 

     this.heroService.addHero(name) 
       .subscribe(
       hero => this.heroes.push(hero), 
       error => this.errorMessage = <any>error); 
     }

}

Sie mehr hier lernen können: https://angular.io/docs/ts/latest/guide/server-communication.html

Quelle

2016-12-06 05:30:54 btinoco

Wie posten Sie Service mit Winkel 2?

Antwort

Verwandte Themen