Share
Angular 2 är en kraftfull och funktionell ram som du kan använda för att bygga de bästa webbapparna. Angular 2 bygger på TypeScript i åtanke, och utnyttjar futuristiska språkfunktioner som dekoratörer och gränssnitt, vilket gör kodning snabbare och enklare.
I den här videon från min kurs, Modern Web Apps With Angular 2, visar jag hur du använder Angular 2 för att bygga en tjänst som kommer att interagera med servern. Observera att i den här videon bygger vi på kod från tidigare i kursen och du kan hitta hela källkoden för kursen på GitHub.
I kursen hittills har vi byggt upp en projekthanteringsapplikation. Just nu, de projekt som vi visar till användaren är bara hårdkodade rätt in i vår projektdel. Det är dock inte en långsiktig lösning. Vi vill ha något sätt att få en lista över projekt från vår server. Så i den här videon ska vi skapa en projektjänst.
I Angular är en tjänst i princip en uppsättning funktioner som vi vill vara tillgängliga för flera komponenter. Det är bara ett enkelt sätt att paketera upp lite funktionalitet. Så inuti vår app katalog, låt oss skapa en projektservice. Och vi ringer det här projects.service.ts.
Nu är det naturligtvis inte en tjänst, så det är inte nödvändigt att importera komponentdekoratorn. Men det finns en annan dekoratör som vi behöver, och det är injicerbart. Så låt oss importera injicerbart från vinkel / kärna. Nu som jag sa, injicerbart är en dekoratör, och det tar inga egenskaper. Så vi ringer bara injicerbart, och exportera sedan vår klass. Vi ringer till klassen ProjectsService.
injicerbart gör denna klass något som Angular kan använda som beroendeinsprutning. Som vi ser lite senare använder vi beroendet för injektion för att få en förekomst av denna projekttjänst inom en komponent som använder projektets service. En vinkelkön använder sig av beredskapsinjektion på så sätt att det enkelt kan injicera mocka tjänster och sådant om du vill testa dina komponenter.
Så låt oss gå vidare och lägga till några metoder till vår ProjectsService här. Först och främst ska vi behöva http modul som Angular har. Detta gör att vi kan göra förfrågningar direkt till servern. Så låt oss importera http, och vi kommer också att importera svarklassen som vi behöver för någon typkontroll. Och båda kommer från @ Vinkel / http.
Nu ska vi också importera http modulen i vår appmodulfil. Så, låt oss gå vidare och göra det innan vi glömmer. I våra inbyggda moduler överst kommer jag att importera Httpmodule, och sedan ner i vår import, låt oss inkludera Httpmodule.
Nu när vi har importerat det på båda de nödvändiga platserna, kan vi använda beroendet för injektion för att injicera detta http klass i vår ProjectsService. Så istället för att göra något liknande ny Http () här ska vi göra en konstruktörsfunktion. Och den här konstruktören kommer att ta en egenskap av typen http.
Vinkeln kommer att se denna parameter när den skapar vår ProjectsService exempel, och det kommer att matcha detta http klass till Httpmodule som vi importerade till vår app modul, och det kommer att injicera en förekomst av det till konstruktören.
Nu kan vi skriva this.http = http;att tilldela denna parameter till en egenskap i vår klass. Men TypeScript har faktiskt viss genvägssyntax för det, så vi kan bara tillämpa sökordet privat direkt inuti konstruktören, och TypeScript gör det automatiskt till en klassegenskap. Och nu från klassens andra metoder kan vi använda this.http.
Så låt oss skapa en funktion som heter getProjects (). Detta kommer att vara den metod som vi kallar för att få vår lista över projekt.
Nu med funktioner i TypeScript kan vi fortfarande använda : Typ syntax för att ange typen av returvärdet för funktionen. Och för getProjects () vi kommer att återvända en Märkbar som omsluter Projekt.
Så innan vi pratar om vad det är, låt oss importera de två klasserna. Så jag ska importera Märkbar från rxjs, och låt oss också importera vår Projekt modell.
Så vad är en observerbar? Tyvärr kan jag inte ge dig en fullständig introduktion till observerbarheter här, men Angular 2 beror ganska på observerbarhet, och jag kommer att försöka göra dem så enkla som möjligt när vi går igenom det här.
I grund och botten är en observerbar en omslag liknande ett löfte eller en matris. Både löften, arrays och observables har andra föremål inuti dem. I fallet med en array har vi flera objekt. När det gäller ett löfte har vi i grunden ett visst värde som vi kommer att få någon gång i framtiden.
Med observerbarhet kan det vara ett värde eller det kan vara många värden. En definition som ibland används är en asynkron array. I grund och botten är en observerbar en ström av data som vi kan få mer av när som helst. Och jag tror att du under några lektioner kommer att se hur vi kan använda observabla för att få och ställa in några av våra data ganska lättare. För nu, om du inte har sett observerbarhet innan, kan du bara tänka på dem som en typ av löfte.
Så vad kommer vi att återvända från den här funktionen? Tja, vi kan göra det this.http.get (), så låt oss få / api / projekt som kommer att returnera vår lista över projekt. Och vad vi kan göra är att karta svaret på en funktion som vi ska skriva kallad this.extractData.
Du kan tänka på Karta() funktionen här som sedan() metod på ett löfte. Det fungerar precis som på en matris där Karta() kommer att utföra en viss operation på var och en av värdena i den uppsättningen och sedan returnera en ny array med de nya värdena.
Så i princip, Karta() låter dig utföra någon form av åtgärder på värdena i en behållare. Och samma sak är sant med sedan() metod i ett löfte. Du kan ringa sedan() på ett löfte att ringa någon funktion på värdet inuti ett löfte. Och då återkommer ett nytt löfte med vilket nytt värde du skapade ...
Det är samma sak med Karta() här. Vi ska ringa extractData () på svaret som är inuti detta observerbara, och vad vi kommer att återkomma från detta är en observerbar som omslår ett projekt.
Så låt oss skapa en extractData () funktionen, och det här kommer att ta ett Angular HTTP-bibliotek Svar klass.
Så vi kommer tillbaka res.json (), och detta kommer att konvertera HTTP-svaret till den faktiska JSON-kroppen. Nu värdet från extractData () kommer att returneras inuti vårt getProjects () ring och Angular ser att detta matchar vår returtyp här, eftersom det kommer att bli en observerbar mängd projekt.
Nu när vi har det här getProjects () funktion, låt oss gå över till vår projektdel och importera den. Först och främst, låt oss importera ProjectsService.
Nu eftersom vi vill injicera en ProjectsService instans i denna komponent, måste vi berätta Angular att det borde ge en förekomst för denna komponent. Så låt oss lägga till en leverantörer egendom till vår komponent decorator, och vi ska berätta att det kommer att behöva det ProjectsService inuti denna komponent. Så låt oss lägga till en konstruktör, och vi kan använda beroendeinsprutning på samma sätt som vi gjorde i vår tjänst.
Vi kommer att skapa en parameter som heter service, och det här blir en ProjectsService objekt, och så kommer Angular att injicera en av våra ProjectsService instanser i denna klass. Vi kommer att ge den här parametern den privat sökord här så att det anger det omedelbart som en egendom.
Med detta på plats kan vi gå vidare och använda det inuti ngOnInit. Så här kan vi ringa this.service.getProjects ()-kom ihåg att detta returnerar en observerbar-och den metod som vi vill ringa här prenumerera().
Du kan tänka på prenumerera() metod som om vi ringer sedan() på ett löfte som återlämnades, eller om du tänker på detta som en matris, prenumerera() är som för varje() metod på en array. Det är typiskt Karta() genom att det tar emot vad som helst som är inuti matrisen, eller i detta fall det observerbara.
dock, för varje() returnerar inte en ny array, och prenumerera() returnerar inte en ny observerbar. Så det är typiskt som slutet av linjen. Så prenumerera() kommer att få vår projektlista som parameter, och vi kan bara säga this.projects, som hänvisar till vår mängd projekt, kommer att vara lika projekt. På så sätt kan vi nollställa dess värde från det observerbara och värdet kommer nu att finnas tillgängligt från klassen.
Och om vi går tillbaka till webbläsaren för att se vår lista över projekt ser vi de tre projekt som jag lägger på servern.
I hela kursen, Modern Web Apps With Angular 2, visar jag dig hur du kodar en komplett webbapp med Angular 2, med de senaste funktionerna och arkitektoniska mönster.
Du kan följa med mig och bygga en komplett projekthanteringsapp, med användarinloggning och validering och chatt i realtid. Du får lektioner på Angular 2-malsspråket, strukturerar din app, routing, formulärvalidering, tjänster, observables och mer.
Om du aldrig har använt Angular 2 lär du allt du behöver veta i vår kurs. Börja med Angular 2. Om du vill bygga på din Angular 2-upplevelse, varför inte kolla in:
Accentsconagua