Menú

Creeu una aplicació de pàgina única mitjançant AngularJS (tutorial amb exemple)

  • Principal
  • Altres
  • Creeu una aplicació de pàgina única mitjançant AngularJS (tutorial amb exemple)

build single page application using angularjs

Proveu El Nostre Instrument Per Eliminar Problemes

Creeu una aplicació SPA d'una sola pàgina mitjançant AngularJS:

Tot el que necessitem saber sobre AngularJS es va explicar al nostre tutorial anterior. En aquest tutorial, coneixerem més sobre el desenvolupament d’una aplicació d’una sola pàgina mitjançant AngularJS.

Coneixeu Netflix? Heu visitat mai el seu lloc web?

Si la vostra resposta és 'Sí', ja sabreu com és l'aplicació d'una sola pàgina. Exploreu el nostre Guia completa d'AngularJS per obtenir un coneixement clar d’AngularJS.

Aplicació d

Deixeu-me que us expliqui!

Netflix utilitza AngularJS en el marc del client per enriquir les funcionalitats de l’usuari a les seves aplicacions web.

Han fet que la seva interfície d’usuari sigui molt senzilla convertint-la en una SPA (Sol·licitud d'una sola pàgina). Això significa que la navegació a Netflix es realitza sense actualitzar tota la pàgina.

Què aprendreu:

Avantatges de les aplicacions d’una sola pàgina

A continuació es detallen alguns avantatges de les aplicacions de pàgina única.

  • Experiència d'usuari millorada.
  • Les pàgines web s’actualitzen més ràpidament, ja que s’utilitza menys amplada de banda.
  • El desplegament de l'aplicació (index.html, paquet CSS i paquet javascript) a la producció es fa més fàcil.
  • Es pot dividir el codi per dividir els paquets en diverses parts.

Per què desenvolupar un SPA amb AngularJS?

Avui en dia, hi ha moltes aplicacions javascript disponibles al mercat com ember.js, backbone.js, etc. Però, tot i així, moltes aplicacions web incorporen AngularJS en el seu desenvolupament per crear SPA.

A continuació es presenten algunes raons per les quals AngularJS és un clar guanyador:

# 1) No Dependencies

A diferència d’AngularJS, backbone.js té dependències de underscore.js i jQuery. Mentre que, ember JS té dependències del manillar i de jQuery.

com trobar la clau de seguretat de xarxa al meu ordinador

# 2) Encaminament

La navegació entre pàgines web construïdes amb AngularJS és molt senzilla en comparació amb les que es construeixen mitjançant altres frameworks javascript. Les directrius utilitzades a AngularJS són lleugeres, per tant, les mètriques de rendiment d’AngularJS són apreciables.

# 3) Proves

Una vegada que l'aplicació es construeix amb AngularJS, es podrien realitzar proves automàtiques per a la garantia de qualitat mitjançant seleni. Aquesta és una de les funcions fantàstiques de les aplicacions construïdes mitjançant el desenvolupament d’AngularJS.

funcions angularJS

(font de la imatge edureka.co)

# 4) Enllaç de dades

AngularJS admet la vinculació de dades bidireccionals, és a dir, cada vegada que s’actualitza el model, la vista també s’actualitza ja que AngularJS segueix l’arquitectura MVC.

Per tant, l'usuari pot veure les dades en funció de les seves preferències.

# 5) Suport per al navegador

AngularJS és compatible amb la majoria dels navegadors, inclosa la versió 9 de l'IE i posteriors. També es pot adaptar al treball en mòbils, tauletes i portàtils.

# 6) Agilitat

AngularJS admet l'agilitat, cosa que significa que pot atendre les noves peticions de les empreses quan arriben a entorns de treball competitius. Els controladors es poden implementar a l'arquitectura MVC per atendre aquestes sol·licituds.

Hi ha al voltant de 30000 mòduls a AngularJS, que estan fàcilment disponibles per al desenvolupament ràpid d’aplicacions. Quan un desenvolupador vol personalitzar una aplicació existent, pot utilitzar els mòduls que ja estan disponibles i modificar el codi en lloc de crear tota l'aplicació des de zero.

A més, els col·laboradors i experts d'AngularJS són nombrosos, de manera que obtindreu respostes ràpides a qualsevol consulta que publiqueu als fòrums de discussió.

Com es pot desenvolupar una aplicació de pàgina única mitjançant AngularJS?

A continuació, es detallen els diversos passos relacionats amb el desenvolupament d’un SPA mitjançant AngularJS.

Pas 1: Creeu un mòdul

Tots sabem que AngularJS segueix l'arquitectura MVC. Per tant, totes les aplicacions d'AngularJS contenen un mòdul format per controladors, serveis, etc.

var app = angular.module('myApp', ());

Pas 2: definiu un controlador senzill

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

Pas 3: incloeu un script AngularJS al codi HTML

Especifiqueu el mòdul (creat al pas 1) a ng-app i el controlador (definit al pas 2) a el controlador ng atribut.

{{message}}

First Second Third

(Quan Angular detecta les plantilles definides per les directives ng-template, carregarà el seu contingut a la memòria cau de les plantilles i no realitzarà la sol·licitud Ajax per obtenir-ne el contingut.)

Un cop executat l'HTML a localhost, es mostra la pàgina següent.

primera pàgina web

Tingueu en compte que els hiperenllaços Primer, segon, tercer a la pàgina hi ha enrutadors i quan hi feu clic, es realitza la navegació a les pàgines web corresponents, sense actualitzar-les.

segona pàgina web

Tercera pàgina web

Això és! Espero que pugueu crear un SPA senzill com es demostra en aquest bloc. Un cop obtingueu la sortida amb èxit, podeu provar SPA complexes a les mateixes línies.

Conclusió

Actualment, les aplicacions d’una sola pàgina són molt populars, amb marques com Netflix que opten per elles.

Si esteu desenvolupant SPA, AngularJS és l'elecció òbvia. Tot i això, la nova versió d’AngularJS, és a dir, Angular ofereix més funcionalitats. Altrament, hi ha diverses tecnologies com el desenvolupament d'aplicacions Node JS, etc.

Estigueu atent al nostre proper tutorial per explorar l'actualització de la versió angular.

PREV Tutorial | NEXT Tutorial

Lectura recomanada

^