Share
Angular 2 is een krachtig en feature-compleet framework dat u kunt gebruiken om de beste web-apps te bouwen. Angular 2 is gebouwd met TypeScript in gedachten en maakt gebruik van futuristische taalfuncties, zoals decorateurs en interfaces, die het coderen sneller en eenvoudiger maken.
In deze video van mijn cursus, Modern Web Apps met Angular 2, laat ik zien hoe je Angular 2 kunt gebruiken om een service te bouwen die interactie met de server zal hebben. Merk op dat we in deze video bouwen op code van eerder in de cursus, en je kunt de volledige broncode voor de cursus vinden op GitHub.
In de cursus tot nu toe hebben we een projectbeheerapplicatie gebouwd. Op dit moment zijn de projecten die we aan de gebruiker tonen gewoon hard gecodeerd in onze projectcomponent. Dat is echter geen langetermijnoplossing. We willen een manier hebben om een lijst met projecten van onze server te krijgen. Dus in deze video gaan we een projectservice maken.
In Angular is een service eigenlijk elke set functionaliteit die we beschikbaar willen hebben voor meerdere componenten. Het is gewoon een gemakkelijke manier om een aantal functies af te ronden. Dus laten we binnen onze app-directory een projectservice maken. En we zullen dit noemen projects.service.ts.
Nu is een service natuurlijk geen onderdeel, dus het is niet nodig om de componentendecoder te importeren. Maar er is nog een decorateur die we nodig hebben, en dat is injecteerbare. Dus laten we importeren injecteerbare van hoekig / kern. Nu zoals ik al zei, injecteerbare is een binnenhuisarchitect en heeft geen enkele eigenschap nodig. Dus we bellen gewoon injecteerbare, en exporteer onze klas. We zullen de klas bellen ProjectsService.
injecteerbare maakt deze klasse iets dat Angular kan gebruiken als afhankelijkheidsinjectie. Zoals we verderop zullen zien, gebruiken we afhankelijkheidsinjectie om een exemplaar van deze projectservice binnen een component te krijgen die de service van het project gebruikt. Een hoekige wachtrij maakt op deze manier afhankelijkheidsinjectie, zodat het eenvoudig nepservices en dergelijke dingen kan injecteren als u uw componenten wilt testen.
Dus laten we doorgaan en een aantal methoden toevoegen aan onze ProjectsService hier. Eerst en vooral hebben we de http module die Angular heeft. Hierdoor kunnen we verzoeken rechtstreeks bij de server indienen. Dus laten we importeren http, en we zullen ook de antwoordklasse importeren die we nodig zullen hebben voor sommige typecontroles. En beide komen uit @ Hoekige / http.
Nu zouden we ook het http module in ons app-modulesbestand. Dus laten we doorgaan en dat doen voordat we het vergeten. In onze native modules bovenaan, zal ik het importeren HttpModule, en dan naar beneden in onze invoer, laten we de HttpModule.
Nu we dat op beide plaatsen hebben geïmporteerd, kunnen we afhankelijkheidsinjectie gebruiken om dit te injecteren http les in onze ProjectsService. Dus in plaats van zoiets te doen nieuwe Http () Hierin zullen we een constructorfunctie creëren. En deze constructeur neemt een eigendom van het type http.
Angular ziet deze parameter wanneer deze onze maakt ProjectsService bijvoorbeeld, en het zal dit evenaren http klasse voor de HttpModule die we hebben geïmporteerd in onze app-module en een exemplaar daarvan in de constructor injecteert.
Nu kunnen we schrijven this.http = http;om deze parameter toe te wijzen aan een eigenschap van onze klasse. Maar TypeScript heeft daar eigenlijk een shortcut-syntax voor, dus we kunnen het trefwoord gewoon toepassen privaat rechtstreeks in de constructor en TypeScript maakt er automatisch een klasseneigenschap van. En nu kunnen we binnen de andere methoden van de klas gebruiken this.http.
Dus laten we een functie maken genaamd getProjects (). Dit wordt de methode die we bellen om onze lijst met projecten te krijgen.
Nu met functies in TypeScript kunnen we nog steeds het : Type syntaxis om het type retourwaarde van de functie op te geven. En voor getProjects () we gaan terug een waarneembaar dat wikkelt project.
Dus voordat we praten over wat dat is, laten we die twee klassen importeren. Dus ik ga importeren waarneembaar van rxjs, en laten we ook onze importeren project model-.
Dus wat is een waarneembaar? Helaas kan ik je hier geen volledige inleiding geven over waarnemingen, maar Angular 2 hangt wel degelijk af van waarneembare beelden, en ik zal proberen ze zo eenvoudig mogelijk te maken terwijl we dit doornemen.
Kortom, een waarneembaar is een wrapper die lijkt op een belofte of een array. Zowel beloften, matrices als waarnemingen hebben andere items in zich. In het geval van een array hebben we meerdere items. In het geval van een belofte hebben we in principe enige waarde die we in de toekomst ooit zullen krijgen.
Met waarnemingen zou het één waarde kunnen zijn of het zouden vele waarden kunnen zijn. Een definitie die soms wordt gebruikt, is een asynchrone array. Kort gezegd, een waarneembaar is een gegevensstroom waarvan we op elk moment meer kunnen profiteren. En ik denk dat je in de loop van enkele lessen hier zult zien hoe we observabelen kunnen gebruiken om het ophalen en instellen van sommige van onze gegevens een stuk eenvoudiger te maken. Als je nu nog geen waarneembare dingen hebt gezien, kun je ze gewoon zien als een soort belofte.
Dus wat zullen we terugkeren van deze functie? Nou, we kunnen het doen this.http.get (), dus laten we nemen / Api / projecten die onze lijst met projecten zal teruggeven. En wat we dan kunnen doen is de reactie toewijzen aan een functie die we gaan schrijven genaamd this.extractData.
Je kunt denken aan de kaart() functioneer hier als de dan() methode op een belofte. Het werkt net als op een array waar kaart() voert een bewerking uit op elk van de waarden in die array en retourneert vervolgens een nieuwe array met die nieuwe waarden.
Dus eigenlijk, kaart() kunt u een soort van actie uitvoeren op de waarden in een container. En hetzelfde geldt voor de dan() methode in een belofte. Je kan bellen dan() op een belofte om iets te doen aan de waarde van een belofte. En dat levert een nieuwe belofte op met elke nieuwe waarde die je hebt gecreëerd ...
Het is hetzelfde met kaart() hier. We gaan bellen extractData () op de reactie die binnenin dit waarneembaar is, en wat we hieruit zullen terugkrijgen is een waarneembaar dat een project omhult.
Dus laten we een maken extractData () functie, en dit gaat een Angular HTTP-bibliotheek gebruiken antwoord klasse.
Dus we komen terug res.json (), en dit zal de HTTP-reactie in de daadwerkelijke JSON-body omzetten. Nu de waarde van extractData () zal worden geretourneerd in onze getProjects () call, en Angular zal zien dat dit hier overeenkomt met ons retourtype, omdat het een waarneembaar scala aan projecten zal zijn.
Nu dat we dit hebben getProjects () functie, laten we naar onze projectcomponent gaan en het importeren. Allereerst, laten we het importeren ProjectsService.
Nu omdat we een injectie willen injecteren ProjectsService In dit onderdeel moeten we bijvoorbeeld Angular vertellen dat het een instantie voor dit onderdeel moet bieden. Dus laten we er een toevoegen providers eigendom van onze component-decorateur, en we zullen het vertellen dat het dat nodig zal hebben ProjectsService in dit onderdeel. Laten we dus een constructor toevoegen en afhankelijkheidsinjectie op dezelfde manier gebruiken als bij onze service.
We zullen een parameter aanmaken genaamd service, en dit zal een zijn ProjectsService object, en daarom weet Angular een van onze injectienaalden te injecteren ProjectsService instanties in deze klasse. We geven deze parameter het als de privaat sleutelwoord hier zodat het dat onmiddellijk als een eigenschap instelt.
Met dit op zijn plaats, kunnen we doorgaan en het binnen gebruiken ngOnInit. Dus hier kunnen we bellen this.service.getProjects ()-Onthoud dat dit een waarneembaar resultaat oplevert - en de methode die we hier willen noemen abonneren ().
Je kunt denken aan de abonneren () methode alsof we bellen dan() op een belofte die werd teruggegeven, of als u hierover nadenkt als een array, abonneren () is als het forEach () methode op een array. Het is een beetje zoals kaart() in zoverre dat het ontvangt wat er in de array zit, of in dit geval het waarneembare.
Echter, forEach () retourneert geen nieuwe array, en abonneren () retourneert geen nieuw waarneembaar. Dus het lijkt op het einde van de regel. Zo abonneren () zal onze projectenlijst als zijn parameter krijgen, en we kunnen alleen maar zeggen this.projects, die verwijst naar onze reeks projecten, zal gelijk zijn projecten. Op die manier kunnen we de waarde van het waarneembare uitpakken en de waarde zal nu beschikbaar zijn vanuit de klas.
En als we teruggaan naar de browser om onze lijst met projecten te bekijken, zullen we de drie projecten zien die ik op de server zet.
In de volledige cursus, Modern Web Apps met Angular 2, laat ik je zien hoe je een complete webapp kunt coderen met Angular 2, met behulp van de meest actuele functies en architecturale patronen.
Je kunt meegaan en een complete app voor projectbeheer bouwen, met gebruikersaanmelding en validatie en real-time chat. U krijgt lessen over de Angular 2-sjabloontaal, het structureren van uw app, routing, formuliervalidatie, services, observables en meer.
Als je nog nooit Angular 2 hebt gebruikt, leer dan alles wat je moet weten in onze cursus Aan de slag met Angular 2. Als je verder wilt bouwen op je Angular 2-ervaring, waarom zou je niet eens kijken naar:
Accentsconagua