SPA utilitzant AngularJS



Aquesta entrada al bloc és una breu introducció a la construcció d’un SPA mitjançant AngularJS. Intenta armar-vos la informació necessària per incorporar components SPA a les aplicacions.

Avui en dia, AngularJS s’ha convertit en un dels marcs de desenvolupament més populars principalment per la seva capacitat d’ajudar els desenvolupadors a crear aplicacions de pàgina única (SPA) amb facilitat. A les aplicacions web tradicionals, el client (navegador) inicia un canal de comunicació amb el servidor sol·licitant una pàgina. El servidor respon processant la sol·licitud i enviant l'HTML de la pàgina al client. Si l'usuari sol·licita una pàgina nova, el servidor envia una altra pàgina HTML. Fins i tot si el client sol·licita un petit canvi, diguem un formulari amb detalls bàsics, el servidor ha de tornar a carregar tota la pàgina i enviar-lo de nou al client.

Sol·licituds HTML i Ajax

A les aplicacions d'una sola pàgina, tota la pàgina es carrega d'una sola vegada i la comunicació posterior es realitza pel servidor mitjançant sol·licituds Ajax. El navegador només ha d’actualitzar la part de la pàgina que ha canviat i no cal tornar a carregar la pàgina sencera cada vegada que un usuari fa una nova sol·licitud.
Atès que l'enfocament SPA redueix el temps que pren el servidor per respondre a les sol·licituds dels usuaris, les aplicacions web s'executen més ràpidament, utilitzen menys potència de càlcul i permeten als desenvolupadors de la interfície d'usuari crear pàgines web més atractives i àgils.





Creació de pàgines Shell

La 'pàgina única' a SPA fa referència a una pàgina d'intèrpret d'ordres que respon a consultes en forma d'HTML, CSS o JavaScript. La pàgina de l'intèrpret d'ordres es representa de manera asíncrona amb l'HTML, eliminant la necessitat de viatjar d'anada i tornada al servidor. La pàgina de l'intèrpret d'ordres només necessita una referència a la biblioteca JavaScript d'AngularJS i una directiva ng-view (un contenidor virtual que permet als desenvolupadors d'interfície d'usuari canviar entre visualitzacions) per indicar a AngularJS on s'han de representar les pàgines de contingut a la pàgina de l'intèrpret d'ordres.
Dins de la mateixa pàgina 'única', AngularJS permet als desenvolupadors proporcionar diverses visualitzacions incloses en el mateix URL. Poden aparèixer diferents conjunts de vistes, un darrere l’altre, dins de la mateixa pàgina d’intèrpret d’ordres, i cada vista es carrega dinàmicament quan l’usuari es desplaça per la pàgina.

SPA-using-AngularJS-multiple-views



La Directiva AngularJS integrada (ng-app) permet als desenvolupadors inicialitzar l’aplicació, amb l’opció d’afegir directives de tercers. La Directiva sobre el model ng, d'altra banda, permet afegir expressions de vinculació de dades a la memòria. Mireu aquí:

com aprendre estudi visual

A nivell mundial, els desenvolupadors han adoptat SPA mitjançant AngularJS i, amb tota probabilitat, s’espera que aquesta tendència duri un temps.



Tens alguna pregunta? Esmenta’l a la secció de comentaris i et respondrem.

Articles Relacionats: Carrera amb èxit en desenvolupament web amb AngularJS