Angular UI Routing and Components

Angular UI Router a integrat încet-încet suportul pentru rutarea către componentele Angular. Această postare va discuta de ce este util acest lucru și cum se poate face folosind ambele versiuni Angular UI Router 0.x.x și 1.0.0-beta.x.

Background

Cu introducerea componentelor Angular în versiunea 1.5, conceptul de set de comportamente și vizualizări de sine stătătoare și reutilizabile a devenit mai ușor de definit decât se făcea anterior în directive. Aceste schimbări includ: abstractizarea domeniului de aplicare, legarea la controlori în mod explicit, furnizarea de cârlige de ciclu de viață în controlor, precum și alte câteva lucruri.

Aceasta a permis o mai bună componentizare a unor vizualizări și aplicații întregi. Odată cu aceasta a venit și realizarea faptului că o pagină web este o componentă formată din componente.

Acestea fiind spuse, direcționarea către o componentă a devenit un comportament dorit.

Componente inteligente vs. componente proaste

Înainte de a aprofunda utilizarea UI Router pentru a direcționa către componente, ar trebui discutat conceptul de componente inteligente și proaste.

O componentă inteligentă este una care este foarte conștientă de API și de datele care conduc o vizualizare. Acest lucru înseamnă că, în controlerul său, face de obicei un apel de serviciu la inițializarea componentei. Aceasta știe ce este necesar pentru a efectua apelul și răspunsul pe care ar trebui să îl aștepte de la API.

Pe de altă parte, există componente stupide care știu ce să facă cu un obiect sau o valoare transmisă și de ce interacțiuni este responsabilă. De obicei, nu interacționează cu niciun serviciu. Majoritatea interacțiunilor au ca rezultat un callback către o componentă părinte pentru a transmite informațiile înapoi pentru a fi folosite
de către o componentă inteligentă sau sunt legate pur și simplu de modificările de afișare.

De dragul reutilizării, componentele stupide sunt de obicei cele mai reutilizabile (gândiți-vă la containere cu antet, bare de navigare, casete de selectare etc.). Componentele inteligente sunt excelente pentru a construi aplicații complete de la un nivel înalt, dar nu sunt foarte personalizabile.

Cel mai bun mod de a face o componentă proastă este de a elimina apelurile API din controlori și de a găsi o modalitate de a furniza acele date printr-un fel de legătură. Acest lucru este util dacă aveți deja aceleași date de care are nevoie o componentă inteligentă, dar nu doriți să faceți două apeluri la server pentru ele.

Scrierea unei aplicații ca o componentă

Cu trecerea la aplicații cu componente, a avut loc o schimbare de mentalitate legată de modul în care vedem aplicațiile. Aplicații întregi pot fi privite ca o componentă. Acest lucru are de fapt cazuri de utilizare practică. De exemplu, dacă ne scriem aplicația ca o componentă, putem să luăm o aplicație web de sine stătătoare și, eventual, să o punem într-un container web hibrid și să facem din ea o aplicație mobilă.

Cel mai bun mod de a scrie o aplicație ca o componentă este de a profita de vizualizările imbricate în UI Router. Acest lucru poate fi o provocare, uneori, dar permite o mare flexibilitate în schimbarea componentelor pe baza
la starea aplicației.

Utilizarea componentelor în definirea stării folosind șablonul

Prima integrare cu componente rutabile a fost ca, în loc de a folosi o proprietate templateUrl în definirea stării, să se folosească în schimb proprietatea template. Un exemplu ar fi următorul:
Un exemplu ar fi următorul:

Evident, acest lucru funcționează, dar atunci când fiecare stare este declarată cu un element HTML care este pur și simplu un singur element HTML fără atribute, începe să devină plictisitor.

Gratuit, toată logica și afișarea legată de acea componentă este izolată și reutilizabilă. Dacă, de exemplu, decideți să înfășurați myComponent într-un șablon de navigare, acum puteți face acest lucru fără a fi nevoie să generați o nouă componentă dintr-un șablon dacă ați configurat aceeași stare ca atare:

Binding to Components

Cum scriem o aplicație completă ca o componentă stupidă, când multe dintre rutele noastre trebuie să facă apeluri de serviciu pentru a afișa informațiile pe care un utilizator dorește să le vizualizeze?

Un posibil răspuns la această problemă este să rezolvăm datele necesare pentru ca componenta să funcționeze din rută și apoi să le legăm în componentă prin intermediul legăturilor componentei. Există două abordări pentru a face acest lucru:

1. Crearea unei componente inteligente care înfășoară o componentă stupidă. Singurul scop al componentei inteligente este de a efectua un apel de serviciu și de a se lega în mod corespunzător la componenta proastă.
2. Utilizați funcționalitatea de rezolvare furnizată în routerul UI pentru a rezolva datele direct în componenta proastă.

Există unele compromisuri evidente pentru ambele opțiuni. Cu un wrapper de componentă inteligentă, aveți o componentă suplimentară de întreținut. Pentru rezolvarea la componentă folosind UI Router, vă legați de capacitatea routerului și, de asemenea, este mai dificil de gestionat gestionarea excepțiilor.

Acestea fiind spuse, crearea de componente care pot fi rutate prin intermediul legăturilor UI Router este extrem de simplă, iar UI Router este suficient de puternic și oferă o funcționalitate grozavă până la punctul în care, dacă se află în proiectul dumneavoastră, probabil că va rămâne acolo până la o rescriere completă a unei aplicații.

Pentru a se lega la o componentă în versiunea stabilă a UI Router (0.x.x), UI Router creează un obiect $resolve în contextul pe care l-a folosit pentru a compila conținutul ui-view.

Acesta poate fi folosit pentru a se lega la o declarație de componentă în proprietatea template a definiției de stare.

Acest lucru ne permite să eliminăm dependența UserService din componenta user. Pentru acele componente inteligente care pur și simplu fac un apel de serviciu și apoi afișează informațiile, putem de fapt să eliminăm și un întreg controler.

Binding to Components – 1.0.0-beta.x

Cu ocazia lansării [email protected], proprietatea component a fost adăugată la obiectul de definire a stării. Aceasta permite dezvoltatorului să se lege direct la o componentă, așa cum este definită în modulul angular. Aceasta elimină necesitatea de a avea un șablon care să conțină un singur element, așa cum am văzut în trecut.

.