Wprowadzenie do wydarzeń AngularJS

AngularJS można opisać jako framework JavaScript służący do tworzenia aplikacji jednostronicowych (SPA) na urządzenia mobilne, a także do tworzenia stron internetowych. SPA to pojedyncza strona, na której można nadal dostosowywać dużą część wiedzy w zakresie kilku bitów danych, klikając dodatkowe kategorie / opcje. Ta cała procedura może odciążyć Twoją pracę, pozwalając po prostu na obniżenie kosztów, zwiększenie wydajności, a także szybsze ładowanie strony internetowej. W tym temacie poznamy Zdarzenia AngularJS.

Korzystając z AngularJS, możesz pracować z dyrektywami, a także używać atrybutów HTML, po prostu wiążąc dane z HTML za pomocą wyrażeń. AngularJS może być architekturą MVC, która ułatwia tworzenie aplikacji internetowych od samego początku. AngularJS 1.0 został wydany w 2010 roku i jeśli omówimy dzisiaj; najnowszą wersją AngularJS może być wersja 1.7.8, która została wydana w marcu 2019 r. AngularJS to także platforma open source zarządzana przez Google za pomocą ogromnej społeczności programistów.

Warunki wstępne

Zanim przejdziesz do AngularJS, musisz mieć podstawową wiedzę na temat

  • JavaScript
  • HTML
  • CSS

Podstawy AngularJS

Oto podstawy AngularJS

Dyrektywy

Prefiks ng oznacza AngularJS. ng- można opisać jako prefiks zarezerwowany dla dyrektyw klucza kątowego. Aby zapobiec kolizjom, mogą zasugerować, abyś nigdy nie używał dokładnego prefiksu ng w swoich dyrektywach później w wersji Angular. Ng może być skrótem Angular.

Wystąpienia kilku dyrektyw w AngularJS

  • Nowa dyrektywa ng może być wykorzystana do stworzenia nowej aplikacji Angular
  • Dyrektywa ng-update aktualizuje twoje niesamowite aplikacje, a także ich zależności
  • Dyrektywę ng-app można wykorzystać do zainicjowania aplikacji AngularJS.
  • Dyrektywa ng-init inicjuje informacje o aplikacji.

Dyrektywa ng-app wyjaśnia również AngularJS, który element jest „przedsiębiorcą” dzięki aplikacji AngularJS.

Wyrażenia

  • Wyrażenia za pomocą AngularJS zostaną opisane w nawiasach klamrowych: wyrażenie.
  • Do napisania wyrażenia w dyrektywie: ng-bind = ”expression”.

Na przykład

Wynik:

Kontroler

  • Stosowanie AngularJS będzie kontrolowane przez proste Kontrolery.
  • Kontroler aplikacji można opisać za pomocą dyrektywy ng-kontrolera
  • Kontroler jest znany jako obiekt JS, skonstruowany przy użyciu zwykłego konstruktora obiektów JS.

Wyjaśnij zdarzenia AngularJS

Różne rodzaje wydarzeń zlokalizowanych w AngularJS

AngularJS jest niesamowicie pełen wydarzeń i zawiera podstawowy model dodawania detektorów zdarzeń do HTML. Ułatwia wiele wydarzeń związanych z myszą i klawiaturą. Większość tych zdarzeń zostanie umieszczona na elemencie HTML. Jeśli jednocześnie napisałeś HTML, a także zdarzenia AngularJS, oba zdarzenia mogą zostać wykonane, oznacza to, że zdarzenie AngularJS nigdy nie zastąpi zdarzenia HTML.

Oto kilka istotnych wydarzeń.

  • kopiowanie
  • ng-kliknij
  • ng-cut
  • ng-dblclick
  • ng-keydown
  • naciśnięcie klawisza
  • kluczowanie
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

Będziemy analizować komunikowanie się ze zdarzeniami.

Angular JS zawiera globalną magistralę zdarzeń, która pozwala wywoływać zdarzenia w jednym zakresie i pozwolić innym zasięgom nasłuchiwać tego zdarzenia i reagować na nie. Możesz przekazać dodatkowe argumenty do zdarzenia, aby inni słuchacze mogli odpowiednio zareagować na zdarzenie. Wydarzenia są dość proste, ale jest kilka gotów.

Po pierwsze, nasłuchując zdarzenia, po prostu wywołujesz metodę $ on () w zakresie z parametrem nazwy zdarzenia. Wtedy każde wydarzenie o tej nazwie uruchomi oddzwonienie. Z drugiej strony, wzięcie udziału w wydarzeniu wymaga trochę planowania.

Powiedzmy, że mam wydarzenie, które zostało tutaj podniesione, w Child Scope 1, ale chcemy posłuchać tego wydarzenia w Child Scope 2. Niestety, nie możemy tego zrobić.

Istnieją dwie opcje podnoszenia zdarzenia w Angular JS.

Pierwszym z nich jest wywołanie scope. $ Broadcast, który podnosi zdarzenie w źródłowym zasięgu, a następnie wysyła je do wszystkich zakresów potomnych.

Inną opcją jest wywołanie zakresu. $ emit, który podnosi zdarzenie w źródłowym zakresie, a następnie wysyła je w górę łańcucha zasięgu.

Ale nie ma prawdziwie globalnego sposobu nadawania z zasięgu dziecka. Aby to zrobić, należy zdobyć $ rootScope i wywołać na nim $ broadcast, który wysyła go do wszystkich zakresów potomnych.

Teraz dostosujmy nasz kod, aby działał ze zdarzeniami zamiast dziedziczonych zakresów. Pierwszym problemem, który zauważyliśmy, że chcemy rozwiązać zdarzenie, jest fakt, że tutaj, w kontrolerze katalogu, metoda registerCourse () wywołuje push bezpośrednio na danych harmonogramu. To nie jest jego praca.

Dodawanie elementów do harmonogramu nie jest czymś, co powinien robić kontroler katalogu. Zamiast tego należy powiadomić kogoś, że kurs jest rejestrowany, a następnie zaufać, że inne obiekty dodadzą poprawki do harmonogramu. Zatem przedmiotem, który powinien zajmować się harmonogramem, jest oczywiście kontroler harmonogramu.

Przejdźmy więc do kontrolera harmonogramu i dodaj detektor zdarzeń. Zadzwonimy do naszego zarejestrowanego kursu. Pierwszym parametrem wywołania zwrotnego do zdarzenia jest obiekt zdarzenia, a następnie każdy dodatkowy parametr, który wstawiasz podczas wywoływania zdarzenia.

Planujemy więc, że ktokolwiek wziął udział w wydarzeniu, umieści również kurs, który podniósł to wydarzenie. Następnie możemy tutaj wykonać logikę, którą pierwotnie wykonano w metodzie registerCourse ().

Teraz, zamiast polegać na harmonogramie, aby być już w zakresie $, my zdejmujemy zakres $ i po prostu wprowadzamy zaplanowaną usługę. A ponieważ wprowadzamy tutaj harmonogram, nie musimy już wprowadzać go do naszego kontrolera rejestru.

Możemy więc pobrać tę linię tutaj, przenieść ją do naszego kontrolera harmonogramu, a teraz usunąć tę zależność z kontrolera rejestracji.

To wspaniale, że słuchaliśmy tutaj tego wydarzenia, ale nikt go nie organizuje. Miejsce tutaj w metodzie registerCourse () na kontrolerze katalogu.

Kontroler katalogu nie może wywołać zdarzenia, które może być odsłuchane przez kontroler harmonogramu, ponieważ są rodzeństwem. Musimy więc wprowadzić zależność od $ rootScope.

Następnie możemy wywołać $ rootScope. $ Broadcast () podnosi zdarzenie, którego szukamy i dodaje parametr, który musi znajdować się na tym zdarzeniu.

Teraz mamy kolejną rzecz, którą możemy posprzątać. Właśnie tutaj dzwonimy $ scope.notify, ale już teraz informujemy o tym, że zarejestrowaliśmy kurs. Powinniśmy pozwolić komuś innemu obsłużyć powiadomienie za każdym razem, gdy jakikolwiek kurs zostanie zarejestrowany.

Wróćmy więc do naszego kontrolera rejestracji i dodajmy do niego detektor zdarzeń.

A następnie możemy wywołać kod, aby wykonać powiadomienie. Wydaje się, że bardziej odpowiednie jest to zrobić w kontrolerze rejestracji, ponieważ to miejsce, w którym definiujemy metodę notyfikacji ().

Sprawdźmy to wyjście w przeglądarce i zobaczmy, jak to działa.

Nasze zmiany się sprawdziły.

Teraz przyjrzyjmy się kodowi i przeanalizujmy zalety i wady używania zdarzeń. Pierwszą korzyścią, którą zauważyliśmy, że nam się podoba, jest to, że logika każdego kontrolera ma coś wspólnego z tym kontrolerem.

Kontroler katalogu ma logikę dotyczącą wywołania zdarzenia, gdy ktoś kliknie przycisk Zarejestruj kurs oraz logikę dotyczącą oznaczenia zarejestrowanego kursu. Harmonogram ma logikę dotyczącą dodawania elementów do harmonogramu, a kontroler rejestracji ma logikę dotyczącą powiadomień. Z tego powodu nie mamy kontrolera wprowadzającego usługę, z którą nie mają oni nic wspólnego.

Ponadto nasz kontroler root nie jest zaśmiecony zależnościami, z którymi nie ma nic wspólnego. Istnieje jednak kilka wad. Każdy, kto obsługuje wydarzenie, może je anulować. Może to prowadzić do złych błędów.

Jeśli jakiś konkretny moduł obsługi anuluje zdarzenie, a detektor, który nadal musi usłyszeć o tym zdarzeniu, nie został przetworzony. Łączymy nasz kontroler z tymi wydarzeniami.

Wadą zdarzeń jest to, że używamy ciągu nazwy zdarzenia i trudno jest zapobiec konfliktom nazw zdarzeń.

Jedyną ochroną jest dobra strategia nazewnictwa dla nazw zdarzeń.

Wniosek - zdarzenia AngularJS

  • Eliminuje stan serwera
  • Umożliwia znajomość natywnej aplikacji
  • Łatwo umieszcza logikę widoku w JavaScript
  • Wymaga innowacyjnych informacji o umiejętnościach oraz procedur

Polecane artykuły

Jest to przewodnik po wydarzeniach AngularJS. Tutaj omawiamy podstawy AngularJS i wyjaśniamy zdarzenie AngularJS z przykładami. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

  1. Testowanie jednostek AngularJS
  2. Architektura AngularJS
  3. Dyrektywy AngularJS
  4. Kariera w AngularJS
  5. Top 5 atrybutów zdarzeń HTML z przykładami
  6. Przewodnik po różnych zdarzeniach JavaScript

Kategoria:

Rozwój oprogramowania