Komponenty kątowe i sieciowe, np. Elementy kątowe

O

W tym temacie chcę podzielić się wynikami badań, które mam na temat Angulara 5 i komponentów internetowych. Zobaczymy, jak możemy tworzyć i wykorzystywać komponenty sieciowe w Angular 5 i jakie korzyści możemy uzyskać.

Elementy kątowe

Oficjalnie Angular nie obsługuje jeszcze komponentów internetowych, ale w repozytorium kątowym jest gałąź, a kiedy ją zobaczyłem, postanowiłem z nią zagrać i zobaczyć, jak będzie działać. Zespół Angular nazwał ten pakiet „@ angular / elements”. Wyniki badań były naprawdę imponujące, do tego stopnia, że ​​postanowiłem napisać temat i podzielić się nim z tobą (nie jestem blogerem i nie piszę za dużo, ale te badania były wyjątkowe!).

Jak tworzyć komponenty sieciowe

Powiedzmy, że chcemy tworzyć standardowe komponenty internetowe za pomocą Angulara, to zbyt proste :) pokażę, jak:

Pierwszym krokiem jest utworzenie nowego projektu za pomocą kątowego cli:

„ng nowych komponentów internetowych”

Następnym krokiem jest dodanie standardowego komponentu kątowego i nazwanie go „przyciskiem podobnym”:

„ng g podobny do przycisku”

Wcześniej było to zwykłe działanie, które robimy codziennie, teraz musimy jakoś zarejestrować i wyeksportować ten nowy komponent jako komponent internetowy, aby to osiągnąć, musimy wykonać cztery proste kroki:

  1. skopiuj klasy @ angular / elements z repozytorium kątowego w naszym projekcie, musimy to zrobić ręcznie, ponieważ ten pakiet nie został jeszcze wydany
  2. zainstaluj @ webcomponents / custom-elements i zaimportuj go do polifill: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. zmień app.module.ts, dodaj wszystkie nasze komponenty w entryComponents, które chcemy stać się komponentami internetowymi, również będziemy musieli zmienić konfigurację bootstrap w następujący sposób: https://github.com/playerx/angular-elements-sample/blob/ master / src / app / app.module.ts
  4. zmień main.ts w następujący sposób: „https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts”

To wszystko, nasze standardowe komponenty kątowe stały się komponentami sieciowymi.

Przykład działania można zobaczyć na:

https://angular-elements-sample.now.sh

(kod źródłowy: https://github.com/playerx/angular-elements-sample)

Co się tu stało:

  • Zamiast eksportować i używać jednego komponentu głównego aplikacji, możemy teraz mieć i używać wielu komponentów internetowych w naszym pliku index.html lub w innym miejscu
  • Nasze standardowe komponenty mogą być komponentami sieciowymi, po prostu rejestrując je w entryComponents

Kiedy po raz pierwszy odkryłem, że tak proste? tak, łatwa peasy :) ale to dopiero początek badań!

Zanim przejdziemy do następnej części, zobaczmy, jakie pliki są generowane:

  • inline.bundle.js - jest to mały skrypt pakietu sieciowego do ładowania modułów
  • vendor.bundle.js - biblioteki kątowe i biblioteki stron trzecich
  • polyfills.bundle.js - polyfills
  • main.bundle.js - nasze komponenty
  • styles.bundle.css - style globalne, na przykład style materiałowe

Jak korzystać ze składników sieciowych

Stworzyliśmy komponent internetowy o nazwie „przycisk podobny do aplikacji”, teraz wykorzystajmy go w innym zupełnie innym projekcie. Utwórzmy kolejny projekt kątowy i wykonaj następujące kroki:

  1. zainstaluj @ webcomponents / custom-elements i zaimportuj go do polifill: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. włącz niestandardowe schematy w app.module.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. zacznij korzystać z naszego nowego komponentu internetowego:
      zostanie wczytany tutaj
  4. Wczytaj skrypty komponentu WWW - szczegółowo omówimy tę część

Załaduj skrypty komponentów WWW

musimy załadować następujące skrypty z naszego pierwszego projektu:

  • inline.bundle.js - ten utworzy „izolowany zakres” bibliotek, których potrzebujemy do komponentów internetowych
  • vendor.bundle.js - biblioteki kątowe i biblioteki innych firm, które wykorzystaliśmy do tworzenia komponentów internetowych
  • main.bundle.js - same komponenty

nie ładujemy polyfills.bundle.js i styles.bundle.css i trochę później.

gdy tylko te skrypty zostaną załadowane i wprowadzone do naszego html, komponent przycisku podobny do aplikacji ożyje, „komponent zostanie załadowany tutaj” tekst zostanie zastąpiony samym komponentem. do wersji demonstracyjnej stworzyłem prosty moduł ładujący skrypty: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Możesz sprawdzić pełny przykład działania na:

https://angular-webcomponents-usage-sample.now.sh/

(kod źródłowy: https://github.com/playerx/angular-webcomponents-usage-sample)

Teraz omówimy, jakie dodatkowe korzyści możemy uzyskać dzięki połączeniu komponentów kątowych i sieciowych

Wytyczanie

Jedną z rzeczy, które mnie zainteresowały, jest użycie wydajnego routingu kątowego wewnątrz mojego komponentu sieciowego. Był jeden problem, nie chciałem używać standardowego routingu, ponieważ zmienia on adres URL i nie chcę, aby mój komponent internetowy zmieniał adres URL, zarządzanie routingiem globalnym w ten sposób będzie bardzo trudne.

Potrzebuję czegoś, co pozwoli zapisać informacje o routingu w pamięci i to jest MockLocationStrategy, ta jest do testowania, ale dokładnie odpowiada moim potrzebom. W projektach demonstracyjnych można zobaczyć komponent internetowy z routingiem - „shell-moduł aplikacji”.

Myślę, że jeśli musisz zmienić adres URL podczas routingu komponentu internetowego, powinieneś utworzyć zdarzenie i obsłużyć routing adresu URL w głównej aplikacji.

Shadow Dom

W tych przykładach nie utworzyłem natywnego hermetyzacji widoku, powód jest prosty, biblioteka materiałów obecnie go nie obsługuje (https://github.com/angular/material2/issues/3386), ale możesz swobodnie tworzyć komponenty z shadow dom, wypróbowałem to i działa idealnie

Theming

Oto mój ulubiony, jeśli pamiętasz, że nie załadowaliśmy styles.bundle.css w naszej nowej aplikacji. Powód jest prosty, nie chcieliśmy mieć motywu komponentu internetowego, ponieważ mamy swój. I tak, możesz tworzyć komponenty internetowe z materiałem z pewnym motywem i używać go w innej aplikacji, a motyw aplikacji zostanie zastosowany, sprawdź ten przykład:

tworzenie komponentów internetowych - https://angular-elements-sample.now.sh

używając ich w innej aplikacji - https://angular-webcomponents-usage-sample.now.sh

sprawdź powłokę modułu aplikacji po kliknięciu „Załaduj moduł”.

Znane problemy

  • Jeśli użyjesz komponentu WWW w innym komponencie WWW w tej samej aplikacji, w której zadeklarowano komponenty WWW, zostaną one renderowane dwa razy. Powód jest prosty Angular renderuje komponent, a także jest renderowany jako komponent WWW. Jest to znany problem dla zespołu Angular i myślę, że wkrótce będzie rozwiązanie. Na razie jako obejście problemu mogę zasugerować:
     Powiedzmy, że mamy moduł klientów i chcemy udostępnić niektóre komponenty innym modułom, obejściem będzie utworzenie dwóch modułów:
    1. klienci-komponenty internetowe - które będą hostować wszystkie komponenty internetowe
    2. shell-klientów - który ich wykorzysta
    3. inny moduł - który będzie również wykorzystywał komponenty internetowe klienta

Podsumować

Próbowałem zademonstrować, w jaki sposób można tworzyć i wykorzystywać moc komponentów sieciowych i kątowych. Istnieje wiele innych przypadków, które można rozwiązać, łącząc te dwa niesamowite rzeczy. Omówiłem tylko kilka z nich.

Powinieneś sprawdzić film na końcu, był to pierwszy błysk moich badań.

Oto także przykłady działania:

Tworzenie komponentów internetowych - https://github.com/playerx/angular-elements-sample

Korzystanie ze składników sieci - https://github.com/playerx/angular-webcomponents-usage-sample

Dziękuje za przeczytanie :)