SPA met behulp van AngularJS



Deze blogpost is een korte introductie tot het bouwen van een SPA met AngularJS. Het probeert u te wapenen met informatie die nodig is om SPA-componenten in apps op te nemen.

Tegenwoordig is AngularJS een van de meest populaire ontwikkelraamwerken geworden, voornamelijk vanwege het vermogen om ontwikkelaars te helpen eenvoudig Single Page Applications (SPA) te maken. In traditionele webapplicaties initieert de client (browser) een communicatiekanaal met de server door een pagina op te vragen. De server reageert door het verzoek te verwerken en de HTML van de pagina terug te sturen naar de client. Als de gebruiker een nieuwe pagina aanvraagt, stuurt de server een andere HTML-pagina. Zelfs als de klant om een ​​kleine wijziging vraagt, bijvoorbeeld een formulier met basisgegevens, moet de hele pagina opnieuw worden geladen door de server en teruggestuurd naar de klant.

HTML- en Ajax-verzoeken

In toepassingen met één pagina wordt de hele pagina in één keer geladen en de daaropvolgende communicatie wordt uitgevoerd door de server met behulp van Ajax-verzoeken. De browser hoeft alleen het gedeelte van de pagina bij te werken dat is gewijzigd en het is niet nodig om de hele pagina opnieuw te laden telkens wanneer een gebruiker een nieuw verzoek indient.
Omdat de SPA-benadering de tijd verkort die de server nodig heeft om te reageren op verzoeken van gebruikers, werken webtoepassingen sneller, gebruiken ze minder rekenkracht en kunnen gebruikersinterface-ontwikkelaars (UI) aantrekkelijkere, flexibele webpagina's maken.





Oprichting van Shell-pagina's

De ‘enkele pagina’ in SPA verwijst naar een shell-pagina die reageert op vragen in de vorm van HTML, CSS of JavaScript. De shell-pagina wordt asynchroon weergegeven met de HTML, waardoor heen en weer reizen naar de server niet nodig is. De shell-pagina heeft alleen een verwijzing nodig naar de AngularJS JavaScript-bibliotheek en een ng-view-instructie (een virtuele container waarmee UI-ontwikkelaars tussen weergaven kunnen schakelen) om AngularJS te vertellen waar de inhoudspagina's op de shell-pagina moeten worden weergegeven.
Op dezelfde ‘enkele’ pagina stelt AngularJS ontwikkelaars in staat om meerdere weergaven binnen dezelfde URL te bieden. Er kunnen verschillende sets weergaven verschijnen - de een na de ander - binnen dezelfde shell-pagina, en elke weergave wordt dynamisch geladen wanneer de gebruiker door de pagina scrolt.

SPA-using-AngularJS-multiple-views



De ingebouwde AngularJS-richtlijn - ng-app - stelt ontwikkelaars in staat om de app te initialiseren, met de mogelijkheid om ook richtlijnen van derden toe te voegen. De ng-model-richtlijn stelt u daarentegen in staat om gegevensbindende uitdrukkingen aan het geheugen toe te voegen. Kijk dan hier:

relatie tussen java en javascript

Wereldwijd hebben ontwikkelaars SPA aangenomen met behulp van AngularJS en naar alle waarschijnlijkheid zal deze trend nog een tijdje aanhouden.



Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte en we nemen contact met u op.

Gerelateerde berichten: Succesvolle carrière in webontwikkeling met AngularJS