Share
Angular 2 er et kraftig og funksjonelt komplett rammeverk som du kan bruke til å bygge de beste webappene. Angular 2 bygger på TypeScript, og tar fordel av futuristiske språkfunksjoner som dekoratorer og grensesnitt, noe som gjør kodingen raskere og enklere.
I denne videoen fra kurset mitt, Moderne Web Apps With Angular 2, viser jeg deg hvordan du bruker Angular 2 til å bygge en tjeneste som vil samhandle med serveren. Merk at i denne videoen bygger vi på kode fra tidligere i kurset, og du kan finne full kildekode for kurset på GitHub.
I kurset så langt har vi bygd et prosjektledelsesprogram. Akkurat nå, prosjektene vi viser til brukeren, er bare hardkodede rett inn i vår prosjektkomponent. Det er imidlertid ikke en langsiktig løsning. Vi vil ha en måte å få en liste over prosjekter fra vår server. Så i denne videoen skal vi lage en prosjekttjeneste.
I Angular er en tjeneste i utgangspunktet et hvilket som helst sett av funksjonalitet som vi vil være tilgjengelig for flere komponenter. Det er bare en enkel måte å pakke opp noen funksjonalitet. Så inne i app-katalogen, la oss opprette en prosjekttjeneste. Og vi ringer dette projects.service.ts.
Nå er selvfølgelig en tjeneste ikke en komponent, så det er ikke nødvendig å importere komponentdekoratoren. Men det er en annen dekoratør som vi trenger, og det er injiserbare. Så la oss importere injiserbare fra vinkel / kjerne. Nå som jeg sa, injiserbare er en dekoratør, og det tar ingen egenskaper. Så vi ringer bare injiserbare, og deretter eksportere vår klasse. Vi ringer klassen ProjectsService.
injiserbare gjør denne klassen noe som Angular kan bruke som avhengighetsinjeksjon. Som vi ser litt senere, bruker vi avhengighetsinjeksjon for å få en forekomst av denne prosjekttjenesten innen en komponent som bruker prosjektets tjeneste. En kantkøen bruker avhengighetsinjeksjon på denne måten, slik at den enkelt kan injisere mock-tjenester og ting som om du vil teste komponentene dine.
Så la oss gå videre og legge til noen metoder for våre ProjectsService her. Først av alt skal vi trenge http modul som Angular har. Dette vil tillate oss å stille forespørsler direkte til serveren. Så la oss importere http, og vi vil også importere responsklassen som vi trenger for noen type kontroll. Og begge disse kommer fra @ Vinkel / http.
Nå skal vi også importere http modul i vår app modul fil. Så, la oss gå videre og gjøre det før vi glemmer. I våre innfødte moduler øverst vil jeg importere HttpModule, og deretter ned i vår import, la oss inkludere HttpModule.
Nå som vi har importert det på begge de nødvendige stedene, kan vi bruke avhengighetsinjeksjon for å injisere dette http klasse inn i vår ProjectsService. Så i stedet for å gjøre noe sånt ny Http () her skal vi lage en konstruktørfunksjon. Og denne konstruktøren vil ta en eiendom av typen http.
Vinkel vil se denne parameteren når den skaper vår ProjectsService eksempel, og det vil matche dette http klasse til HttpModule som vi importerte inn i vår app modul, og det vil injisere en forekomst av det i konstruktøren.
Nå kan vi skrive this.http = http;å tilordne denne parameteren til en eiendom i vår klasse. Men TypeScript har faktisk noen snarveis syntaks for det, så vi kan bare søke på søkeordet privat direkte inne i konstruktøren, og TypeScript vil automatisk gjøre det til en klasseegenskap. Og nå fra de andre metodene i klassen, kan vi bruke this.http.
Så la oss lage en funksjon som heter getProjects (). Dette kommer til å være den metoden vi kaller for å få vår liste over prosjekter.
Nå med funksjoner i TypeScript, kan vi fortsatt bruke : Type syntaks for å spesifisere typen av returverdi for funksjonen. Og for getProjects () vi kommer til å returnere en observer det brytes Prosjekt.
Så før vi snakker om hva det er, la oss importere de to klassene. Så jeg skal importere observer fra rxjs, og la oss også importere vår Prosjekt modell.
Så hva er en observerbar? Dessverre er det ingen måte jeg kunne gi deg en fullstendig introduksjon til observables her, men Angular 2 er avhengig av observables, og jeg vil prøve å gjøre dem så enkle som mulig når vi går gjennom dette.
I utgangspunktet er en observerbar en wrapper som ligner på et løfte eller en matrise. Både løfter, arrays og observables har andre elementer inne i dem. I tilfelle av en matrise har vi flere elementer. I tilfelle et løfte har vi i utgangspunktet en viss verdivurdering som vi kommer til å komme til en gang i fremtiden.
Med observables kan det være en verdi, eller det kan være mange verdier. En definisjon som noen ganger brukes, er en asynkron rekkefølge. I utgangspunktet er en observerbar en datastrøm som vi kan få mer av når som helst. Og jeg tror du vil se i løpet av noen leksjoner her hvordan vi kan bruke observerbare data for å gjøre det enklere å få og sette inn noen av våre data. For nå, hvis du ikke har sett observerbare ting før, kan du bare tenke på dem som en slags løfte.
Så hva skal vi komme tilbake fra denne funksjonen? Vel, det kan vi gjøre this.http.get (), så la oss få det / api / prosjekter som vil returnere vår liste over prosjekter. Og så hva vi kan gjøre er å kartlegge svaret på en funksjon som vi skal skrive kalt this.extractData.
Du kan tenke på kart() Fungerer her som deretter() metode på et løfte. Det fungerer akkurat som på en matrise hvor kart() vil utføre en operasjon på hver enkelt av verdiene i det arrayet og deretter returnere et nytt utvalg med de nye verdiene.
Så i utgangspunktet, kart() lar deg utføre en slags handling på verdiene i en beholder. Og det samme er sant med deretter() metode i et løfte. Du kan ringe deretter() på et løfte om å ringe noen funksjon på verdien inne i et løfte. Og så returnerer det et nytt løfte med hvilken ny verdi du opprettet ...
Det er det samme med kart() her. Vi skal ringe extractData () på svaret som er inne i dette observerbare, og hva vi kommer tilbake fra dette er en observerbar som bryter et prosjekt.
Så la oss lage en extractData () funksjon, og dette skal ta et Angular HTTP-bibliotek Respons klasse.
Så vi kommer tilbake res.json (), og dette vil konvertere HTTP-responsen til selve JSON-kroppen. Nå verdien fra extractData () vil bli returnert innsiden av vår getProjects () ring, og Angular vil se at dette samsvarer med vår returtype her fordi det vil være et observerbart utvalg av prosjekter.
Nå som vi har dette getProjects () funksjon, la oss gå over til vår prosjektdel og importere den. Først av alt, la oss importere ProjectsService.
Nå fordi vi vil injisere en ProjectsService forekommer i denne komponenten, må vi fortelle Angular at den skal gi en forekomst for denne komponenten. Så la oss legge til en tilbydere eiendom til vår komponentdekorator, og vi forteller at det kommer til å trenge det ProjectsService inne i denne komponenten. Så la oss legge til en konstruktør, og vi kan bruke avhengighetsinjeksjon på samme måte som vi gjorde i vår tjeneste.
Vi vil opprette en parameter som heter service, og dette kommer til å bli en ProjectsService objekt, og så vil Angular vite å injisere en av våre ProjectsService forekommer i denne klassen. Vi gir denne parameteren den privat søkeord her slik at det setter det umiddelbart som en eiendom.
Med dette på plass, kan vi gå videre og bruke det inni ngOnInit. Så her kan vi ringe this.service.getProjects ()-husk at dette returnerer en observerbar-og metoden som vi vil ringe her abonnere().
Du kan tenke på abonnere() Metode som om vi ringer deretter() på et løfte som ble returnert, eller om du tenker på dette som en matrise, abonnere() er som for hver() metode på en matrise. Det er liksom kart() ved at den mottar det som er innsiden av matrisen, eller i dette tilfellet det observerbare.
derimot, for hver() returnerer ikke et nytt utvalg, og abonnere() returnerer ikke en ny observerbar. Så det er liksom som slutten av linjen. Så abonnere() kommer til å få vår prosjektliste som parameter, og vi kan bare si this.projects, som refererer til vårt utvalg av prosjekter, vil være lik prosjekter. På den måten kan vi pakke ut verdien fra det observerbare og verdien vil nå være tilgjengelig fra klassen.
Og hvis vi går tilbake til nettleseren for å se vår liste over prosjekter, ser vi de tre prosjektene jeg legger på serveren.
I hele kurset, Moderne Web Apps With Angular 2, vil jeg vise deg hvordan du kodes en komplett webapp med Angular 2, ved hjelp av de nyeste funksjonene og arkitektoniske mønstrene.
Du kan følge med meg og bygge en fullverdig prosjektledelsesapp, med brukerinnlogging og validering og sanntidschatt. Du vil få leksjoner på Angular 2-malingsspråket, strukturere appen din, ruting, form validering, tjenester, observables og mer.
Hvis du aldri har brukt Angular 2, lær alt du trenger å vite i løpet av kurset. Kom i gang med kant 2. Hvis du vil bygge på Angular 2-opplevelsen, hvorfor ikke sjekke ut:
Accentsconagua