如何使用角度2發佈服務？

-2

嗨，我是新角2。我準備了一個解決方案。 index.html上有三個文件，hello_world.html，hello_world.ts三個文件的代碼如下。我想從后角2.數據好心幫我，我怎麼可以用角2如何使用角度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發佈數據.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') 
    } 
    }

來源

2016-12-06 4605786

檢查angular.io網站，就說明你該怎麼辦呢？https://angular.io/docs/ts /latest/guide/server-communication.html – btinoco

創建服務使用觀測，使您的HTTP調用....

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

然後添加服務到您的組件並調用addHero功能後（添加）一個新的英雄。確保您將服務導入到服務文件之上。

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

}

您可以在這裏瞭解更多：https://angular.io/docs/ts/latest/guide/server-communication.html

來源

2016-12-06 05:30:54 btinoco

如何使用角度2發佈服務？

回答

相關問題