Come effettuare una chiamata jax con angular2/http

Sto usando Angular 2.0.0-beta.0 con dattiloscritto. Sono stato in grado di effettuare una chiamata di jax con window ['fetch'] senza problemi (e non avevo bisogno di usare nessuno dei workaround richiesti nelle versioni precedenti.)Come effettuare una chiamata jax con angular2/http

Ma non potevo fare lo stesso chiamata ajax funzionante con http di angular2.

Ecco il codice per dimostrare il problema. Ci sono tre file, index.html nella cartella del progetto, e boot.ts e app.component.ts in una sottocartella chiamata app.

app.component.ts:

import {Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    providers: [HTTP_PROVIDERS], 
    template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}' 
}) 
export class AppComponent { 
    http: Http; 
    tasks = []; 

    constructor(http: Http) { 
     alert(http == null); 
     this.http = http; 
    } 

    getTasks(): void { 
     this.http.get('http://localhost:3000/tasks/norender'); 
      //.map((res: Response) => res.json()) 

      //it is important to have this subscribe call, since the 
      //request is only made if there is a subscriber 
      .subscribe(res => this.tasks = res); 
    } 
}

boot.ts:

import {bootstrap} from 'angular2/platform/browser' 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {AppComponent} from './app.component' 

bootstrap(AppComponent, [HTTP_PROVIDERS]);

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <!-- 1. Load libraries --> 
     <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/http.dev.js"></script> 
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      transpiler: 'typescript', 
      typescriptOptions: {emitDecoratorMetadata: true}, 
      packages: {'app': {defaultExtension: 'ts'}} 
     }); 
     System.import('app/boot') 
      .then(null, console.error.bind(console)); 
    </script> 

    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 

</html>

fonte

2015-12-26 Peter Pei Guo

Quale sarebbe il problema/errore? –

Hai aggiunto 'HTTP_PROVIDERS' nel tuo bootstrap? –

Il modo in cui hai provato è corretto. Ho appena notato anche che stai eseguendo il bootstrap in System.import. Non ho mai visto questo modo di farlo prima, è che lavori per te? Puoi provare a fare il bootstrap nello stesso file 'SomeComponent'? Ricorda di importare 'HTTP_PROVIDERS' da' angular2/http'. –

Si dovrebbe aggiungere un provider HTTP. Sono disponibili due opzioni:

On bootstrap:

import {HTTP_PROVIDERS} from 'angular2/http';

ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);

Sulla componente utilizzando il servizio :

i mport {HTTP_PROVIDERS} da 'angular2/http';

@Component ({

...

fornitori: [HTTP_PROVIDERS]

...
})

fonte

2015-12-26 21:17:21

Ho avuto un problema simile quando ho usato una vecchia versione del compilatore TypeScript. L'ho risolto modificando l'argomento del costruttore da http: Http a @Inject(Http) http: Http. Naturalmente, è necessario importare Inject per usarlo.

Vorrei provare a utilizzare la versione di SystemJS al https://code.angularjs.org/tools/system.js invece del rilascio su rawgithub.com.

fonte

2015-12-27 03:04:19 user934904

Come effettuare una chiamata jax con angular2/http

risposta

Problemi correlati