Rutowanie Angular UI i komponenty

Ruter Angular UI powoli integruje wsparcie dla routingu do komponentów Angulara. W tym poście omówimy dlaczego jest to przydatne i jak to zrobić używając zarówno Angular UI Router w wersji 0.x.x jak i 1.0.0-beta.x.

Tło

Wraz z wprowadzeniem komponentów Angulara w wersji 1.5, koncepcja samodzielnego, wielokrotnego użytku zestawu zachowań i widoków stała się łatwiejsza do zdefiniowania niż wcześniej w dyrektywach. Zmiany te obejmują: abstrahowanie zakresu, jawne wiązanie z kontrolerami, dostarczanie haków cyklu życia do kontrolera, a także kilka innych rzeczy.

To pozwoliło na lepszą komponentyzację całych widoków i aplikacji. Z tym przyszło uświadomienie sobie, że strona internetowa jest komponentem składającym się z komponentów.

To powiedziawszy, kierowanie do komponentu stało się pożądanym zachowaniem.

Smart vs Dumb Components

Przed zagłębieniem się w użycie UI Routera do kierowania do komponentów, należy omówić koncepcję inteligentnych i głupich komponentów.

Inteligentny komponent to taki, który jest bardzo świadomy API i danych napędzających widok. Oznacza to, że w swoim kontrolerze, zazwyczaj wykonuje wywołanie usługi podczas inicjalizacji komponentu. Wie, co jest wymagane do wykonania wywołania i odpowiedzi, jakiej powinien oczekiwać od API.

Z drugiej strony, istnieją nieme komponenty, które wiedzą, co zrobić z przekazanym obiektem lub wartością i za jakie interakcje są odpowiedzialne. Zazwyczaj nie wchodzi on w interakcje z żadnymi usługami. Większość interakcji skutkuje wywołaniem zwrotnym do komponentu nadrzędnego w celu przekazania informacji z powrotem do wykorzystania przez inteligentny komponent lub jest związana wyłącznie ze zmianami wyświetlania.

Ze względu na możliwość ponownego użycia, komponenty nieme są zazwyczaj najbardziej wielokrotnego użytku (pomyśl o kontenerach z nagłówkami, paskach nawigacyjnych, polach wyboru itp.) Inteligentne komponenty są świetne do budowania pełnych aplikacji z wysokiego poziomu, ale nie są zbyt konfigurowalne.

Najlepszym sposobem na uczynienie komponentu niemym jest usunięcie wywołań API z kontrolerów i znalezienie sposobu na dostarczenie tych danych za pomocą jakiegoś rodzaju wiązania. Jest to pomocne, jeśli masz już te same dane, których potrzebuje inteligentny komponent, ale nie chcesz wykonywać po nie dwóch wejść na serwer.

Pisanie aplikacji jako komponentu

Wraz z przejściem do aplikacji komponentowych nastąpiła zmiana myślenia związana z tym, jak postrzegamy aplikacje. Całe aplikacje mogą być postrzegane jako komponenty. To faktycznie ma praktyczne zastosowanie. Na przykład, jeśli napiszemy naszą aplikację jako komponent, możemy wziąć samodzielną aplikację webową i potencjalnie umieścić ją w hybrydowym kontenerze webowym i stworzyć z niej aplikację mobilną.

Najlepszym sposobem na napisanie aplikacji jako komponentu jest skorzystanie z zagnieżdżonych widoków w UI Routerze. Może to być czasem trudne, ale pozwala na dużą elastyczność w wymienianiu komponentów w oparciu o stan aplikacji.

Użycie komponentów w definicji stanu przy użyciu szablonu

Pierwsza integracja z komponentami routowalnymi polegała na tym, że zamiast używać właściwości templateUrl w definicji stanu, używano właściwości template. Przykładem tego może być
follows:

Oczywiście, to działa, ale kiedy każdy stan jest zadeklarowany z elementem HTML, który jest po prostu pojedynczym elementem HTML bez atrybutów, zaczyna to być uciążliwe.

Gwarantowane, cała logika i wyświetlanie związane z tym komponentem jest odizolowane i wielokrotnego użytku. Jeśli, na przykład, zdecydujesz się zawinąć myComponent w szablon nawigacji, możesz to teraz zrobić bez konieczności generowania nowego komponentu z szablonu, jeśli ustawisz ten sam stan jako taki:

Wiązanie do komponentów

Jak napisać pełną aplikację jako niemy komponent, gdy wiele z naszych tras musi wykonywać wywołania usług, aby wyświetlić informacje, które użytkownik chce wyświetlić?

Jedną z możliwych odpowiedzi na to pytanie jest pobranie danych niezbędnych do działania komponentu z trasy, a następnie powiązanie ich z komponentem poprzez wiązania komponentu. Istnieją dwa podejścia, aby to zrobić:

1. Stwórz inteligentny komponent, który opakowuje niemy komponent. Jedynym celem inteligentnego komponentu jest wywołanie usługi i prawidłowe powiązanie z komponentem dumb.
2. Użyj funkcjonalności resolve dostarczonej w routerze UI, aby rozwiązać dane bezpośrednio do komponentu dumb.

Istnieją pewne oczywiste kompromisy obu opcji. Z inteligentnym komponentem wrapper, masz dodatkowy komponent do utrzymania. W przypadku rozwiązywania do komponentu za pomocą UI Routera, wiążesz się z możliwościami routera, a także trudniej jest zarządzać obsługą wyjątków.

To powiedziawszy, tworzenie routowalnych komponentów za pomocą wiązań UI Routera jest niezwykle proste, a UI Router jest wystarczająco potężny i zapewnia świetną funkcjonalność do punktu, w którym, jeśli jest w twoim projekcie, prawdopodobnie pozostanie tam aż do pełnego przepisania aplikacji.

Aby związać się z komponentem w stabilnym wydaniu UI Router (0.x.x), UI Router tworzy obiekt $resolve w kontekście, którego użył do skompilowania zawartości ui-view.

To może być użyte do związania się z deklaracją komponentu w template właściwości definicji stanu.

To pozwala nam usunąć zależność UserService z komponentu user. W przypadku tych inteligentnych komponentów, które po prostu wywołują usługę, a następnie wyświetlają informacje, możemy w rzeczywistości wyeliminować również cały kontroler.

Wiązanie z komponentami – 1.0.0-beta.x

Wraz z wydaniem [email protected] do obiektu definicji stanu dodano właściwość component. Pozwala to programiście na bezpośrednie wiązanie się z komponentem zdefiniowanym w module kątowym. Eliminuje to potrzebę posiadania szablonu zawierającego pojedynczy element, jak widzieliśmy w przeszłości.