Ghidul începătorului pentru serviciile Angular 4 Services

În prima parte a ghidului începătorului pentru seria de tutoriale angulare, ați aflat ce componente sunt în Angular 4 și cum să scrieți componente angulare. 

În această parte a seriei tutorial, veți afla ce servicii sunt în Angular și cum să le utilizați.

Noțiuni de bază

Veți începe prin clonarea codului sursă din prima parte a seriei tutorial.

git clone https://github.com/royagasthyan/AngularComponent.git

Odată ce aveți codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularComponent npm instalare

După instalarea dependențelor, porniți aplicația tastând următoarea comandă:

ng servi

Ar trebui să aveți aplicația care rulează pe http: // localhost: 4200 /.

Care sunt serviciile unghiulare?

Într-o aplicație Angular, componentele se ocupă de prezentarea datelor în vizualizare. Preluarea datelor pentru afișarea componentelor este efectuată de serviciile unghiulare.

Deoarece porțiunea de preluare a datelor este tratată separat în serviciile Angulare, este mai ușor să falsăm serviciile de testare.

De ce servicii unghiulare?

Din documentația oficială:

Componentele nu ar trebui să aducă sau să salveze date direct și cu siguranță nu ar trebui să prezinte cu bună știință date false. Acestea ar trebui să se concentreze pe prezentarea datelor și să delege accesul la date la un serviciu.

În acest tutorial, veți vedea cum să creați un serviciu Angular pentru preluarea datelor pentru o componentă Angular. 

Un alt avantaj al utilizării serviciilor Angulare este că facilitează partajarea datelor între două componente separate. 

Crearea unei componente Word

În acest tutorial, veți crea o componentă de cuvânt care ar căuta cuvântul interogat introdus de utilizatorul final în raport cu un API și va returna rezultatul căutării.

Veți efectua apelul API utilizând un serviciu Angular. Deci, să începem prin crearea unei componente angulare.

Navigați la directorul de proiect și creați un dosar numit cuvânt. 

În interiorul cuvânt directorul de proiect, creați un fișier numit word.component.html. Adăugați următorul cod HTML:

 Componenta Word 
 
  

Creați un fișier numit word.component.ts care ar controla word.component.html șablon. Iată cum arată:

import Component de la '@ angular / core'; @Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css']) clasa de export WordComponent constructor ()  

După cum se vede în codul de mai sus, tocmai ați creat WordComponent clasa care ar controla word.component.html șablon.

Are o @component decorator unde ați definit selector prin care ar fi accesibil, templateUrl, și componenta styleUrls.

Odată ce ați creat componenta, trebuie să adăugați clasa componentă la NgModule.

Deschide app.module.ts fișier în interiorul src / app și importați noul WordComponent.

import WordComponent din "./word/word.component"

Includeți WordComponent în interiorul NgModule declarații. Iată cum app.module.ts file looks:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CalcComponent din './calc/calc.component' import WordComponent din './word/word.component' import FormsModule din '@ unghiular / formulare'; @NgModule (declarații: [AppComponent, CalcComponent, WordComponent], import: [BrowserModule, FormsModule], furnizori: [], bootstrap: [AppComponent]) clasa de export AppModule  

Deschide app.component.html fișier în interiorul src / app și adăugați noul WordComponent utilizând selectorul definit. Iată cum arată:

Salvați modificările de mai sus și reporniți serverul. Ar trebui să aveți afișat componenta cuvântului când încărcați aplicația.

Crearea serviciului Word

Să creăm un serviciu Angular pentru a interoga cuvântul împotriva unei adrese URL a serviciului care ar putea returna sinonimele cuvântului.

Veți utiliza API-ul Datamuse pentru interogarea unui cuvânt cheie.

Creați un fișier numit word.service.ts în interiorul src / app / cuvânt pliant. Veți utiliza @Injectable () decorator pentru a face clasa de servicii disponibilă pentru injectare.

Iată cum word.service.ts fișier ar arata:

import Injectable de la '@ angular / core'; @Injectable () clasa de export WordService constructor () 

Pentru a efectua un apel API, veți utiliza HTTP modul. Importați HttpModule în src / app / app.module.ts fişier. Iată cum arată fișierul:

import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CalcComponent din './calc/calc.component' import WordComponent din './word/word.component' import FormsModule din '@ unghiular / formulare'; import HttpModule de la '@ angular / http'; @NgModule (declarații: [AppComponent, CalcComponent, WordComponent], import: [BrowserModule, FormsModule, HttpModule], furnizori: [], bootstrap: [AppComponent]) 

Importați http modul în interiorul word.service.ts fișier pentru a efectua apeluri API. 

import Http de la '@ angular / http';

Veți efectua apeluri API la următoarea adresă URL.

https://api.datamuse.com/words?max=10&ml=

Trebuie să adăugați cuvântul cheie de interogare împreună cu adresa URL de mai sus pentru a obține maximum 10 sinonime ale termenului de interogare.

Definiți variabila URL-ul în interiorul WordService clasați și inițializați-o în interiorul metodei constructorului.

clasa de export WordService url: string constructor (privat http: Http) this.url = 'https://api.datamuse.com/words?max=10&ml='

Ați declarat și inițializat http variabilă, pe care o veți utiliza în timp ce efectuați apeluri API.

Definiți o metodă numită search_word care va returna rezultatul apelului API ca fiind JSON. Iată cum arată:

search_word (termen) return this.http.get (acest.url + termen) .map (res => return res.json ())

După cum se vede în codul de mai sus, ați făcut o OBȚINE solicitați adresei URL API utilizând funcția Angular http modulul și a returnat răspunsul ca fiind JSON. Iată cum word.service.ts file looks:

import Injectable de la '@ angular / core'; import Http de la '@ angular / http'; import "rxjs / add / operator / map" @Injectable () clasa de export WordService url: string constructor (private http: Http) this.url = 'https://api.datamuse.com/words?max=10&ml= ' search_word (termen) return this.http.get (acest.url + termen) .map (res => return res.json ())

Căutarea cuvântului

Acum, când aveți serviciul de cuvinte gata de a efectua apelurile API, trebuie să definiți WordService ca furnizor în WordComponent.

Importați WordService în word.component.ts fişier.

import WordService de la "./word.service";

Definiți furnizorii de în unghiul WordComponent.

@Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], furnizori: [WordService])

Inițializați WordService în interiorul constructor metodă.

constructor (serviciu privat: WordService) 

Definiți o metodă numită căutare în interiorul word.component.ts fișier care ar numi metoda de serviciu. În interiorul căutare metoda, abonați la search_word metoda de la WordService.

căutare (termen) this.service.search_word (termen) .subscribe (res => this.words = res;

Iată cum a fost modificat word.component.ts file looks:

import Component de la '@ angular / core'; import WordService de la "./word.service"; @Component (selector: 'word', templateUrl: 'word.component.html', styleUrls: ['word.component.css'], furnizori: [WordService]) clasa de export WordComponent words: any; constructor (serviciu privat: WordService)  căutare (termen) this.service.search_word (termen) .subscribe (res => this.words = res;) 

Adăugați evenimentul de apăsați tasta enter la elementul de intrare din word.component.html fişier.

După ce introduceți un termen de interogare atunci când utilizatorul apasă tasta enter, va efectua un apel la metoda de căutare în word.component.ts fişier.

După cum se vede în căutare în interiorul metodei word.component.ts fișier, colectați răspunsul în interiorul cuvinte variabilă ca listă. Deci, sa iteram cuvinte afișați și afișați în word.component.html fişier. 

Modificați word.component.html fișier după cum se arată:

 
 
 Item.word 
 
 

Salvați modificările de mai sus și reporniți serverul. Introduceți un cuvânt cheie și apăsați tasta enter și ar trebui să obțineți rezultatul populate ca listă.

Înfășurați-o

În acest tutorial, ați aflat care sunt serviciile Angulare. Ați învățat cum să creați servicii unghiulare și să le utilizați dintr-o componentă unghiulară. Ați creat o componentă Word care întreabă cuvântul cheie introdus împotriva unui serviciu Angular și afișează datele returnate în fișierul șablon component.

Cum a fost experiența dvs. de învățare a serviciilor unghiulare? Dați-ne cunoștințele și sugestiile în secțiunea de comentarii de mai jos.

Codul sursă din acest tutorial este disponibil pe GitHub.