Muutama kuukausi sitten Kapunahele Wong ja minä mietimme ideoita puhe-ehdotuksista, jotka voisimme tehdä yhdessä. Se oli samoihin aikoihin, kun päätin tutustua Ivyyn, joten ajattelin, että se voisi sopia hyvin puheeksi. Kapunahelellä oli kuitenkin erilainen ajatus:

Kuulin Injector Treesistä ensimmäistä kertaa, joten olin kiinnostunut. Kapunahele jakoi kanssani osan alustavasta tutkimuksestaan, ja sain tietää, että Angular Injectorin riippuvuuksien ratkaisualgoritmi ei ollutkaan niin yksinkertainen kuin olin aiemmin luullut.

Sitä lähtien, kun NgModules otettiin käyttöön Angular 2.0:n 5. julkaisukandidaatissa.0, tarjosin palveluita vain moduulitasolla käyttäen tuttua providers-ominaisuutta:

Vai Angular 6:sta lähtien käyttäen Injectable-dekoraattorin providedIn-ominaisuutta:

Joko niin tai näin, ilmoitin aina palveluni moduulitasolla, enkä koskaan kiinnittänyt kovinkaan paljon huomiota muihin mahdollisuuksiin.

Enter Injector Trees 🌴

Kapunahele ja minä päätimme lähettää Injector Trees -keskustelumme Angular Connectiin. Useita kuukausia myöhemmin seuraava viesti rantautui postilaatikkooni:

Olimme ihan riemuissamme, puheemme hyväksyttiin konferenssiin! 😊

Vietimme seuraavat viikot tutkimalla kaikkia piilossa olevia kulmia siitä, miten riippuvuusinjektio toimii Angularissa. Tässä blogikirjoituksessa aion jakaa joitakin niistä kanssasi.

Aloitus yksinkertaisesti

Aloitamme yksinkertaisella Angular-sovelluksella. Tässä sovelluksessa on ”Kingdom”-palvelu ja yksi komponentti, joka injektoi Kingdomin ja näyttää Kingdomin nimen:

Päädyin käyttämään esimerkissä lohikäärmettä, koska rakastan käyttää niitä puolipisteiden sijasta koodissani.

Tehdäksemme asioista hieman mielenkiintoisempia, maustetaan sovelluksemme Unicorn-komponentilla. Tämä komponentti tulostaa sen kuningaskunnan nimen, jossa se asuu:

Meillä on siis sovelluskomponentti ja sen sisällä yksisarvinen. Hienoa!

Mitä tapahtuu nyt, kun muutamme AppComponent:n määritelmää ja annamme KingdomService:lle eri arvon?

Voimme tehdä tämän lisäämällä komponentti-ilmoitukseen seuraavan rivin:

providers: 

Miten tämä vaikuttaa sovellukseemme? Kokeillaan ja katsotaan:

Kuten näet, arvo, jonka määrittelimme KingdomService:lle AppComponent:ssa, sai etusijan AppModulissamme määriteltyyn palveluun nähden (sitä ei määritelty suoraan siellä, vaan käyttäen providedIn:aa, mutta lopputulos on sama).

Elementtipuu, modulipuu

Syy siihen, että näemme zombeja, on tapa, jolla riippuvuuksien resoluutio toimii Angularissa. Se etsii ensin komponenttien puun ja vasta sitten moduulien puun. Tarkastellaanpa UnicornComponent. Se injektoi instanssin KingdomService konstruktorinsa sisällä:

constructor(public kingdom: KingdomService) {}

Kun Angular luo tämän komponentin, se etsii ensin, onko samalle elementille kuin komponentti määritelty tarjoajia. Nämä palveluntarjoajat on voitu rekisteröidä itse komponenttiin tai direktiivin avulla. Tässä tapauksessa emme ole antaneet mitään arvoa KingdomService:lle UnicornComponent:n sisällä, eikä meillä ole mitään direktiivejä <app-unicorn>-elementissä.

Haku jatkuu sitten elementtipuussa ylöspäin, menemällä AppComponent:een. Täällä Angular havaitsee, että meillä on arvo KingdomService:lle, joten se syöttää tämän arvon ja lopettaa haun siihen. Tässä tapauksessa Angular ei siis edes katsonut moduulipuuhun.

Angular on laiska!

Aivan kuten me ohjelmoijat, myös Angular on viivyttelijä. Se ei luo palveluiden instansseja, ellei sen todella tarvitse. Voit varmistaa tämän lisäämällä KingdomService:n konstruktoriin console.log-lausekkeen (voit myös lisätä alert('I love marquees'), jos tunnet olosi nostalgiseksi tänään).

Voit nähdä, että console.log-lauseketta ei koskaan suoriteta – koska Angular ei luo palvelua. Jos poistat providers:-ilmoituksen AppComponent:stä (tai siirrät sen UnicornComponent:een, jolloin se koskee vain yksisarvista ja sen lapsielementtejä), sinun pitäisi alkaa nähdä lokiviestiä konsolissasi.

Nyt Angularilla ei ole valinnanvaraa – se ei löydä KingdomService:aa etsiessään Elementtipuusta. Niinpä se menee ensin Module Injector Tree -puuhun, näkee, että annoimme palvelun siellä, ja luo lopulta instanssin siitä. Näin ollen konstruktorin sisällä oleva koodi toimii, ja näet sinne laittamasi debug-tulosteen.

Direktiivien hyökkäys!

Mainitsin, että myös direktiivit voivat antaa arvoja riippuvuusinjektiota varten. Kokeillaanpa sitä. Määrittelemme uuden appInvader-direktiivin, joka muuttaa valtakunnan arvon 👾:ksi.
Miksi? Koska ne olivat niin ihania VR + Angular -puheessa, jonka Alex Castillo ja minä pidimme ng-confissa.

Sitten lisäämme toisen <app-unicorn>-elementin ja sovellamme siihen uutta appInvader-direktiiviä:

Odotetusti uusi yksisarvinen asuu 👾:n kingdomissa. Tämä johtuu siitä, että direktiivi antoi arvon KingdomService. Ja kuten edellä selitettiin, Angular aloittaa haun nykyisestä elementistä, tarkastelee komponenttia ja kaikkia direktiivejä, ja vasta jos se ei löydä pyydettyä arvoa sieltä, se jatkaa etenemistä elementtipuussa ylöspäin (ja sitten moduuleissa).

Katsotaanpa jotain hieman monimutkaisempaa:

Sisältöä projisoivan metsän lisääminen sovellukseen!

Lisäämme sovellukseemme uuden Forest-komponentin ja laitamme osan yksisarvisista tämän metsän sisälle, koska siellä yksisarviset asuvat (joku satunnainen kaveri sanoi noin quorassa, joten sen täytyy olla totta).

Metsä-komponentti on yksinkertaisesti säiliö, joka käyttää sisällön projisointia näyttääkseen lapsensa vihreän ”metsäisen” taustan päällä:

Näemme siis AppForest-komponentin elementit ruohotaustalla, ja sen jälkeen kaiken projisoidun sisällön kirkkaan vihreän taustan päällä. Ja koska annoimme sovelluskomponenttimme sisällä arvon KingdomService, kaikki sen sisällä oleva perii sen (paitsi yksi yksisarvinen, jolla on appInvader-direktiivi).

Mutta mitä tapahtuu, jos annamme uuden arvon KingdomService:lle ForestComponent:n sisällä? Saako projisoitu sisältö (joka määriteltiin mallissa AppComponent) myös tämän uuden arvon valtakunnalle? Vai pysyykö se edelleen 🧟 valtakunnassa? Osaatko arvata?

Metsän velho

Lisäämme edelliseen esimerkkiin yhden rivin, joka antaa 🧙-kuningaskunnan ForestComponent:

providers: 

Ja tämä on lopputulos:

Nyt tämä on mielenkiintoista – näemme metsän sisältä sekoituksen kuningaskuntia! Itse metsäelementti asuu 🧙-kuningaskunnassa, mutta projisoidulla sisällöllä näyttää olevan jakautunut persoonallisuus: yksisarviset kuuluvat myös 🧙-kuningaskuntaan, mutta niiden yläpuolella oleva teksti osoittaa 🧟-kuningaskuntaa…

Määrittelimme sekä nämä yksisarviset että tekstin samassa paikassa, app.component.html-mallin riveillä 12-15. Olennaista on kuitenkin se paikka, jossa itse komponentti on luotu DOM:ssa. Teksti rivillä 12 on itse asiassa sama kuin mitä teemme rivillä 4 – luemme saman AppComponent-instanssin kingdom-ominaisuutta. Tämän komponentin DOM-elementti on itse asiassa <app-forest> DOM-elementin esi-isä. Joten kun tämä AppComponent-instanssi luotiin, siihen injektoitiin 🧟-kuningaskunta.

Kaksi <app-unicorn>-elementtiä ovat kuitenkin <app-forest>-DOM-elementtien sisällä, joten kun niiden UnicornComponents-instanssit luodaan, angular itse asiassa menee DOM:iin ylöspäin ja näkee arvon, jonka annoimme KingdomService-ominaisuudelle ForestComponent:n sisäpuolella, ja näin ollen nämä yksisarviset injektoituvat 🧙-kuningaskunnalla.

Voit saavuttaa erilaisen käyttäytymisen, jos muutat providers:n viewProviders:ksi, kun määrittelet ForestComponent:n. Voit oppia lisää View Providersista täältä, ja tutustu myös tähän koodiesimerkkiin, jossa muutin ForestComponent käyttämään View Providersia, joten nyt myös metsän sisällä olevat yksisarviset injektoidaan 🧟-kuningaskunnalla. Kiitos Lars Gyrup Brink Nielsenille, joka huomautti minulle tästä!

Jatkakaa tutkimista!

Toivottavasti opit juuri jotain uutta Angularin Dependency Injection -järjestelmästä. Tämä on vain yksi niistä asioista, joihin Kapunahele ja minä tutustuimme valmistellessamme puhettamme AngularConnectiin. On paljon muutakin – olet tervetullut tutkimaan lisää, ja jaamme myös diat ja linkin videoon puheen jälkeen. Ai niin, ja luvassa on myös live-koodausta. Siitä tulee hauskaa!

Jos haluat oppia lisää Angular Injectorin yksityiskohdista, tässä on muutama artikkeli, joita pidin erittäin hyödyllisinä:

• Mitä olet aina halunnut tietää Angular Dependency Injectionista
• A curious case of the @Host decorator and Element Injectors in Angular
• Hierarchical Dependency Injectors (Angular Docs)

Ja jos osallistut AngularConnectiin, olet tervetullut tervehtimään!