Najlepsze pytania i odpowiedzi rekrutacyjne z Angulara

Kiedyś programiści webowi budowali dynamiczne strony w VanillaJS i jQuery, ale wraz ze wzrostem logiki strony utrzymanie kodu stawało się coraz bardziej uciążliwe. W aplikacjach o złożonej logice programiści musieli wkładać dodatkowy wysiłek w rozdzielenie zadań aplikacji. Do tego jQuery nie daje żadnego sposobu na obsługę danych pomiędzy widokami.

W odpowiedzi na te problemy pojawiły się frameworki działające po stronie klienta, takie jak Angular, które ułatwiły programistom życie, dzieląc zadania i rozbijając kod na mniejsze części (w przypadku Angulara nazywane komponentami).

Frameworki klienckie pozwalają tworzyć zaawansowane aplikacje webowe, na przykład single-page application. Nie znaczy to, że SPA nie da się napisać w VanillaJS - ale spowalnia to proces wytwarzania.

Architektura

• AngularJS korzysta z architektury MVC, czyli model-widok-kontroler, w której model zawiera logikę biznesową, kontroler przetwarza informacje, a widok wyświetla informacje zawarte w modelu.
• Angular zastępuje kontrolery komponentami. Komponenty to nic innego jak dyrektywy z predefiniowanym szablonem.

Język

• AngularJS korzysta z JavaScriptu, czyli języka dynamicznie typowanego.
• Angular korzysta z TypeScriptu, czyli języka statycznie typowanego, będącego nadzbiorem JavaScriptu. Dzięki statycznemu typowaniu Angular daje lepszą wydajność przy tworzeniu większych aplikacji.

Wsparcie dla urządzeń mobilnych

• AngularJS nie zapewnia wsparcia dla urządzeń mobilnych.
• Angular jest wspierany przez wszystkie popularne przeglądarki mobilne.

Struktura

• Przy większych aplikacjach utrzymanie kodu w AngularJS staje się uciążliwe.
• W przypadku Angulara utrzymanie kodu większych aplikacji jest łatwiejsze, bo zapewnia on lepszą strukturę.

Interpolacja ciągów znaków i property binding to elementy wiązania danych (data binding) w Angularze.

Wiązanie danych to funkcja Angulara, która pozwala komunikować się komponentowi (modelowi) z jego widokiem (szablonem HTML).

Wiązanie danych można realizować na dwa sposoby: jednokierunkowo i dwukierunkowo.

W Angularze dane z komponentu można wstawić do szablonu HTML. Przy wiązaniu jednokierunkowym każda zmiana w komponencie zostanie od razu odzwierciedlona w szablonie HTML, ale w drugą stronę już nie. Do tego służy wiązanie dwukierunkowe.

Interpolacja ciągów znaków i property binding pozwalają tylko na wiązanie jednokierunkowe.

Interpolacja ciągów znaków wyświetla dane z komponentu przy użyciu podwójnych nawiasów klamrowych. Angular automatycznie wykona wyrażenie w klamrach - na przykład 4 zostanie obliczone przez Angulara, a wynik 4 pojawi się w szablonie HTML. Dzięki property binding możemy powiązać właściwości DOM elementu HTML z właściwością komponentu. Przy wiązaniu właściwości używa się składni z nawiasami kwadratowymi [].

Wyrażenia Angulara to fragmenty kodu, zwykle umieszczone w wiązaniu, takim jak , podobnie jak w JavaScripcie. Służą do wiązania danych aplikacji z HTML-em.

Szablony Angulara pisze się w HTML-u, który zawiera elementy i atrybuty charakterystyczne dla Angulara. Szablony te są łączone z informacjami z modelu i kontrolera, a następnie przetwarzane, aby dostarczyć użytkownikowi dynamiczny widok.

Adnotacje w Angularze to "tylko" zbiór metadanych klasy tworzony przy użyciu biblioteki Reflect metadata. Służą do zbudowania tablicy "annotations". Dekoratory natomiast to wzorce projektowe, które pozwalają oddzielić dekorowanie lub modyfikowanie klasy bez faktycznej zmiany oryginalnego kodu źródłowego.

Kontrolery to funkcje JavaScriptu, które dostarczają dane i logikę interfejsowi użytkownika w HTML-u. Jak sama nazwa wskazuje, kontrolują przepływ danych z serwera do interfejsu użytkownika.

Scope w Angularze to obiekt odwołujący się do modelu aplikacji. Jest kontekstem wykonania dla wyrażeń. Scope'y są zorganizowane w strukturę hierarchiczną, która odwzorowuje strukturę DOM aplikacji. Mogą śledzić wyrażenia i propagować zdarzenia.

Kluczową cechą Angulara są dyrektywy - to atrybuty, które pozwalają pisać nową składnię HTML charakterystyczną dla Twojej aplikacji. W istocie są to funkcje wykonywane, gdy kompilator Angulara znajdzie je w DOM-ie. Dyrektywy Angulara dzielą się na 3 rodzaje:

1. Dyrektywy komponentów
2. Dyrektywy strukturalne
3. Dyrektywy atrybutów

Interpolacja ciągów znaków w Angularze to specjalna składnia, która wyświetla dane komponentu za pomocą wyrażeń szablonowych w podwójnych nawiasach klamrowych. Bywa nazywana składnią mustache. Wyrażenia JavaScriptu zamyka się w klamrach, aby Angular je wykonał, a wynik trafia do kodu HTML. Wyrażenia te są zwykle aktualizowane i rejestrowane jak zegar, w ramach cyklu digest.

Wiązanie danych to w Angularze jedna z najpotężniejszych i najważniejszych funkcji - pozwala zdefiniować interakcję między komponentem a DOM-em (Document Object Model). Upraszcza to tworzenie interaktywnych aplikacji, bo nie trzeba się martwić o przekazywanie i pobieranie danych między widokiem lub szablonem a komponentem. Angular ma cztery formy wiązania danych:

• Interpolacja ciągów znaków
• Wiązanie właściwości (property binding)
• Wiązanie zdarzeń
• Dwukierunkowe wiązanie danych

Filtry w Angularze służą do formatowania wartości wyrażenia przed pokazaniem jej użytkownikowi. Można je dodawać do szablonów, dyrektyw, kontrolerów i serwisów. Co więcej, możesz tworzyć własne filtry. Dzięki nim łatwo uporządkujesz dane tak, by pojawiały się tylko wtedy, gdy spełniają określone kryteria. Filtry dodaje się do wyrażeń przy użyciu znaku potoku | i nazwy filtra.

Provider to własny serwis w Angularze. Jest instrukcją dla systemu wstrzykiwania zależności, która mówi, jak uzyskać wartość zależności. To obiekt z metodą $ get (), wywoływaną w celu utworzenia nowej instancji serwisu. Provider może też zawierać dodatkowe metody i korzystać z $ provide do rejestrowania nowych providerów.

Tak, Angular obsługuje koncepcję zagnieżdżonych kontrolerów. Aby użyć ich w widoku, trzeba je zdefiniować hierarchicznie.

Oto najczęstsze sposoby komunikacji między modułami aplikacji przy użyciu podstawowych funkcji Angulara:

• Za pomocą zdarzeń
• Za pomocą serwisów
• Przypisywanie modeli do $rootScope
• Bezpośrednio między kontrolerami [$parent, $$childHead, $$nextSibling itd.]
• Bezpośrednio między kontrolerami [ControllerAs lub inne formy dziedziczenia]

Service () w Angularze to funkcja używana w warstwie biznesowej aplikacji. Działa jak funkcja konstruktora i jest wywoływana raz w czasie działania programu przy użyciu słowa kluczowego "new". Z kolei factory () to funkcja działająca podobnie do service (), ale znacznie potężniejsza i bardziej elastyczna. factory () to wzorce projektowe pomagające tworzyć obiekty.

• $ scope w Angularze służy do realizacji koncepcji wstrzykiwania zależności (D.I), natomiast scope służy do wiązania dyrektyw.
• $ scope to serwis dostarczany przez $ scopeProvider, który można wstrzyknąć do kontrolerów, dyrektyw lub innych serwisów, natomiast Scope może być czymkolwiek, na przykład nazwą parametru funkcji.

Obiekty $ scope w Angularze są zorganizowane hierarchicznie i służą przede wszystkim widokom. Hierarchia zawiera scope główny (root), który opcjonalnie może zawierać scope'y potomne. Jeden scope główny może mieć więcej niż jeden scope potomny. Każdy widok ma własny $ scope, więc zmienne ustawione przez jego kontroler pozostają niewidoczne dla innych kontrolerów. Hierarchia scope'ów wygląda zwykle tak:

Główny $scope

• $scope kontrolera 1
• $scope kontrolera 2
• ...
• $scope kontrolera 'n'

AOT to skrót od Angular Ahead-of-Time compiler. Służy do wstępnej kompilacji komponentów aplikacji i ich szablonów podczas budowania. Aplikacje Angulara skompilowane z AOT startują szybciej. Ich komponenty mogą się wykonać natychmiast, bez kompilacji po stronie klienta. Szablony takich aplikacji są osadzone jako kod w komponentach. Ogranicza to konieczność pobierania kompilatora Angulara, co oszczędza sporo pracy. Kompilator AOT potrafi odrzucić nieużywane dyrektywy, które są następnie usuwane narzędziem tree shaking.

jQlite, znane też jako jQuery lite, to podzbiór jQuery zawierający jego funkcjonalność. Jest domyślnie dołączane do Angulara. Pomaga Angularowi manipulować DOM-em w sposób zgodny z różnymi przeglądarkami. jQLite implementuje głównie tylko najczęściej używane funkcje, więc zajmuje niewiele miejsca.

Pętla digest w Angularze to proces monitorowania listy obserwowanych wartości w celu wykrycia zmian zmiennej. W każdym cyklu digest Angular porównuje poprzednie i nowsze wersje wartości modelu scope. Zwykle proces ten uruchamia się niejawnie, ale można go też ręcznie wywołać przez $ apply ().

Wszystkie aplikacje Angulara są modularne i korzystają z systemu modułów znanego jako NgModules. To kontenery zawierające spójny blok kodu przeznaczony dla konkretnej domeny aplikacji, przepływu pracy lub ściśle powiązanego zestawu funkcji. Moduły zwykle zawierają komponenty, providery serwisów i inne pliki kodu, których zasięg wyznacza obejmujący je NgModule. Moduły ułatwiają utrzymanie, testowanie i czytanie kodu. Zwykle też wszystkie zależności aplikacji definiuje się wyłącznie w modułach.

Angular pozwala tworzyć własne dyrektywy dla:

• Dyrektywy elementów - dyrektywa uruchamia się po znalezieniu pasującego elementu.
• Atrybut - dyrektywa uruchamia się po znalezieniu pasującego atrybutu.
• CSS - dyrektywa uruchamia się po znalezieniu pasującego stylu CSS.
• Komentarz - dyrektywa uruchamia się po znalezieniu pasującego komentarza.

Poniżej filtry obsługiwane przez Angulara:

• currency: zamienia liczbę na kwotę w walucie.
• date: formatuje datę we wskazanym formacie.
• filter: wybiera podzbiór elementów z tablicy.
• JSON: zamienia obiekt na ciąg znaków JSON.
• limit: ogranicza tablicę lub ciąg znaków do wskazanej liczby elementów lub znaków.
• lower case: zamienia ciąg znaków na małe litery.
• number: zamienia liczbę na ciąg znaków.
• orderBy: sortuje tablicę według wyrażenia.
• uppercase: zamienia ciąg znaków na wielkie litery.

Wstrzykiwanie zależności (DI) to wzorzec projektowy, w którym obiekty są przekazywane jako zależności, zamiast być zapisane na sztywno w komponencie. Koncepcja ta przydaje się, gdy chcesz oddzielić logikę tworzenia obiektu od logiki jego używania. Operacja "config" korzysta z DI, które trzeba skonfigurować z wyprzedzeniem podczas ładowania modułu, aby pobrać elementy aplikacji. Dzięki temu użytkownik może modyfikować zależności zgodnie ze swoimi wymaganiami.

Przy jednokierunkowym wiązaniu danych widok lub fragment interfejsu nie aktualizuje się automatycznie po zmianie modelu danych. Trzeba samodzielnie napisać kod, który aktualizuje go przy każdej zmianie widoku.

Przy dwukierunkowym wiązaniu danych widok lub fragment interfejsu aktualizuje się automatycznie, gdy tylko zmieni się model danych. W odróżnieniu od wiązania jednokierunkowego jest to proces synchronizacji.

Komponent Angulara ma określony cykl życia, składający się z faz od narodzin do śmierci. Aby lepiej nad nimi panować, możemy się w nie wpiąć przy użyciu:

• constructor: wywoływany, gdy komponent lub dyrektywa powstaje przez wywołanie new na klasie.
• ngOnChanges: wywoływany za każdym razem, gdy zmieni się lub zaktualizuje któraś z właściwości wejściowych komponentu.
• ngOnInit: wywoływany przy inicjalizacji danego komponentu. Ten hook uruchamia się tylko raz w cyklu życia, po pierwszym ngOnChanges.
• ngDoCheck: wywoływany za każdym razem, gdy uruchamiany jest detektor zmian dla danego komponentu. Pozwala zaimplementować własny algorytm wykrywania zmian dla tego komponentu.
• ngOnDestroy: wywoływany tuż przed zniszczeniem komponentu przez Angulara. Możesz w nim wypisać się z observable'i i odpiąć obsługę zdarzeń, aby uniknąć wycieków pamięci.

W Angularze proces digest nazywa się dirty check. Nazwa bierze się stąd, że skanuje on całość w poszukiwaniu zmian. Innymi słowy porównuje nowe wartości ​​w modelu scope z poprzednimi wartościami ​​w scope. Ponieważ wszystkie obserwowane wartości są zawarte w jednej pętli, każda zmiana lub aktualizacja którejkolwiek zmiennej powoduje ponowne przypisanie pozostałych obserwowanych wartości obecnych w DOM-ie. Obserwowana wartość jest w jednej pętli (digest loop), więc każda zmiana wartości dowolnej zmiennej wymusza ponowne przypisanie wartości ​​pozostałych obserwowanych wartości w DOM-ie.

Transpilacja w Angularze to proces konwersji kodu źródłowego z jednego języka programowania na inny. W Angularze zwykle chodzi o konwersję z TypeScriptu na JavaScript. Jest to proces niejawny, zachodzący wewnętrznie.

Aby animować w aplikacji Angulara, trzeba dołączyć specjalną bibliotekę Angulara znaną jako Animate Library, a następnie odwołać się w aplikacji do modułu ngAnimate lub dodać ngAnimate jako zależność wewnątrz modułu aplikacji.