Share
Angular 2 este un cadru puternic și complet, pe care îl puteți utiliza pentru a construi cele mai bune aplicații web. Construit cu tipul TypeScript, Angular 2 profită de caracteristicile limbajului futurist, cum ar fi decoratorii și interfețele, care fac codarea mai rapidă și mai ușoară.
În acest videoclip de la cursul meu, Aplicații Web moderne cu Angular 2, vă voi arăta cum să utilizați Angular 2 pentru a construi un serviciu care va interacționa cu serverul. Rețineți că în acest videoclip se construiește un cod de la începutul cursului și puteți găsi codul sursă complet pentru cursul de pe GitHub.
În cursul cursului, am construit o aplicație de management de proiect. În momentul de față, proiectele pe care le afișăm utilizatorilor sunt doar codate greu chiar în componenta proiectelor noastre. Cu toate acestea, aceasta nu este o soluție pe termen lung. Vrem să avem o modalitate de a obține o listă de proiecte de pe serverul nostru. Deci, în acest videoclip, vom crea un serviciu de proiect.
În Angular, un serviciu este în esență orice set de funcționalități pe care vrem să fie disponibile pentru mai multe componente. Este doar o modalitate ușoară de a încheia unele funcționalități. Deci, în interiorul directorului nostru de aplicații, să creăm un serviciu de proiecte. Și vom numi asta projects.service.ts.
Desigur, un serviciu nu este o componentă, deci nu este nevoie să importați decoratorul de componente. Dar există un alt decorator de care avem nevoie, și asta este injectabil. Deci, să importăm injectabil din unghiular / core. Acum, așa cum am spus, injectabil este un decorator și nu are proprietăți. Așa că vom suna injectabil, și apoi exportați clasa noastră. O să sunăm la clasă ProjectsService.
injectabil face ca această clasă să fie ceva ce Angular poate folosi ca injecție de dependență. După cum vom vedea mai târziu, vom folosi injecția de dependență pentru a obține o instanță a acestui serviciu de proiect într-o componentă care utilizează serviciul proiectului. O coadă unghiulară utilizează injecția de dependență în acest fel, astfel încât să poată injecta cu ușurință servicii false și lucruri de genul asta dacă doriți să testați componentele.
Asa ca sa mergem mai departe si sa adaugam cateva metode pentru a noastra ProjectsService aici. Mai întâi de toate, vom avea nevoie de ea http modulul pe care îl are Angular. Acest lucru ne va permite să facem cereri direct la server. Deci, să importăm http, și vom importa și clasa de răspuns pe care o vom avea nevoie pentru o anumită verificare de tip. Și amândoi vin de la @ Unghiular / http.
Acum, ar trebui să importăm și http modul în fișierul nostru de module de aplicație. Deci, hai să mergem înainte și să facem asta înainte să uităm. În modulele noastre native din partea de sus, voi importa HttpModule, și apoi în jos în importurile noastre, să includeți HttpModule.
Acum că am importat acest lucru în ambele locuri necesare, putem folosi injectarea de dependență pentru a injecta acest lucru http clasa în nostru ProjectsService. Deci, în loc de a face ceva de genul noul Http () aici, ceea ce vom face este crearea unei funcții constructor. Și acest constructor va lua o proprietate de tip http.
Angular va vedea acest parametru atunci când ne creează ProjectsService exemplu, și se va potrivi cu aceasta http clasa la HttpModule pe care le-am importat în modulul nostru de aplicație, și va injecta o instanță a acestuia în constructor.
Acum, am putea scrie this.http = http;pentru a atribui acest parametru unei proprietăți a clasei noastre. Dar, de fapt, TypeScript are o sintaxă de scurtătură pentru asta, așa că putem aplica cuvântul cheie privat direct în interiorul constructorului, iar TypeScript va face automat proprietatea clasei. Și acum, din celelalte metode ale clasei, putem folosi this.http.
Deci, să creăm o funcție numită getProjects (). Aceasta va fi metoda pe care o numim pentru a obține lista noastră de proiecte.
Acum, cu funcții în TypeScript, putem folosi în continuare : Tip sintaxă pentru a specifica tipul valorii returnate a funcției. Si pentru getProjects () vom reveni Observabil care împachetează Proiect.
Așa că înainte de a vorbi despre ce înseamnă asta, să importăm cele două clase. Așa că am de gând să importe Observabil din rxjs, și să importăm și noi Proiect model.
Deci, ce este observabil? Din păcate, nu am cum să vă dau o introducere completă a observabilelor aici, dar Angular 2 depinde destul de puțin de observabile și voi încerca să le fac cât mai simplu posibil pe măsură ce trecem prin acest.
Practic, un observabil este un wrapper similar unei promisiuni sau unei matrice. Ambele promisiuni, matrice și observabile au și alte elemente din ele. În cazul unei matrice, avem mai multe elemente. În cazul unei promisiuni, avem de fapt o singură valoare pe care o vom obține la un moment dat în viitor.
Cu observabile, ar putea fi o valoare sau ar putea fi multe valori. O definiție care este folosită uneori este o matrice asincronă. Practic, un observabil este un flux de date pe care putem obține mai mult de oricând. Și cred că veți vedea în cursul unor lecții aici cum putem folosi observabilele pentru a face obtinerea și stabilirea unor date destul de ușor. Deocamdată, dacă nu ați mai văzut observații înainte, puteți să vă gândiți la ele ca la un fel de promisiune.
Deci, ce vom reveni din această funcție? Putem face this.http.get (), așa că hai să ajungem / api / proiecte care va returna lista noastră de proiecte. Apoi, ceea ce putem face este să mapa răspunsul la o funcție pe care o vom scrie numită this.extractData.
Vă puteți gândi la Hartă() funcționează aici ca atunci() metoda pe o promisiune. Lucrările sunt la fel ca pe o matrice unde Hartă() va efectua o operație asupra fiecăreia dintre valorile din matricea respectivă și apoi va întoarce o matrice nouă cu acele valori noi.
Deci, practic, Hartă() vă permite să efectuați un fel de acțiune asupra valorilor din interiorul unui container. Și același lucru este adevărat cu atunci() metoda într-o promisiune. Poti suna atunci() pe o promisiune de a numi o funcție în ceea ce privește valoarea din interiorul unei promisiuni. Și atunci asta întoarce o nouă promisiune cu orice valoare nouă creată ...
E același lucru cu Hartă() aici. Vom suna extractData () cu privire la răspunsul care se află în interiorul acestei observabile și ceea ce vom reveni din aceasta este o observabilă care împrăștie un proiect.
Deci, să creăm un extractData () funcția, și aceasta va lua o bibliotecă HTTP Angular Raspuns clasă.
Așa că ne vom întoarce res.json (), iar acest lucru va transforma răspunsul HTTP în corpul actual JSON. Acum, valoarea de la extractData () vor fi returnate în interiorul nostru getProjects () apel și Angular vom vedea că acest lucru se potrivește tipului de returnare aici pentru că va fi o serie de proiecte care pot fi observate.
Acum că avem asta getProjects () funcția, să ne îndreptăm spre componenta proiectelor noastre și să le importăm. Mai întâi de toate, hai să importăm ProjectsService.
Acum, pentru că vrem să injectăm a ProjectsService instanță în această componentă, trebuie să-i spunem lui Angular că ar trebui să ofere o instanță pentru această componentă. Deci, să adăugăm a furnizorii de proprietatea pentru decoratorul nostru de componente și îi vom spune că va avea nevoie de asta ProjectsService în interiorul acestei componente. Deci, să adăugăm un constructor și putem folosi injecția de dependență în același mod pe care l-am făcut în serviciul nostru.
Vom crea un parametru numit serviciu, și asta va fi a ProjectsService obiect, așa că Angular va ști să-l injecteze pe unul dintre noi ProjectsService în această clasă. Vom da acest parametru ca fiind privat cuvântul cheie aici, astfel încât să se stabilească imediat ca proprietate.
Cu acest lucru, putem să mergem înainte și să îl folosim înăuntru ngOnInit. Deci, aici putem apela this.service.getProjects ()-amintiți-vă că aceasta returnează o observabilă - și metoda pe care dorim să o numim aici Abonati-va().
Vă puteți gândi la Abonati-va() ca și cum am fi sunat atunci() pe o promisiune care a fost returnată sau dacă te gândești la asta ca pe o matrice, Abonati-va() este ca pentru fiecare() metoda pe o matrice. Este un fel de genul Hartă() prin faptul că primește ceea ce este în interiorul matricei sau, în acest caz, observabil.
in orice caz, pentru fiecare() nu returnează o nouă matrice și Abonati-va() nu returnează un nou observabil. Deci este cam ca la sfârșitul liniei. Asa de Abonati-va() va primi lista noastră de proiecte ca parametru și putem spune this.projects, care se referă la gama noastră de proiecte, va fi egală proiecte. În acest fel, putem să ne desfacem valoarea din observabil și valoarea va fi acum disponibilă din cadrul clasei.
Și dacă ne întoarcem la browser pentru a vedea lista noastră de proiecte, vom vedea cele trei proiecte pe care le-am pus pe server.
În cursul complet, Aplicații Web moderne cu Angular 2, vă voi arăta cum să codificați o aplicație web completă cu Angular 2, folosind cele mai recente caracteristici și modele arhitecturale.
Puteți să urmați alături de mine și să construiți o aplicație de management de proiect cu funcții complete, cu autentificare și validare a utilizatorilor și chat în timp real. Veți primi lecții pe limbajul șablonului Angular 2, structurându-vă aplicația, rutarea, validarea formularului, serviciile, observabilele și multe altele.
Dacă nu ați folosit niciodată Angular 2, aflați tot ceea ce trebuie să știți în cursul nostru Începeți cu Angular 2. Dacă doriți să vă bazați pe experiența dvs. Angular 2, de ce nu verificați:
Accentsconagua