Toți suntem familiarizați cu componentele: cel mai puternic element de construcție din ecosistemul Angular. Componentele sunt locul în care Dom-ul este redat, serviciile sunt injectate, vizualizările sunt redate din nou cu detectarea modificărilor. Componentele pot lua valori ca intrări și pot declanșa evenimente ca ieșiri. Dar problema este că, până acum, acest bloc minunat funcționează doar în interiorul unui ecosistem Angular. Mi-aș dori să putem ajuta umanitatea prin utilizarea componentelor angular chiar și în afara ecosistemului angular.
Da! Începând cu Angular 7, Angular aduce caracteristica „Angular Element”. Acum, o componentă angular poate fi exportată ca o componentă web de sine stătătoare. O putem folosi exact ca pe un tag HTML tipic, cum ar fi div sau span, în orice pagină HTML, CMS sau chiar în interiorul unui proiect React sau Vue.js.
Cum funcționează:
Componenta web este un standard web pentru a defini un nou element HTML personalizat în browser. Browserele mențin un registru numit customElementRegistry . Folosind metoda CustomElementRegistry.define() putem înregistra un „dom string” și o clasă care îi definește comportamentul.
Pachetul @angular/elements de la Angular expune metoda createCustomElement care convertește componenta angular și dependențele sale ca o clasă compatibilă ca o componentă web.
În prezent, standardul web este acceptat de toate browserele Chrome, Firefox, Safari și Opera. De asemenea, îl putem face funcțional și în alte browsere folosind polyfills.
Cazuri de utilizare:
Există cel puțin 3 cazuri de utilizare în care putem face uz de componente angular complet funcționale exportabile ca și componente web:
- Micro front-end
- Migrarea codului de legiferare
- Plug & play componente web pentru servicii terțe
Micro front-end:
Ca și micro-serviciul, există un alt concept similar numit micro-front-end. Într-o arhitectură micro-frontend, o mică echipă full-stack este responsabilă să livreze nu numai API-urile, ci și componentele front-end corespunzătoare acestora. De exemplu, „echipa de produs” va crea API-urile de produs și toate vizualizările legate de produs utilizate în diferite pagini de categorie, pagina de detalii a produsului, pagina de checkout a coșului &. Într-un astfel de caz, toate echipele vor furniza diferite componente web și o echipă front-end va lipi doar acele componente împreună în diferite pagini.
Migrație:
Proiecte scrise în Angular 1.x, migrarea la Angular a fost întotdeauna o provocare. Nu există o vrajă magică ușoară de tip ng update. Același lucru este valabil și în cazul în care cineva dorește să își migreze proiectul la Angular de la React sau Vue. Componentele web sunt cele mai potrivite în acest caz. Aceștia își pot converti treptat componentele/controlerele existente în componente web Angular și le pot înlocui din sistemul existent. Odată ce toate componentele/controlerele sunt convertite, ei pot pur și simplu să înlocuiască sistemul existent cu cel mai recent Angular.
Servicii terțe:
Furnizorii de servicii pot furniza componente web plug & play pentru a fi lipite în site-ul web al clientului lor fără a fi nevoie de inginerie suplimentară.
Deci, se pare că este promițător dacă putem livra de fapt o componentă angular ca o componentă web. Deci, haideți să ne murdărim mâinile cu codificarea efectivă.
Proiect de exemplu:
Iată un exemplu de cod în care scriem o componentă web my-todo-list. FYI puteți verifica întregul cod aici în Github.
Pasul 1: Scrieți componenta și serviciul
- O componentă TodoList pentru a afișa o listă de todos.
- Un TodoService pentru a prelua todo de la un API JSON de tip placeholder.
- Componenta TodoList va primi „nume” ca intrare.
- Componenta TododoList va declanșa evenimentul onTodoComplete atunci când orice todo va fi marcat ca fiind terminat.
Pasul 2: Modificați app.modules pentru a exporta componenta todo-list
- Din moment ce proiectul va fi folosit doar pentru a exporta modulele angular ca o componentă web, nu avem nevoie de bootstrap prin componenta app.
- Trebuie să declarăm componenta noastră exportabilă todo-list ca și componente de intrare.
- Instalați pachetul @angular/elements.
- În interiorul cârligului ngDoBootstrap folosim metoda createCustomElement pentru a compila componenta noastră TodoList ca o componentă web standard.
- Componenta TodoList are dependență de TodoService. Deoarece va fi utilizată în afara ecosistemului angular, trebuie să trecem manual Dependency Injector pentru ca acesta să poată încărca dependențele.
Pasul 3: Bundling
- Acum, dacă executăm build – fișierele vor fi generate în folderul „dist”. Deoarece dorim să folosim acest lucru într-un alt ecosistem mai bine să concatenăm fișierele ca un singur fișier de ieșire. Așadar, adăugați aceste comenzi în secțiunea de script package.json:-
"concat-es5": "concat -o output/output-es5.js ./dist/example-ng-element/runtime-es5.js ./dist/example-ng-element/polyfills-es5.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es5.js","concat-es2015": "concat -o output/output-es2015.js ./dist/example-ng-element/runtime-es2015.js ./dist/example-ng-element/polyfills-es2015.js ./dist/example-ng-element/scripts.js ./dist/example-ng-element/main-es2015.js","concat": "npm run concat-es5 && npm run concat-es2015","build": "ng build --prod --output-hashing=none && npm run concat",
- Acum, dacă executăm comanda npm run build vor fi generate două fișiere separate output-es5.js și output-es2015.js în interiorul dosarului de ieșire.
Pasul 4: Use as a web component
- Acum totul este pregătit. Putem folosi aceste fișiere de ieșire ca și componenta noastră web autonomă, astfel:-
- Dacă rulăm această pagină HTML, putem vedea că lista de sarcini va fi preluată și afișată.
- Am trecut numele ca intrare, putem vedea numele în interiorul componentei web – ceea ce înseamnă că intrarea componentei, detectarea modificărilor funcționează!
- După ce bifăm/deconfirmăm orice todo, se declanșează un eveniment și datele todo vor fi înregistrate în consolă. Deci, evenimentul de ieșire funcționează și el!
Așa că, în felul acesta, putem folosi o componentă angular în orice alt proiect. Puteți încerca voi înșivă clonarea codului de pe Github.
Ref:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
- https://angular.io/guide/elements
.