Ik heb dezelfde app gemaakt in React en Vue (deel 2: Angular)

Nadat we dezelfde app hebben gemaakt in React en Vue, is het goed dat we Angular in de mix gooien!

Deel 1 nog niet gelezen? Bekijk het hier.

Update: Hallo! Ik heb iets gemaakt dat The Weekly Project Club heet. Elke week ontvang je een projectidee in je inbox. U kunt werken aan het oplossen van problemen en u krijgt de hulp van de hele club om u op het goede spoor te houden.

Als je op zoek bent naar een manier om React, Vue en Angular uit te proberen, kun je drie weken meedoen en ze allemaal uitproberen! Het is een geweldige manier om een ​​framework te testen.

Klik hier voor meer informatie en om lid te worden van The Weekly Project Club.

Ik gebruik Angular elke dag op het werk, maar in de JavaScript-wereld kan men niet anders dan horen over alle andere frameworks die er zijn. Ik hou ook van het vergelijken van appels met appels! Dus toen ik Sunil Sandhu’s artikel over React vs Vue zag, moest ik contact opnemen! Dus hier zijn we dan, React vs Vue vs Angular!

Hoe zien de apps er allemaal samen uit?

Net als in deel 1 is de css bijna identiek aan de andere twee, behalve waar ze zich bevinden.

Deze Angular-app wordt gegenereerd door de Angular CLI (Command Line Interface). Omdat Angular vaak wordt afgekort tot ‘ng’, was het commando om deze app te maken ng genereren ng-todo .

In vergelijking met Vue en React heeft Angular een ton aan bestanden. Een belangrijke reden hiervoor is dat terwijl Vue alles voor één component in één bestand plaatst en React de CSS in zijn eigen bestand opsplitst, Angular de css in het ene bestand plaatst, html in een ander en de componentcode in een ander. Hoewel we deze allemaal in één bestand kunnen samenvoegen, wordt het als een goede gewoonte beschouwd om ze gescheiden te houden.

Een andere reden voor alle bestanden is dat Angular TypeScript gebruikt. TypeScript is “een superset van JavaScript die optioneel statisch typen, klassen en interfaces biedt”. Laten we dat een beetje uitpakken.

TypeScript is eigenlijk gewoon een heleboel dingen bovenop JavaScript toevoegen. Als we een regel JavaScript in onze TypeScript-code schrijven, werkt het prima. Wat u met TypeScript kunt doen, is eenvoudig klassen maken en het gebruik ervan afdwingen.

In ons project maken we een ToDo-les:

Deze klas doet op zichzelf niet veel. Waar de kracht komt, is dat we functies kunnen schrijven die vereisen een ToDo, en de TypeScript-compiler zal tegen ons schreeuwen als we proberen het iets anders te geven.

Bijvoorbeeld:

Natuurlijk kunnen we dit doen met elk type dat we willen, niet alleen met klassen:

TypeScript is gewoon JavaScript, behalve dat het soms typefouten genereert en dwaze fouten voorkomt die runtime-fouten worden in alleen JavaScript.

Naarmate een applicatie gecompliceerder wordt, komen dergelijke lessen echt van pas! Ze dienen als een goed model voor iets uit het echte leven, zoals een product, baan of persoon. In de Angular-wereld noemen we ze modellen.

Hoe maken we nieuwe ToDo’s?

Hier is onze ToDoComponent:

Het meeste wat er in dit onderdeel gebeurt, heeft te maken met de vormgeving en het invoerformulier. We komen daar zo op terug, dus laten we ons concentreren op de takenlijst zelf

Als we erop aankomen, is onze lijstcomponent slechts een lijst met ToDo’s! ngFor kan onze lijst nemen en elk item weergeven, net zoals een foreach dat zou doen. Het grote verschil hier is dat Angular het updaten voor ons afhandelt! Als we een geldige invoer krijgen, hoeven we alleen de string door te geven aan een nieuw ToDo-object en deze toe te voegen aan onze lijst. Angular zorgt voor de rest!

Dat is het! We willen er ook voor kunnen zorgen dat de gebruiker geen lege ToDo indient, dus hoe kunnen we dat voorkomen?

Angular Form Validation

In plaats van te controleren op een enter-toetsaanslag, of zelf de inhoud van de tekenreeks te controleren zodat we een fout kunnen genereren, kunnen we Angular Forms gebruiken om dat voor ons te doen. Als je de volledige ToDoComponent bekijkt, declareren we een form -element,

Die ngSubmit -binding wordt geactiveerd als de verzendknop wordt ingedrukt of als de gebruiker op enter drukt! Het kan ook alleen worden geactiveerd als het formulier in een geldige staat is.

Een ngForm maakt ook een component-lidvariabele voor elke invoer in een formulier, in dit geval naam genoemd. We kunnen controleren in welke staat die invoer is, en afhankelijk van. Fouten of andere nuttige berichten weergeven. In dit geval gebruiken we valid , ongerept , en we houden ook zelf bij of het formulier al dan niet eerder is ingediend.

Leuk feit, we kunnen ook aangepaste validators schrijven voor Angular! We hebben ze hier niet nodig, maar we kunnen een formulier hebben dat weet hoe een telefoonnummer moet worden opgemaakt en alle validatie voor ons doen! Netjes, toch?

Dat zorgt voor onze lijst, maar hoe zit het met het daadwerkelijk weergeven van de ToDo?

Dit is onze component ToDo-item:

Hoe muteren we gegevens?

In Angular hoeven we alleen maar twee dingen te doen om bepaalde gegevens weer te geven:

En dat is het! Wanneer we ToDo.Item überhaupt wijzigen, zal Angular de weergave voor ons bijwerken. React biedt die hooks niet echt, omdat het aanroepen van setState de component toch opnieuw voor ons zal renderen.

Communiceren met componenten

Aangezien deze component zich alleen bezighoudt met het weergeven van een enkele ToDo, moet de ToDoComponent de ToDo-itemcomponent een ToDo-item kunnen geven om weer te geven! We moeten ToDoComponent ook kunnen vertellen dat de gebruiker op de ‘delete’ knop heeft geklikt. Angular bereikt dit met ‘Inputs’ en ‘Outputs’

Invoer is erg eenvoudig, ze kunnen elk type zijn dat we willen, en zullen voor ons gebonden zijn! In deze component hebben we alleen een ToDo als input. We vertellen Angular dat een bepaald lid een input is door de @Input () decorateur ervoor te plaatsen.

Dan hoeft onze oudercomponent gewoon de ToDoItem-component een ToDo te geven zoals deze:

Dan gebruiken we gewoon een binding om onze ToDo weer te geven!

De output is een beetje anders. Een output is niet zomaar wat gegevens, het is ook een gebeurtenis om alles te activeren dat naar die output kijkt. Angular Inputs kunnen elk type zijn (zoals een string), maar Outputs moeten van het type EventEmitter zijn. EventEmitters zenden echter een waarde uit, die van elk gewenst type kan zijn! Dus als we een string wilden uitvoeren, zouden we gewoon een versierd lid maken zoals dit:

En een bovenliggende component kan zich als volgt abonneren op de gebeurtenis:

Nu we gewapend zijn met de kennis van outputs, hoe kunnen we een taak verwijderen?

Een taak verwijderen

We hoeven niets te missen van onze ToDoItem-component, we hoeven alleen een gebeurtenis te activeren. Het typoscript moet weten welk type onze uitvoer is, maar aangezien het ons niet kan schelen, maken we het willekeurig , dus onze uitvoer ziet er als volgt uit:

We moeten deze gebeurtenis nog steeds activeren in ToDoItem. We hebben een mooi opgemaakte div die eruitziet als een knop uit deel 1, we hoeven alleen maar een functie aan de klikgebeurtenis te koppelen.

deleteItem roept vervolgens .emit () aan bij verwijderd :

en Angular geven het evenement door aan ToDoComponent.

Terug in onze ToDoComponent hebben we de functie deleteItem gekoppeld aan onze ToDoItem-component. We geven het ook de index van de huidige ToDo, zodat we weten welke we moeten verwijderen.

Dan hoeven we alleen nog maar de ToDo bij die index te verwijderen, en Angular zal het scherm updaten.

Daar gaan we, één ToDo-lijsttoepassing!

Zelfs een kleine Angular-app heeft veel meer te bieden dan een React- of Vue-app. Het leuke van Angular is echter dat de meeste functionaliteit die je nodig hebt binnen Angular zelf zit. Angular omvat paginarouting, het beschermen van toegang tot pagina’s, http-oproepen, luie laden van modules en nog veel meer. Een zwaargewicht frame heeft een grote leercurve. Het voordeel is echter dat ik zelden buiten Angular hoef te komen om een ​​oplossing te vinden voor wat ik nodig heb.

Als ik niet Angular schrijf, help ik mensen graag uit te zoeken welke programmeertaal ze moeten leren. Er zijn veel verschillende prioriteiten waar u aan moet denken bij het kiezen van een JavaScript-framework. Daarom heb ik PickAFramework.com gemaakt. Ik schrijf artikelen over het nemen van grote technische beslissingen en help mensen hun eigen beslissingen te nemen.

Als je moeite hebt om React, Vue of Angular in je volgende project te gebruiken, overweeg dan om je aan te melden voor mijn e-mailcursus. Ik heb het over de methoden die u kunt gebruiken om een ​​raamwerk te kiezen, naast het vergelijken van de code. Het is helemaal gratis en u kunt zich op elk moment uitschrijven.

Lees hier meer over Feature Fishing.

Bedankt voor het lezen! Met dank aan Sunil Sandhu voor het mogelijk maken van dit allemaal! Hier is een link naar deel 1 als je het nog niet hebt gelezen. Je kunt de broncode hier op Github vinden.