Angular UI Routing and Components

Angular UI Router heeft langzaam ondersteuning geïntegreerd voor routing naar Angular componenten. Deze post zal bespreken waarom dat nuttig is, en hoe het te doen met behulp van zowel Angular UI Router 0.x.x en 1.0.0-beta.x versies.

Achtergrond

Met de introductie van Angular-componenten in versie 1.5, werd het concept van een stand-alone, herbruikbare set van gedragingen en weergaven eenvoudiger te definiëren dan voorheen gedaan in directives. Deze veranderingen zijn onder andere: abstraheren scope, binding aan controllers expliciet, het verstrekken van lifecycle hooks in de controller, evenals een paar andere dingen.

Dit zorgde voor een betere componentization van hele views en applicaties. Daarmee kwam het besef dat een webpagina een component is die bestaat uit componenten.

Dat gezegd hebbende, werd routing naar een component een gewenst gedrag.

Slimme vs domme Componenten

Voordat we ons gaan verdiepen in het gebruik van UI Router om naar componenten te routeren, moet het concept van slimme en domme componenten worden besproken.

Een slimme component is er een die zich zeer bewust is van de API en de gegevens die een view aansturen. Dit betekent dat in de controller, het is meestal het maken van een service call bij de initialisatie van de component. Het weet wat nodig is om de oproep te maken en het antwoord dat het zou moeten verwachten van de API.

Aan de andere kant zijn er domme componenten die weten wat te doen met een doorgegeven object of waarde en welke interacties het verantwoordelijk is voor. Het heeft meestal geen interactie met diensten. De meeste interacties resulteren in een callback naar een bovenliggende component om informatie door te geven die
door een slimme component kan worden gebruikt of zijn puur gerelateerd aan veranderingen in de weergave.

Omwille van herbruikbaarheid zijn domme componenten meestal het meest herbruikbaar (denk aan containers met headers, navigatiebalken, selectievakjes, enzovoort). Slimme componenten zijn geweldig voor het bouwen van volledige toepassingen van een hoog niveau, maar ze zijn niet erg aanpasbaar.

De beste manier om een component dom te maken is om de API-calls uit de controllers te verwijderen en een manier te vinden om die gegevens via een soort binding te verstrekken. Dit is handig als je al dezelfde gegevens die een slimme component nodig heeft, maar niet willen twee hits naar de server voor te maken.

Het schrijven van een applicatie als een component

Met de verschuiving naar componentized toepassingen, was er geest verschuiving met betrekking tot de manier waarop we kijken naar toepassingen. Hele toepassingen kunnen worden gezien als een component. Dit heeft ook praktische toepassingen. Als we bijvoorbeeld onze applicatie als een component schrijven, kunnen we een stand-alone webapplicatie nemen en deze mogelijk in een hybride webcontainer plaatsen en er een mobiele applicatie van maken.

De beste manier om een applicatie als een component te schrijven, is door gebruik te maken van geneste views in UI Router. Dit kan een uitdaging zijn, soms, maar het zorgt voor een grote flexibiliteit in het verwisselen van componenten op basis van
op de toestand van de toepassing.

Gebruik van componenten in State Definition met behulp van sjabloon

De eerste integratie met routable componenten was om, in plaats van het gebruik van een templateUrl eigenschap op de toestand definitie, was om de template eigenschap te gebruiken, in plaats daarvan. Een voorbeeld hiervan zou zijn als
follows:

Obviously, dit werkt, maar wanneer elke staat wordt verklaard met een HTML-element dat is gewoon een enkele HTML-element zonder attributen, het begint te krijgen vervelend.

Getwijfeld, alle van de logica en weergave met betrekking tot die component is geïsoleerd en herbruikbaar. Als u bijvoorbeeld besluit myComponent in een navigatiesjabloon te wikkelen, kunt u dat nu doen zonder dat u een nieuwe component uit een sjabloon hoeft te genereren als u dezelfde toestand als zodanig had ingesteld:

Binding aan Componenten

Hoe schrijven we een volledige toepassing als een domme component, wanneer veel van onze routes service-aanroepen moeten doen om informatie weer te geven die een gebruiker wil bekijken?

Eén mogelijk antwoord hierop is om de gegevens die nodig zijn om de component te laten functioneren vanuit de route op te halen en deze vervolgens via de bindings van de component aan de component te binden. Er zijn twee benaderingen om dit te doen:

1. Creëer een slimme component die een domme component omhult. Het enige doel van de slimme component is om een service-oproep te doen en op de juiste manier te binden aan de domme component.
2. Gebruik de resolve-functionaliteit van de UI router om gegevens rechtstreeks naar de domme component om te zetten.

Er zijn enkele voor de hand liggende nadelen aan beide opties. Met een slimme component wrapper, heb je een extra component te onderhouden. Voor het oplossen naar de component met behulp van UI Router, bind je jezelf aan het vermogen van de router, en het is ook moeilijker om uitzonderingen af te handelen.

Dat gezegd hebbende, het maken van routeerbare componenten via UI Router’s bindings is uiterst eenvoudig, en UI Router is krachtig genoeg en biedt geweldige functionaliteit op het punt waar, als het in uw project zit, het daar waarschijnlijk zal blijven tot een volledige herschrijving van een toepassing.

Om te binden aan een component in de stabiele release van UI Router (0.x.x), maakt UI Router een $resolve object in de context die het heeft gebruikt om de inhoud van de ui-view te compileren.

Dit kan worden gebruikt om te binden aan een component declaratie in de template eigenschap van de toestandsdefinitie.

Dit stelt ons in staat om de UserService afhankelijkheid van de user component te verwijderen. Voor die slimme componenten die eenvoudig een service-oproep doen en vervolgens de informatie weergeven, kunnen we in feite ook een hele controller elimineren.

Binding aan Componenten – 1.0.0-beta.x

Met de release van [email protected], werd de component eigenschap toegevoegd aan het toestandsdefinitie-object. Dit maakt het voor de ontwikkelaar mogelijk om direct te binden aan een component zoals gedefinieerd op de angular module. Het elimineert de noodzaak voor het hebben van een sjabloon met een enkel element zoals we hadden gezien in het verleden.