Wróć do strony głównej
Angular

Angular Tips & Tricks cz.IV

Czas na kolejny wpis z serii Angular Tips & Tricks! Tyle tytułem wstępu, ruszamy.

1. AbstractControl i metoda GET

Zdarza się, że model reaktywnego formularza posiada zagnieżdżone obiekty. W celu dobrania się do zagnieżdzonej kontrolki, często spotykam się z następującym, przykładowym kodem (najczęściej na widoku przy obsłudze errorów):

Powyższą formę, możemy zapisać również w skróconej formie:

 

2. Angular CLI i Autoprefixer

Wspierasz inne przeglądarki i pojawia się taki kod w Twoim projekcie?

Jeśli tak, to jest to całkowicie zbędne. Wystarczy wyłącznie:

Angular CLI posiada wbudowany Autoprefixer, który zadba o dodanie odpowiednich prefixów do styli. Możesz również sprecyzować, jakie przeglądarki chcesz wspierać. Więcej szczegółów:

https://github.com/angular/angular-cli/wiki/stories-autoprefixer

3. Obsługa subskrypcji

Warto wiedzieć, że biblioteka RxJS udostępnia nam metodę do dodawania subskrypcji. Jak przeglądam tutoriale / materiały z Angulara, to trafiam z reguły na taki kod:

Można to wykonać w bardziej elegancki i poprawny sposób:

Tworzymy nową instancję Subscription, a następnie do metody ADD, przekazujemy jako parametr nasze subscribes. Dzięki temu, możemy jednym unsubscribe(), odpiąć się od wszystkich subskrypcji, dodatkowo nie dostaniemy błędu, jeśli nie są zdefiniowane.

4. Barrels

Barrel to moduł, który reexportuje wybrane export’y innych modułów.

Często w modułach widzimy podobny kod:

Możemy zoptymalizować nasze importy, za pomocą stworzenia wspomnianego Barrel’a. Tworzymy plik o nazwie index.ts w tym samym katalogu gdzie znajdują się nasze komponenty lub foldery z komponentami (tutaj katalog users), a w nim umieszczamy następujący kod:

index.ts:

A następnie, możemy skonsolidować nasze importy do następującej formy:

5. Angular CLI i pliki spec.

Nie testujesz swojej aplikacji a denerwuje Cię automatyczne tworzenie plików .spec np. dla komponentów?

Wyłącz to w pliku w .angular-cli.json, w obiekcie „defaults”, ustawiając flagę spec na false:

Możesz również pozmieniać inne ustawienia, takie jak np. czy templatka ma być inline etc.

6. Plik tsconfig.json i optymalizacja importów

Często w aplikacji korzystamy np. z jednego serwisu lub jakiegoś pliku konfiguracyjnego na różnych poziomach katalogów. Prowadzi to do sytuacji, że nasz import wygląda następująco:

Warto dodać takie katalogi / pliki jako paths w pliku tsconfig.json:

Należy również pamiętać, że ścieżki w paths są relatywne do baseUrl, czyli w powyższym przykładzie do katalogu src. Dzięki takiemu zabiegowi, możemy importować klasę environment w ten sposób:

7. Komponent jako atrybut

Spójrzmy na poniższy kod:

Przeglądarka oczywiście wyrenderuje nam powyższe rzędy, żaden rocket science. Problem pojawia się, kiedy nasz rząd w tabeli wynosimy do zewnętrznego komponentu (my-tr-cmp):

W tym momencie, nasza tabela się sypie na widoku, gdyż selektor „tr” jest opakowany w selektor komponentu, który zostaje zignorowany. Rozwiązaniem jest wykorzystanie komponentu jako atrybutu:

A następnie na widoku:

Komponent może być również przekazany do widoku jako atrybut, w tym momencie omijamy opakowanie kodu w dodatkowy selektor komponentu i wszystko śmiga w naszej tabeli.

To na tyle, standardowo 7 tipów. Zapraszam również do odwiedzin poprzednich artykułów oraz zachęcam do lajkowania fanpage’a na FB, dzięki temu będziesz na bieżąco ze wszystkimi artykułami.

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

6 komentarzy

  1. Pingback: Angular Tips & Tricks cz. V - Angular.love

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *