Share
Angular is de afgelopen jaren erg populair geworden. U kunt dit open-source JavaScript-framework gebruiken om web- en mobiele apps te bouwen. Als je hebt nagedacht over het leren van Angular, maar niet weet waar je moet beginnen, is het misschien een goed idee om deze serie te volgen.
Het doel van deze serie is om de basis van Angular te bespreken en tegelijkertijd een zeer eenvoudige app te maken die informatie over verschillende landen toont. Angular is geschreven in TypeScript, dus is het logisch dat u ook in TypeScript uw eigen code schrijft.
U hoeft zich geen zorgen te maken als u nog nooit eerder met TypeScript hebt gewerkt. Om het simpel te zeggen: TypeScript is gewoon JavaScript getypt met extra functies. Ik heb ook een serie geschreven met de titel TypeScript voor beginners op Envato Tuts +, waar je eerst de basisprincipes van TypeScript kunt leren.
Als u al bekend bent met TypeScript, kunt u gewoon doorgaan en beginnen met het maken van uw eerste Angular-app.
De eerste stap zou zijn om Node.js. U kunt naar de officiële website gaan en de juiste versie downloaden. De knooppuntenpakketbeheerder wordt geïnstalleerd als onderdeel van Node.js.
De volgende stap is om TypeScript te installeren door de volgende opdracht uit te voeren. Ik raad aan dat u een TypeScript-versie installeert over 2.1.
npm install -g typescript
Ten slotte moet u de Angular CLI installeren door de volgende opdracht uit te voeren. Door Angular CLI te installeren, wordt het maken van uw Angular-app eenvoudiger.
npm install -g @ angular / cli
Nu kunt u direct vanuit de doos een nieuwe Angular-app maken door de volgende opdracht in de terminal uit te voeren. Controleer voordat u de opdracht uitvoert of u naar de map bent gegaan waar u de app wilt maken.
ng nieuwe land-app
Het installeren van alle afhankelijkheden voor het project kost enige tijd, dus wees geduldig terwijl Angular CLI uw app instelt. Nadat de installatie is voltooid, ziet u een map met de naam country-app in de huidige map. U kunt uw app nu meteen uitvoeren door de map te wijzigen in country-app en dan rennen ng serveren in de console.
cd country-app ng serve - open
Het toevoegen --Open opent uw app automatisch in de browser op http: // localhost: 4200 /.
De landinformatie-app die we maken, heeft drie componenten. De HomeComponent zal de top drie landen tonen onder verschillende categorieën zoals bevolking, bbp en oppervlakte. U kunt op de naam van elk land klikken om er meer over te lezen. De aanvullende informatie over het land wordt vermeld met behulp van een ander onderdeel, dat we het zullen noemen CountryDetailComponent. Er zal nog een component in onze app staan, die zal worden gebruikt om een lijst weer te geven met alle landen die we hebben opgeslagen in onze app.
Aangezien dit uw eerste Angular-app is, is het ons belangrijkste doel de dingen eenvoudig te houden zonder ingewikkelde functionaliteit toe te voegen. Als je eenmaal de basisprincipes goed hebt begrepen, zal het maken van complexere apps geen ontmoedigende klus lijken.
De afbeelding hieronder is van de startpagina of HomeComponent in onze landinformatie-app. Zoals u kunt zien, zijn er drie landen onder elke categorie en deze zijn in aflopende volgorde geplaatst. Tijdens het maken van de HomeComponent, u zult leren hoe u verschillende landen moet sorteren voordat ze in de sjabloon worden weergegeven.
De volgende afbeelding toont de pagina "alle landen" of AllCountriesComponent van onze app. De lay-out van deze component lijkt sterk op de HomeComponent. Het enige verschil is dat we deze keer alle landen samen met hun hoofdsteden vermelden.
Als u op het vak klikt van een land dat in het land is gerenderd, kan het HomeComponent of de AllCountriesComponent, u wordt naar de detailpagina van het land of CountryDetailComponent. De informatie die over een land wordt verstrekt, kan niet worden bewerkt.
Er is een terugknop achter de details van elk land. Met deze knop Terug gaat u terug naar het vorige onderdeel of de vorige pagina. Als je naar de CountryDetailComponent van de HomeComponent, je wordt teruggebracht naar de HomeComponent. Als u bij de CountryDetailComponent van de AllCountriesComponent, je wordt teruggebracht naar de AllCountriesComponent.
Verwijzen naar verschillende componenten die we maken als pagina's is technisch niet correct. Ik gebruik echter termen als startpagina of HomeComponent door elkaar, omdat het zien van veel onbekende termen als routing, componenten en decorateurs intimiderend kan zijn voor lezers die nog nooit eerder een Angular-app hebben gemaakt. Als u deze termen losjes gebruikt voor deze serie, kunt u snel leren, in plaats van verward te raken door het jargon.
Voordat we beginnen met het maken van onze app, moet je op de hoogte zijn van de basisconcepten van Angular. In dit gedeelte komen heel kort belangrijke onderwerpen aan de orde, zoals componenten en sjablonen.
Componenten zijn de bouwstenen van een Angular-app. Hiermee kunt u de gebruikersinterface van uw app beheren. Een basiscomponent bestaat uit twee delen: een decorateur en een klassendefinitie. U kunt de toepassingslogica opgeven voor een component in de klas.
De component-decorateur wordt gebruikt om informatie zoals een aangepaste selector op te geven om het onderdeel, het pad naar de HTML-sjabloon en de op het onderdeel toe te passen stijlregels te identificeren.
Hier is een basiscomponenten-decorateur die alle drie waarden instelt CountryDetailComponent:
@Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css'])
Alle componenten die we maken, hebben een aangepaste selector die de tag specificeert die de component in de browser weergeeft. Deze aangepaste tags kunnen elke gewenste naam hebben. We zullen bijvoorbeeld een maken countryDetailComponent in de derde zelfstudie van de serie, en we zullen onze eigen aangepaste tag gebruiken app-country-detail om dit onderdeel in de browser weer te geven.
Elk onderdeel dat u maakt, zal bestaan uit een sjabloon die bepaalt wat wordt weergegeven op de toepassingspagina. Bijvoorbeeld de countryDetailComponent heeft twee div tags die fungeren als een wrapper rond de hoofdinhoud van de component. Elk stukje informatie over een land wordt in zijn eigen land gestopt p tag en de naam van het land wordt in een h2 label. Al deze tags kunnen samen worden opgeslagen als een sjabloon voor de countryDetailComponent en vervolgens weergegeven als een eenheid. Deze sjabloon van de component kan worden opgeslagen als een HTML-bestand of rechtstreeks in de decorateur worden opgegeven met behulp van de sjabloon attribuut.
Verschillende componenten van onze app moeten de gegevens ophalen om op het scherm weer te geven. We zullen een serviceklasse maken die functies bevat om ons te helpen deze gegevens op te halen en op de een of andere manier te sorteren of aan te passen. We zullen dan de functionaliteit van verschillende componentklassen gebruiken om deze gegevens aan de gebruiker te tonen.
U kunt overwegen een Service om gewoon elke waarde, functie of functie te zijn die uw toepassing nodig heeft. Het binnenhalen van alle landen die in onze applicatie zijn opgeslagen, is een service en deze wordt ook gesorteerd en weergegeven. Alle drie componenten in onze klasse zullen functies van onze service gebruiken om gegevens op te halen.
Wanneer u componenten voor uw app maakt, moet u afhankelijkheden van verschillende modules importeren. We zullen bijvoorbeeld importeren bestanddeel van de @ Hoekige / kern telkens wanneer we een eigen component creëren. U kunt dezelfde syntaxis ook gebruiken om afhankelijkheden te importeren die door u zijn gemaakt. Het gedeelte binnen accolades wordt gebruikt om de afhankelijkheid te specificeren die u wilt importeren, en het gedeelte erna van wordt gebruikt om aan te geven waar Angular de afhankelijkheid kan vinden.
Hier is een codefragment van de country-app dat we zullen creëren. Zoals je kunt zien, importeren we bestanddeel en OnInit van de @ Hoekige / kern. Evenzo importeren we een land en CountryService van bestanden die we zelf hebben gemaakt.
importeer Component, OnInit uit '@ angular / core'; importeer Land van '... / land'; importeer CountryService van '... /country.service';
Nadat je de. Hebt uitgevoerd ng nieuwe land-app opdracht, heeft de Angular CLI een aantal bestanden en mappen voor u gemaakt. Zoveel bestanden kunnen intimiderend zijn als een beginner, maar je hoeft niet met al die bestanden te werken. Wanneer we onze land-app maken, passen we alleen de bestanden aan die al in het bestand aanwezig zijn src / app map en het maken van nieuwe bestanden in dezelfde map. Op dit moment zou je vijf verschillende bestanden moeten hebben in de src / app map. Deze bestanden maken een applicatie-shell die zal worden gebruikt om de rest van onze app samen te stellen.
De app.component.ts bestand bevat de logica voor onze component geschreven in TypeScript. U kunt dit bestand openen en de titel eigendom van de AppComponent naar 'Leuke weetjes over landen'. De app.component.ts bestand zou nu de volgende code moeten hebben.
Component importeren vanuit '@ angular / core'; @Component (selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']) exportklasse AppComponent title = 'Leuke weetjes over landen ';
De app.component.html bestand bevat de sjabloon voor onze AppComponent klasse. Open de app.component.html bestand en vervang de standaard HTML-code erin met de volgende regel:
titel
Door in te pakken titel binnen de accolades, we vertellen Angular om de waarde van te zetten titel eigendom van de AppComponent klasse binnen de h1 label.
We zullen dit bestand in de laatste zelfstudie van de serie bijwerken om nieuwe componenten weer te geven die we gaan maken. Voorlopig hoeft het alleen de titel van onze app te tonen.
De wijzigingen die in dit bestand zijn aangebracht, worden automatisch weergegeven in de browser op http: // localhost: 4200 /. Zorg er wel voor dat de console nog steeds open staat en dat u de. Hebt ingetypt ng serveren commando vanaf het begin van de tutorial.
Verschillende functies en functies van de app worden bestuurd door meerdere, eenvoudigere componenten die we later zullen maken. Je kunt deze applicatie-shell zien als een auto en verschillende componenten die we zullen maken als onderdelen van die auto, zoals de motor en de wielen. Elk onderdeel zal zijn specifieke functie vervullen en je kunt ze allemaal samenvoegen om de hele auto te maken.
Het doel van deze zelfstudie was om u te helpen bij het installeren van alle benodigde hulpmiddelen die u nodig hebt om een Angular-app te maken en snel enkele fundamentele Angular-concepten te bespreken.
Om samen te vatten, moet u de basisprincipes van TypeScript kennen voordat u een Angular-app kunt maken. In de volgende stap moet u Node.js, TypeScript en de Angular CLI installeren. Hierna kunt u een groot aantal opdrachten uitvoeren in het gedeelte Aan de slag van deze zelfstudie en uw eerste Angular-app is actief.
Onze land-app doet veel meer dan alleen de titel weergeven. In de volgende zelfstudie maakt u enkele klassen en services die worden gebruikt om gegevens over verschillende landen op te slaan en op te halen. Deze lessen en services zullen nuttig zijn in de derde en vierde tutorials, waar we verschillende componenten van onze app zullen maken.
Terwijl we aan het werken zijn aan deze tutorialserie, vergeet dan niet Envato Market te bekijken om te zien wat beschikbaar is voor gebruik en studie voor zowel Angular als JavaScript, in het algemeen.
Accentsconagua