Comenzile rapide de la tastatură sunt o caracteristică foarte convenabilă pentru utilizatori. Le permite să facă lucruri fără multe clicuri, sporind productivitatea. Manevrarea comenzilor rapide de la tastatură poate fi ușor adăugată la aplicațiile Angular cu ajutorul bibliotecii angular2-hotkeys.

adăugați

În acest articol, vom scrie o aplicație de urmărire a dietei care permite utilizatorilor să introducă caloriile consumate pentru o anumită zi. Aceștia pot utiliza comenzile rapide de la tastatură pentru a deschide modalitatea pentru a adăuga o intrare și, de asemenea, pentru a șterge ultima intrare. Pentru a începe proiectul, instalăm CLI angular executând npm și -g @ angular/cli. Apoi rulăm CLI angular pentru a crea proiectul tastând:

În expertul de configurare, alegem să includem rutare și să folosim SCSS ca preprocesor CSS.

Apoi instalăm câteva pachete. Avem nevoie de pachetul angular2-hotkeys menționat mai sus, Ngx-Bootstrap pentru styling, precum și MobX pentru a stoca datele într-un magazin partajat. Pentru a le instala, rulăm:

Apoi ne creăm componentele și serviciile. Pentru a face acest lucru, executăm:

Acum suntem gata să scriem un cod. În diet-form.component.html, înlocuim codul existent cu:

Adăugăm formularul pentru a permite utilizatorilor să introducă data la care au mâncat și cantitatea de calorii consumate în ziua dată. Folosim validarea formularului cu șablon Angular pentru a verifica dacă totul este completat, pentru a verifica dacă data este în format AAAA-LL-ZZ și pentru a verifica dacă numărul de calorii este un număr non-negativ. De asemenea, avem un buton Salvare pentru a salva datele atunci când se face clic pe ele. Acest formular este utilizat atât pentru adăugarea, cât și pentru editarea intrărilor.

Apoi în diet-form.component.ts, înlocuim codul existent cu:

Acest fișier are funcțiile pe care le-am numit în șablonul anterior, cum ar fi funcția de salvare. De asemenea, avem intrări pentru a obține datele de pe pagina de pornire, precum și o ieșire pentru a emite un eveniment salvat pe pagina de pornire. Deoarece folosim formularul pentru editare, trebuie să trecem și în intrarea selectată cu Intrarea selectată de calorii, astfel încât să poată fi editată. Pentru a actualiza obiectul formularului cu valorile selectate de calorii, am copiat valoarea ori de câte ori se modifică intrarea selectată de calorii.

În funcția de salvare, validăm formularul și apelăm diferite funcții pentru salvare, în funcție de faptul dacă formularul este utilizat pentru adăugarea sau editarea unei intrări. Cele mai recente intrări vor fi populate în magazinul nostru MobX apelând funcția getCaloriesEaten și evenimentul salvat va fi emis odată ce a fost finalizat.

În continuare, în pagina de pornire.component.html, înlocuim codul cu:

Aceasta creează butoane pentru adăugarea, editarea și ștergerea intrărilor, precum și un tabel pentru afișarea intrărilor. De asemenea, avem modurile pentru adăugarea și editarea intrărilor pe care le deschidem cu butoanele Adăugare și respectiv Editare.

În continuare, în home-page.component.ts, înlocuim codul existent cu:

Avem funcțiile openAddModal și openEditModal pentru a deschide modurile Add and Edit. Funcția closeModals este pentru închiderea modurilor atunci când lucrurile sunt salvate în componenta app-diet-form. Funcția deleteCaloriesEaten este pentru ștergerea caloriilor, iar getCaloriesEaten este utilizat pentru obținerea intrărilor la încărcarea paginii și la ștergerea articolelor. De asemenea, pune articolele în magazinul nostru, astfel încât fiecare componentă să o poată accesa.

De asemenea, avem funcția addHotKeys pentru a adăuga tastele rapide în aplicația noastră pentru confortul utilizatorilor. HotKeyService este din biblioteca angular2-hotkeys. Îl injectăm și apoi definim tastele rapide. Am definit Ctrl + Shift + A pentru a deschide add modal și comanda Ctrl + Shift + D pentru a șterge prima intrare din listă. Declarația falsă de returnare din apel invers este de a preveni apariția evenimentului.

În app-routing.module.ts, punem:

Aceasta este astfel încât utilizatorii să poată vedea paginile pe care tocmai le-am adăugat atunci când fac clic pe linkuri sau introduc URL-uri.

Apoi în app.component.html, punem:

Acest lucru adaugă link-urile către paginile noastre și expune prizele routerului, astfel încât utilizatorii să poată vedea paginile noastre.

Apoi, în app.component.scss, adăugăm:

Acest lucru adaugă umplerea paginilor noastre și schimbă culoarea barei de navigare Bootstrap.

În app.module.ts, înlocuim codul existent cu:

Aceasta adaugă componentele, serviciile și bibliotecile noastre pe care le folosim în aplicația noastră.

În calorie.ts, adăugăm:

Acest lucru adaugă tipuri la modelul nostru de formă de calorii.

Apoi, în dietStore.ts, adăugăm:

Acest lucru creează magazinul MobX pentru a obține componentele noastre și pentru a partaja datele. Ori de câte ori numim this.store.setCalories în componentele noastre, setăm datele caloriilor din acest magazin, deoarece am adăugat decoratorul @action înaintea acestuia. Când numim this.store.calories în codul componentelor noastre, obținem întotdeauna cea mai recentă valoare din acest magazin, deoarece are @observable decorator.

Apoi, în diet.service.ts, înlocuim codul existent cu:

Aceasta este astfel încât să putem face cereri HTTP către backend-ul nostru pentru a obține, salva și șterge intrările utilizatorului.

Apoi în environment.prod.ts și environment.ts, înlocuim codul existent cu:

Aceasta adaugă adresa URL a API-ului nostru.

În cele din urmă, în index.html, înlocuim codul cu:

pentru a adăuga dependențele Bootstrap CSS și JavaScript în aplicația noastră, precum și schimbarea titlului.

După toată munca, putem rula un serviciu pentru a rula aplicația.

Pentru a începe back-end-ul, instalăm mai întâi pachetul json-server rulând npm și json-server. Apoi, accesați folderul proiectului nostru și rulați: