Kutni i web-dijelovi, k.k.a, kutni elementi

Oko

U ovoj temi želim podijeliti rezultate istraživanja koje sam dobio o Angular 5 i web komponentama. Vidjet ćemo kako možemo stvoriti i koristiti web komponente u kutu 5 i kakve sve prednosti možemo dobiti.

Kutni elementi

Službeno, Angular još ne podržava web komponente, ali postoji ogranak u kutnom spremištu i kad sam ga vidio odlučio se igrati s njim i vidjeti kako će to raditi. Kutni tim je ovaj paket nazvao "@ kutni / elementi". Rezultati istraživanja bili su zaista impresivni, toliko da sam odlučio napisati temu i podijeliti je s vama (nisam bloger i ne pišem previše, ali ovo je istraživanje bilo iznimno!).

Kako stvoriti web komponente

Recimo da želimo stvoriti standardne web komponente koristeći Angular, to je previše jednostavno :), pokažite mi kako:

Prvi korak je kreiranje novog projekta pomoću kutne spone:

`ng new web-components-sample`

Sljedeći je korak dodavanje standardne kutne komponente i dozvolit ćemo je nazvati "poput-gumba":

`ng g komponenta poput gumba`

Prije toga to smo radili svakodnevno, sada moramo na neki način registrirati i izvesti ovu novu komponentu kao web komponentu, da bismo to postigli, trebat ćemo napraviti četiri jednostavna koraka:

  1. Kopirajte klase @ angular / elements iz kutnog spremišta u našem projektu, to moramo učiniti ručno, jer ovaj paket još nije izdan
  2. instalirajte @ webcomponents / custom-elemente i uvezite je u polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  3. promijenite app.module.ts, dodajte sve naše komponente u entryComponents koje želimo postati web komponente, također ćemo morati promijeniti konfiguraciju bootstrap-a poput ove: https://github.com/playerx/angular-elements-sample/blob/ majstor / src / app / app.module.ts
  4. promijenite main.ts poput ove: 'https://github.com/playerx/angular-elements-sample/blob/master/src/main.ts'

To je to, naše standardne kutne komponente postale su web komponente.

Primjer rada možete vidjeti na:

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

(izvorni kod: https://github.com/playerx/angular-elements-sample)

Što se ovdje dogodilo:

  • Umjesto izvoza i korištenja jedne komponente korijena aplikacije, sada možemo imati i koristiti više web komponenti u našoj datoteci index.html ili negdje drugdje
  • Naše standardne komponente mogu biti web komponente jednostavnim registracijom u entryComponents

Kad sam prvi put utvrdio da mislim da je tako jednostavno? da, lagano grašak :) ali to je tek početak istraživanja!

Prije nego što prijeđemo na sljedeći dio, pogledajmo koje se datoteke generiraju:

  • inline.bundle.js - ovo je mala web skripta za učitavanje modula
  • vendor.bundle.js - kutne knjižnice i knjižnice trećih strana
  • polyfills.bundle.js - polifills
  • main.bundle.js - naše komponente
  • styles.bundle.css - na primjer globalni stilovi, stilovi materijala

Kako se koriste web komponente

Stvorili smo web komponentu koja se zove `app-like-button`, sada je upotrijebimo u drugom apsolutno drugom projektu. Napravimo još jedan kutni projekt i napravimo sljedeće korake:

  1. instalirajte @ webcomponents / custom-elemente i uvezite je u polyfills: https://github.com/playerx/angular-elements-sample/blob/master/src/polyfills.ts
  2. omogućite prilagođene sheme u app.module.ts: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.module.ts
  3. počnite koristiti našu novu web komponentu poput ove:
     Ovdje će se učitati komponenta
  4. Učitavanje skripti web komponenata - omogućuje raspravu o ovom dijelu u pojedinostima

Učitajte skripte web komponenata

trebamo učitati sljedeće skripte iz našeg prvog projekta:

  • inline.bundle.js - ovaj će stvoriti "izolirani opseg" knjižnica koji su nam potrebni za web komponente
  • vendor.bundle.js - kutne knjižnice i knjižnice trećih strana koje smo koristili za web komponente
  • main.bundle.js - same komponente

ne učitavamo polyfills.bundle.js i styles.bundle.css i nešto kasnije o tome.

Čim se te skripte učitaju i ubace u naš html, komponenta poput gumba oživi u aplikaciji, „komponenta će se ovdje učitati“ tekst će biti zamijenjen samom komponentom. za demo sam stvorio jednostavan program za učitavanje skripti: https://github.com/playerx/angular-webcomponents-usage-sample/blob/master/src/app/app.component.ts

Kompletan primjer rada možete provjeriti na:

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

(izvorni kod: https://github.com/playerx/angular-webcomponents-usage-sample)

Sada, razgovarajmo o tome koje dodatne prednosti možemo dobiti kombiniranjem kutnih i web komponenti

usmjeravanje

Jedna stvar koja me je zanimala je korištenje moćnih kutnih usmjerenja unutar moje web komponente. Postojao je jedan problem, nisam htio koristiti standardno usmjeravanje jer mijenja URL i ne želim da moja web komponenta mijenja URL, bit će mnogo teško upravljati globalnim usmjeravanjem na ovaj način.

Ono što trebam je nešto što će spremiti informacije o usmjeravanju u memoriju, a to je MockLocationStrategy, ovaj je za testiranje, ali točno odgovara mojim potrebama. U demo projektima možete vidjeti web komponentu s usmjeravanjem - "app-module-shell".

Mislim da ako trebate promijeniti URL dok se web komponenta usmjerava, trebali biste stvoriti događaj i upravljati usmjeravanjem URL-a u glavnoj aplikaciji.

Dom sjene

U ovim primjerima nisam stvorio enkapsulaciju izvornog prikaza, razlog je jednostavan, biblioteka materijala ga trenutno ne podržava (https://github.com/angular/material2/isissue/3386), ali slobodno kreirate komponente s domom sjene, probao sam ga i savršeno funkcionira

theming

Evo mog najdražeg, ako se sjećate da nismo učitali styles.bundle.css u našu novu aplikaciju. Razlog je jednostavan, nismo htjeli temu web komponente jer imamo svoju. I da, možete stvoriti web komponente s materijalnim dizajnom s nekom temom i koristiti je u drugoj aplikaciji, a tema aplikacije bit će primijenjena, pogledajte ovaj primjer:

stvaranje web komponenti - https://angular-elements-sample.now.sh

pomoću njih u drugoj aplikaciji - https://angular-webcomponents-usage-sample.now.sh

pogledajte modul aplikacije nakon što kliknete "Učitaj modul".

poznati problemi

  • Ako koristite web komponentu u drugoj web komponenti u istoj aplikaciji gdje su web komponente deklarirane, bit će prikazane dva puta. Razlog je jednostavan Kutni čini komponentu, a isto tako je i prikazan kao web komponenta. To je poznato pitanje za kutni tim i mislim da će uskoro naći rješenje. Za sada mogu riješiti sljedeće:
     Recimo da imamo modul za kupce i želimo dijeliti neke komponente s drugim modulima, rješavanje će biti stvaranje dva modula:
    1. mušterije-web-komponente - koje će ugostiti sve web komponente
    2. kupci-ljuske - koji će ih koristiti
    3. drugi modul - koji će također koristiti web-komponente za kupce

Rezimirati

Pokušao sam pokazati kako možete stvoriti i upotrebljavati snagu web komponenti i kutnih uglova zajedno, postoji mnogo više scenarija slučaja koji se mogu pokriti miješanjem dviju nevjerojatnih stvari, a ja sam pokrio samo nekoliko njih.

Na kraju biste trebali pogledati video, to je bila prva iskra mog istraživanja.

Evo i radnih primjera:

Izrada web komponenti - https://github.com/playerx/angular-elements-sample

Upotreba web komponenata - https://github.com/playerx/angular-webcomponents-usage-sample

Hvala na čitanju :)