Share
Nella prima parte della serie di tutorial per principianti della serie angolare, hai appreso quali componenti sono presenti in Angular 4 e come scrivere componenti angolari.
In questa parte della serie di tutorial, imparerai quali servizi sono disponibili in Angular e come utilizzarli.
Inizierai clonando il codice sorgente dalla prima parte della serie di tutorial.
git clone https://github.com/royagasthyan/AngularComponent.git
Una volta ottenuto il codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularComponent npm install
Dopo aver installato le dipendenze, avviare l'applicazione digitando il seguente comando:
ng servire
Dovresti avere l'applicazione in esecuzione su http: // localhost: 4200 /.
In un'applicazione Angolare, i componenti gestiscono la presentazione dei dati alla vista. Il recupero dei dati per i componenti da visualizzare viene gestito dai servizi angolari.
Poiché la porzione di recupero dei dati viene gestita separatamente nei servizi angolari, semplifica la simulazione dei servizi di test.
Dalla documentazione ufficiale:
I componenti non dovrebbero recuperare o salvare i dati direttamente e certamente non dovrebbero presentare consapevolmente dati falsi. Dovrebbero concentrarsi sulla presentazione dei dati e delegare l'accesso ai dati a un servizio.
In questo tutorial, vedrai come creare un servizio Angolare per il recupero dei dati per un componente Angolare.
Un altro vantaggio dell'utilizzo dei servizi angolari è che facilita la condivisione dei dati tra due componenti separati.
In questo tutorial, creerai un componente di parole che cercherà la parola di query immessa dall'utente finale rispetto a un'API e restituirà il risultato della ricerca.
Farai la chiamata all'API utilizzando un servizio Angolare. Quindi, iniziamo creando un componente angolare.
Passare alla directory del progetto e creare una cartella chiamata parola.
Dentro il parola directory di progetto, creare un file chiamato word.component.html. Aggiungi il seguente codice HTML:
Componente di Word
Crea un file chiamato word.component.ts che controllerebbe il word.component.html modello. Ecco come appare:
importare Component da '@ angular / core'; @Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css']) export class WordComponent costruttore ()
Come visto nel codice sopra, hai appena creato il WordComponent classe che controllerebbe il word.component.html file di modello.
Ha un @componente decoratore dove hai definito il selettore usando quale sarebbe accessibile, il TemplateURL, e il componente styleUrls.
Una volta creato il componente, è necessario aggiungere la classe del componente al NgModule.
Apri il app.module.ts file all'interno del src / app directory e importa il nuovo WordComponent.
importare WordComponent da './word/word.component'
Includi il WordComponent dentro il NgModule dichiarazioni. Ecco come app.module.ts aspetto del file:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import CalcComponent da './calc/calc.component' import WordComponent da './word/word.component' import FormsModule da '@ angular / forms'; @NgModule (dichiarazioni: [AppComponent, CalcComponent, WordComponent], importa: [BrowserModule, FormsModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Apri il app.component.html file all'interno del src / app cartella e aggiungi il nuovo WordComponent usando il selettore definito. Ecco come appare:
Salvare le modifiche precedenti e riavviare il server. Si dovrebbe avere il componente di parola visualizzato durante il caricamento dell'applicazione.
Creiamo un servizio Angolare per interrogare la parola rispetto a un URL di servizio che restituirebbe i sinonimi della parola.
Utilizzerai l'API Datamuse per interrogare una parola chiave.
Crea un file chiamato word.service.ts dentro il src / app / parola cartella. Userai il @Injectable () decoratore per rendere disponibile la classe di servizio per l'iniezione.
Ecco come word.service.ts il file sarebbe:
import Injectable da '@ angular / core'; @Injectable () classe di esportazione WordService costruttore ()
Per effettuare una chiamata API, utilizzerai il comando HTTP modulo. Importa il HttpModule nel src / app / app.module.ts file. Ecco come appare il file:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; importare AppComponent da './app.component'; import CalcComponent da './calc/calc.component' import WordComponent da './word/word.component' import FormsModule da '@ angular / forms'; import HttpModule da '@ angular / http'; @NgModule (dichiarazioni: [AppComponent, CalcComponent, WordComponent], importa: [BrowserModule, FormsModule, HttpModule], provider: [], bootstrap: [AppComponent]) classe di esportazione AppModule
Importa il Http modulo all'interno del word.service.ts file per effettuare chiamate API.
importa Http da '@ angular / http';
Farai chiamate API al seguente URL.
https://api.datamuse.com/words?max=10&ml=
È necessario aggiungere la parola chiave della query insieme all'URL precedente per ottenere un massimo di 10 sinonimi del termine della query.
Definire la variabile url dentro il WordService class e inizializzarlo all'interno del metodo del costruttore.
export class WordService url: string constructor (private http: Http) this.url = 'https://api.datamuse.com/words?max=10&ml='
Hai dichiarato e inizializzato il http variabile, che userete durante le chiamate API.
Definire un metodo chiamato parola_da_cercare che restituirebbe il risultato della chiamata API come JSON. Ecco come appare:
search_word (term) return this.http.get (this.url + term) .map (res => return res.json ())
Come visto nel codice sopra, hai fatto un OTTENERE richiesta all'URL dell'API utilizzando Angular Http modulo e ha restituito la risposta come JSON. Ecco come word.service.ts aspetto del file:
import Injectable da '@ angular / core'; importa Http da '@ angular / http'; importare 'rxjs / add / operator / map' @Injectable () classe di esportazione WordService url: costruttore di stringhe (http: Http privato) this.url = 'https://api.datamuse.com/words?max=10&ml= ' search_word (term) return this.http.get (this.url + term) .map (res => return res.json ())
Ora che hai il servizio word pronto per effettuare le chiamate API, devi definire il WordService come il fornitore nel WordComponent.
Importa il WordService nel word.component.ts file.
import WordService da './word.service';
Definire il fornitori nell'angolare WordComponent.
@Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], provider: [WordService])
Inizializza il WordService dentro il costruttore metodo.
costruttore (servizio privato: WordService)
Definire un metodo chiamato ricerca dentro il word.component.ts file che chiamerebbe il metodo di servizio. Dentro il ricerca metodo, iscriviti al parola_da_cercare metodo dal WordService.
search (term) this.service.search_word (term) .subscribe (res => this.words = res;)
Ecco come è stato modificato word.component.ts aspetto del file:
importare Component da '@ angular / core'; import WordService da './word.service'; @Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], provider: [WordService]) classe di esportazione WordComponent words: any; costruttore (servizio privato: WordService) ricerca (termine) this.service.search_word (term) .subscribe (res => this.words = res;)
Aggiungi l'evento premi tasto invio all'elemento di input in word.component.html file.
Dopo aver inserito un termine di ricerca quando l'utente preme il tasto Invio, effettuerà una chiamata al metodo di ricerca in word.component.ts file.
Come visto in ricerca metodo all'interno del word.component.ts file, stai raccogliendo la risposta all'interno del file parole variabile come una lista. Quindi ripetiamo il parole elencare e visualizzare nel word.component.html file.
Modifica il word.component.html file come mostrato:
- Item.word
Salvare le modifiche precedenti e riavviare il server. Inserire una parola chiave e premere il tasto Invio, e si dovrebbe avere il risultato compilato come una lista.
In questo tutorial, hai appreso cosa sono i servizi angolari. Hai imparato come creare servizi angolari e usarli da un componente angolare. È stato creato un componente di Word che esegue una query sulla parola chiave immessa rispetto a un servizio Angolare e visualizza i dati restituiti nel file modello del componente.
Come è stata la tua esperienza di apprendimento dei servizi angolari? Fateci sapere i vostri pensieri e suggerimenti nella sezione commenti qui sotto.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Accentsconagua