build single page application using angularjs
Bouw een Single Page Application SPA met AngularJS:
Alles wat we moeten weten over AngularJS werd uitgelegd in onze vorige tutorial. In deze tutorial zullen we meer te weten komen over het ontwikkelen van een applicatie met één pagina met AngularJS.
Kent u Netflix? Heeft u ooit haar website bezocht?
Als je antwoord ‘Ja’ is, dan weet je hoe een applicatie met één pagina eruitziet! Ontdek onze Volledige gids voor AngularJS om een duidelijke kennis van AngularJS te krijgen.
Laat me het uitwerken!
Netflix gebruikt AngularJS in zijn client-side framework om de gebruikersfunctionaliteiten in hun webapplicaties te verrijken.
Ze hebben hun gebruikersinterface heel eenvoudig gemaakt door er een SPA (Toepassing op één pagina). Dit betekent dat de navigatie binnen Netflix wordt uitgevoerd zonder de hele pagina te verversen.
Wat je leert:
- Voordelen van toepassingen met één pagina
- Waarom een spa ontwikkelen met AngularJS?
- Hoe een applicatie met één pagina te ontwikkelen met AngularJS?
- Gevolgtrekking
- Aanbevolen literatuur
Voordelen van toepassingen met één pagina
Hieronder zijn enkele voordelen van Single Page Applications.
- Verbeterde gebruikerservaring.
- Webpagina's worden sneller vernieuwd omdat er minder bandbreedte wordt gebruikt.
- De implementatie van de applicatie - index.html, CSS-bundel en javascript-bundel - in productie wordt eenvoudiger.
- Code splitsen kan worden gedaan om de bundels in meerdere delen te splitsen.
Waarom een spa ontwikkelen met AngularJS?
Tegenwoordig zijn er veel javascript-applicaties die op de markt beschikbaar zijn, zoals ember.js, backbone.js, enz. Maar toch nemen veel webapplicaties AngularJS op in hun ontwikkeling om SPA's te creëren.
Hieronder worden enkele redenen gegeven waarom AngularJS een duidelijke winnaar is:
# 1) Geen afhankelijkheden
In tegenstelling tot AngularJS heeft backbone.js afhankelijkheden van underscore.js en jQuery. Terwijl ember JS afhankelijk is van stuur en jQuery.
beste programma om hdd naar ssd te klonen
# 2) Routing
Navigatie tussen webpagina's die zijn gebouwd met AngularJS is heel eenvoudig in vergelijking met webpagina's die zijn gebouwd met andere javascript-frameworks. De richtlijnen die in AngularJS worden gebruikt, zijn licht van gewicht, waardoor de prestatiestatistieken van AngularJS aanzienlijk zijn.
# 3) Testen
Zodra de applicatie is gebouwd met AngularJS, kunnen geautomatiseerde tests worden uitgevoerd voor kwaliteitsborging met behulp van selenium. Dit is een van de geweldige functies van applicaties die zijn gebouwd met behulp van AngularJS-ontwikkeling.
(afbeeldingsbron edureka.co)
# 4) Gegevensbinding
AngularJS ondersteunt gegevensbinding in twee richtingen, d.w.z. telkens wanneer het model wordt bijgewerkt, wordt de weergave ook bijgewerkt omdat AngularJS de MVC-architectuur volgt.
Daarom kunnen de gegevens door de gebruiker worden bekeken op basis van zijn voorkeuren.
# 5) Ondersteuning voor de browser
AngularJS wordt ondersteund in de meeste browsers, inclusief IE-versie 9 en hoger. Het kan ook worden aangepast om te werken op mobiele telefoons, tablets en laptops.
# 6) Behendigheid
AngularJS ondersteunt flexibiliteit, wat betekent dat het kan inspelen op nieuwe verzoeken van bedrijven wanneer en wanneer ze zich in een concurrerende werkomgeving bevinden. De controllers kunnen worden geïmplementeerd in de MVC-architectuur om aan deze verzoeken te voldoen.
Er zijn ongeveer 30.000 modules in AngularJS, die direct beschikbaar zijn voor snelle applicatie-ontwikkeling. Wanneer een ontwikkelaar een bestaande applicatie wil aanpassen, kan hij de modules gebruiken die al beschikbaar zijn en de code aanpassen in plaats van de hele applicatie helemaal opnieuw te bouwen.
Bovendien zijn er veel bijdragers en experts in AngularJS, dus u zou snel antwoord krijgen op alle vragen die u op discussieforums plaatst
Hoe een applicatie met één pagina te ontwikkelen met AngularJS?
Hieronder staan de verschillende stappen vermeld die nodig zijn bij het ontwikkelen van een SPA met gebruikmaking van AngularJS.
Stap 1: Maak een module
We weten allemaal dat AngularJS de MVC-architectuur volgt. Daarom bevat elke AngularJS-applicatie een module die bestaat uit controllers, services, enz.
Stap 2: definieer een eenvoudige controller
Stap 3: neem AngularJS-script op in HTML-code
Specificeer de module (aangemaakt in stap 1) in ng-app attribuut en de controller (gedefinieerd in stap 2) in de ng-controller attribuut.
(Wanneer Angular de sjablonen detecteert die zijn gedefinieerd door de ng-template-richtlijnen, laadt het de inhoud ervan in de sjablooncache en voert het geen Ajax-verzoek uit om hun inhoud op te halen.)
Zodra de HTML op localhost is uitgevoerd, wordt de volgende pagina weergegeven.
Merk op dat de hyperlinks Eerste tweede derde op de pagina staan routers en wanneer u erop klikt, vindt navigatie naar de bijbehorende webpagina's plaats, zonder te vernieuwen.
Dat is het! Ik hoop dat je een eenvoudige SPA kunt creëren, zoals aangetoond in deze blog. Zodra u de uitvoer met succes hebt ontvangen, kunt u complexe SPA's op dezelfde regels uitproberen.
Gevolgtrekking
Single Page-applicaties zijn tegenwoordig erg populair, waarbij merken als Netflix ervoor kiezen.
Als u SPA's ontwikkelt, is AngularJS de voor de hand liggende keuze. De nieuwe versie van AngularJS, d.w.z. Angular, biedt echter meer functionaliteiten. Anders zijn er verschillende technologieën zoals de ontwikkeling van Node JS-toepassingen enz.
Blijf op de hoogte van onze aanstaande tutorial om meer te weten te komen over Upgrading Angular Version!
PREV-zelfstudie VOLGENDE zelfstudie
Aanbevolen literatuur
- Verschil tussen hoekige versies: Angular versus AngularJS
- AngularJS-richtlijn met ons eerste AngularJS-voorbeeld
- Diepgaande Eclipse-zelfstudies voor beginners
- AWS CodeBuild-zelfstudie: code extraheren uit Maven Build
- AngularJS-zelfstudie voor absolute beginners (met installatiehandleiding)
- AWS Elastic Beanstalk-zelfstudie voor het implementeren van .NET-webtoepassingen
- Hoe Application Messaging Queue te testen: IBM WebSphere MQ Intro Tutorial
- Gebruik van Maven Build Automation Tool en Maven Project Setup voor Selenium - Selenium Tutorial # 24