Am creat aceeași aplicație în React și Vue (Partea 2: Angular)

După crearea aceleiași aplicații în React și Vue, este corect să aruncăm Angular în mix!

Nu ați citit încă partea 1? Verificați-l

aici

Actualizare: Bună ziua! Am creat ceva numit The Weekly Project Club. În fiecare săptămână veți primi o idee de proiect în căsuța de e-mail. Puteți lucra la rezolvarea problemelor și veți avea ajutorul întregului club pentru a vă menține pe drumul cel bun.

Dacă căutați o modalitate de a încerca React, Vue și Angular, vă puteți înscrie timp de 3 săptămâni și încercați fiecare! Este o modalitate excelentă de a testa un cadru.

Pentru a afla mai multe și pentru a vă alătura The Weekly Project Club, faceți clic aici.

Folosesc Angular la locul de muncă în fiecare zi, dar în lumea JavaScript nu se poate să nu auzim despre toate celelalte cadre existente. Îmi place, de asemenea, să compar mere cu mere! Așadar, când am văzut articolul lui Sunil Sandhu despre React vs Vue, a trebuit să mă contactez! Iată-ne, așadar, React vs Vue vs Angular!

Cum arată aplicațiile toate împreună?

La fel ca în partea 1, CSS este aproape identic cu celelalte două, cu excepția locului în care sunt localizate.

Această aplicație angulară este generată de CLI angulară (interfață linie de comandă). Deoarece Angular este frecvent scurtat la „ng”, comanda pentru a crea această aplicație a fost ng generate ng-todo .

Comparativ cu Vue și React, Angular are o ton de fișiere. Un motiv important pentru acest lucru este că, în timp ce Vue pune totul pentru o componentă într-un singur fișier, iar React descompune CSS-ul în propriul său fișier, Angular introduce css-ul într-un fișier, html într-un altul și codul componentului în altul. Deși putem pune toate acestea într-un singur fișier, este considerată cea mai bună practică să le păstrăm separate.

Un alt motiv pentru toate fișierele este că Angular folosește TypeScript. TypeScript este „un superset de JavaScript care oferă tastare statică opțională, clase și interfețe”. Permiteți să despachetăm puțin acest lucru.

TypeScript chiar adaugă o grămadă de lucruri deasupra JavaScript. Dacă scriem o linie de JavaScript în codul nostru TypeScript, va funcționa foarte bine. Ceea ce vă permite să faceți TypeScript este să creați cu ușurință clase și să impuneți utilizarea acestora.

În proiectul nostru, realizăm o clasă ToDo:

Această clasă nu face foarte multe de la sine. Unde vine puterea este că putem scrie funcții care necesită un ToDo, iar compilatorul TypeScript ne va striga dacă încercăm să-i dăm altceva.

De exemplu:

Desigur, putem face acest lucru cu orice tip dorim, nu doar cu cursuri:

TypeScript este doar JavaScript, cu excepția faptului că va arunca uneori erori de tip și va preveni greșeli prostești care ar deveni erori în timpul rulării doar în JavaScript.

Pe măsură ce o aplicație devine mai complicată, clase de acest gen chiar îți vin la îndemână! Ele servesc ca un model bun pentru un lucru din viața reală, cum ar fi un produs, un loc de muncă sau o persoană. În lumea unghiulară, ne referim la acestea ca modele.

Cum creăm noi ToDos?

Iată ToDoComponent:

Cele mai multe lucruri care se întâmplă în această componentă au legătură cu stilul și formularul de introducere. Vom ajunge la aceia într-un pic, așa că să ne concentrăm pe lista ToDo în sine

Când ajungem la ea, componenta noastră din listă este doar o listă de ToDos! ngFor poate lua lista noastră și afișa fiecare articol, așa cum ar face un foreach. Marea diferență aici este că Angular se va ocupa de actualizarea noastră! Când primim o intrare validă, tot ce trebuie să facem este să trecem șirul într-un nou obiect ToDo și să îl adăugăm la lista noastră. Angular se ocupă de restul!

Gata! De asemenea, dorim să ne putem asigura că utilizatorul nu trimite un ToDo gol, deci cum putem preveni acest lucru?

Validare formă unghiulară

În loc să verificăm apăsarea tastei enter sau să verificăm singuri conținutul șirului, astfel încât să putem arunca o eroare, putem folosi Forme unghiulare pentru a face acest lucru pentru noi. Dacă vă uitați la ToDoComponent complet, declarăm un element form ,

Această legare ngSubmit se va declanșa fie atunci când butonul de trimitere este apăsat, fie utilizatorul apasă Enter! De asemenea, poate fi declanșat numai atunci când formularul este într-o stare validă.

Un ngForm creează, de asemenea, o variabilă componentă pentru fiecare intrare dintr-un formular, în acest caz numită nume . Putem verifica în ce stare se află intrarea și, în funcție de aceasta, putem afișa erori sau alte mesaje utile. În acest caz, utilizăm valid , curat și, de asemenea, ne ținem cont de faptul dacă formularul a fost trimis înainte sau nu.

Fapt amuzant, putem scrie și validatoare personalizate pentru Angular! Nu avem nevoie de ele aici, dar am putea avea un formular care să știe cum ar trebui formatat un număr de telefon și să facem toate validările pentru noi! Frumos, nu?

Asta se ocupă de lista noastră, dar ce zici de afișarea efectivă a ToDo?

Iată componenta noastră ToDo Item:

Cum mutăm datele?

În Angular, tot ce trebuie să facem pentru a afișa unele date sunt două lucruri:

Și atât! Când schimbăm ToDo.Item, Angular va actualiza vizualizarea pentru noi. React nu oferă cu adevărat acele cârlige, deoarece apelarea setState va restabili componenta pentru noi oricum.

Comunicarea cu componentele

Deoarece această componentă se referă doar la afișarea unui singur ToDo, ToDoComponent trebuie să poată da componentei ToDo Item un ToDo pentru a fi afișat! De asemenea, trebuie să putem spune ToDoComponent că utilizatorul a făcut clic pe butonul „șterge”. Unghiular realizează acest lucru cu „Intrări” și „Ieșiri”

Intrările sunt foarte simple, pot fi de orice tip dorim și vor fi obligatorii pentru noi! În această componentă avem doar un ToDo ca intrare. Îi spunem lui Angular că un anumit membru este o intrare prin punerea în față a decoratorului @Input () .

Apoi, componenta noastră părinte trebuie doar să transmită componentei ToDoItem un ToDo astfel:

Apoi, folosim doar o legare pentru a afișa ToDo!

Ieșirile sunt puțin diferite. O ieșire nu este doar niște date, ci și un eveniment pentru a declanșa orice urmărește pentru ieșirea respectivă. Intrările unghiulare pot fi de orice tip (ca un șir), dar ieșirile trebuie să fie de tipul EventEmitter . Emițătorii de evenimente emit însă o valoare, care poate fi de orice tip dorim! Deci, dacă am dori să scoatem un șir, am crea doar un membru decorat ca acesta:

Și o componentă părinte se poate abona la eveniment astfel:

Acum că suntem înarmați cu cunoștințele despre rezultate, cum ștergem un ToDo?

Ștergerea unui ToDo

Nu este nevoie să transmitem nimic din componenta ToDoItem, ci doar să declanșăm un eveniment. Mecanografiat trebuie să știe ce tip este ieșirea noastră, dar, din moment ce nu ne pasă, îl facem orice , astfel încât ieșirea noastră arată astfel:

Încă trebuie să declanșăm acest eveniment în ToDoItem. Avem un div frumos formatat care arată ca un buton din partea 1, trebuie doar să conectăm o funcție până la evenimentul de clic.

Apoi deleteItem apelează .emit () pe Șters :

și Angular vor transmite evenimentul până la ToDoComponent.

Înapoi la ToDoComponent, am legat funcția deleteItem de componenta ToDoItem. De asemenea, îi trecem indexul ToDo-ului curent, astfel încât să știm pe care să-l ștergem.

Apoi, tot ce trebuie să facem este să eliminăm ToDo la acel index, iar Angular va actualiza afișajul.

Iată-ne, o aplicație listă ToDo!

Chiar și o mică aplicație angulară are mult mai multe lucruri decât o aplicație React sau Vue. Lucrul cu adevărat frumos la Angular este că majoritatea funcționalităților de care aveți nevoie se află în Angular. Unghiular include rutare de pagini, protejarea accesului la pagini, apeluri http, încărcare leneșă a modulului și multe altele. Un cadru pentru greutăți are o mare curbă de învățare. Cu toate acestea, partea de sus este că rareori trebuie să ies în afara Angular pentru a găsi o soluție pentru ceea ce am nevoie.

Când nu scriu Angular, îmi place să îi ajut pe oameni să-și dea seama ce limbaj de programare ar trebui să învețe. Există o mulțime de priorități diferite la care să vă gândiți atunci când alegeți un cadru JavaScript. De aceea am creat PickAFramework.com. Scriu articole despre luarea unor decizii tehnice mari și îi ajut pe oameni să ia propriile decizii.

Dacă vă confruntați cu utilizarea React, Vue sau Angular în următorul dvs. proiect, vă rugăm să luați în considerare înscrierea la cursul meu de e-mail. Vorbesc despre metodele pe care le puteți folosi pentru a alege un cadru în afară de a compara codul. Este complet gratuit și vă puteți dezabona în orice moment.

Aflați mai multe despre Pescuitul de funcții aici.

Vă mulțumim că ați citit! Mulțumim lui Sunil Sandhu că a făcut ca toate acestea să se întâmple! Iată un link către partea 1 dacă nu l-ați citit încă. Puteți găsi codul sursă aici pe Github.