Meny

Bygg applikasjon med én side ved hjelp av AngularJS (veiledning med eksempel)

  • Hoved
  • Annen
  • Bygg applikasjon med én side ved hjelp av AngularJS (veiledning med eksempel)

build single page application using angularjs

Prøv Instrumentet Vårt For Å Eliminere Problemer

Bygg en enkeltsides applikasjon SPA ved hjelp av AngularJS:

Alt vi trenger å vite om AngularJS ble forklart i vår forrige opplæring. I denne opplæringen vil vi lære mer om å utvikle en enkeltsidesapplikasjon ved hjelp av AngularJS.

Vet du om Netflix? Har du noen gang besøkt nettstedet?

Hvis svaret ditt er 'Ja', vet du hvordan en enkeltsidesøknad ser ut! Utforsk vår Komplett guide til AngularJS for å få en klar kunnskap om AngularJS.

Enkeltsidig applikasjon ved bruk av AngularJS

La meg utdype det!

Netflix bruker AngularJS i sitt rammeverk for å berike brukerfunksjonalitetene i webapplikasjonene sine.

De har gjort brukergrensesnittet veldig enkelt ved å gjøre det til et SPA (Enkeltsidesøknad). Dette betyr at navigasjonen i Netflix utføres uten å oppdatere hele siden.

Hva du vil lære:

Fordeler med applikasjoner på en side

Nedenfor er noen få fordeler med applikasjoner med én side.

  • Forbedret brukeropplevelse.
  • Nettsider oppdateres raskere ettersom mindre båndbredde blir brukt.
  • Distribusjonen av applikasjonen - index.html, CSS-pakke og javascript-pakke - i produksjon blir enklere.
  • Kodedeling kan gjøres for å dele buntene i flere deler.

Hvorfor utvikle et SPA ved hjelp av AngularJS?

I dag er det mange javascript-applikasjoner som er tilgjengelige i markedet som ember.js, backbone.js, etc. Men likevel, mange webapplikasjoner innlemmer AngularJS i utviklingen for å lage SPAer.

Nedenfor er det få grunner til at AngularJS er en klar vinner:

# 1) Ikke avhengigheter

I motsetning til AngularJS har backbone.js avhengigheter av understrek.js og jQuery. Mens Jember har avhengighet av styr og jQuery.

grunnleggende html og css intervju spørsmål

# 2) Routing

Navigering mellom nettsider bygget med AngularJS er veldig enkelt sammenlignet med de som er bygget ved hjelp av andre javascript-rammer. Direktivene som brukes i AngularJS er lette, og derfor er ytelsesberegningene til AngularJS merkbare.

# 3) Testing

Når applikasjonen er bygget med AngularJS, kan automatisert testing utføres for kvalitetssikring ved bruk av selen. Dette er en av de fantastiske funksjonene i applikasjoner som er bygd ved bruk av AngularJS-utvikling.

angularJS funksjoner

(bildekilde edureka.co)

# 4) Databinding

AngularJS støtter toveis databinding, dvs. når modellen oppdateres, blir visningen også oppdatert da AngularJS følger MVC-arkitektur.

Derfor kan dataene vises av brukeren, basert på hans preferanser.

# 5) Støtte for nettleseren

AngularJS støttes i de fleste nettlesere, inkludert IE versjon 9 og nyere. Den kan også tilpasse seg arbeidet på mobiltelefoner, nettbrett og bærbare datamaskiner.

# 6) Smidighet

AngularJS støtter smidighet, noe som betyr at den kan imøtekomme nye forespørsler fra bedrifter når og når de kommer opp i konkurransedyktige arbeidsmiljøer. Kontrollerne kan implementeres i MVC-arkitekturen for å betjene disse forespørslene.

Det er rundt 30000 moduler i AngularJS, som er lett tilgjengelige for rask applikasjonsutvikling. Når en utvikler ønsker å tilpasse et eksisterende program, kan han bruke modulene som allerede er tilgjengelige og tilpasse koden i stedet for å bygge hele applikasjonen fra bunnen av.

Videre er bidragsyterne og ekspertene i AngularJS mange i antall, og derfor vil du få raske svar på spørsmål du legger ut på diskusjonsfora.

Hvordan utvikle en enkeltsidesapp med AngularJS?

Nedenfor er de forskjellige trinnene involvert i å utvikle et SPA ved hjelp av AngularJS.

Trinn 1: Lag en modul

Vi vet alle at AngularJS følger MVC-arkitektur. Derfor inneholder alle AngularJS-applikasjoner en modul som består av kontrollere, tjenester osv.

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

Trinn 2: Definer en enkel kontroller

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

Trinn 3: Inkluder AngularJS-skript i HTML-kode

Spesifiser modulen (opprettet i trinn 1) i ng-app attributt og kontrolleren (definert i trinn 2) i ng-kontrolleren Egenskap.

{{message}}

First Second Third

(Når Angular oppdager malene som er definert av ng-maldirektivene, vil den laste innholdet til malbufferen og vil ikke utføre Ajax-forespørsel om å få innholdet.)

Når HTML-en kjøres på localhost, vises neste side.

første webside

Observer at hyperkoblingene Første andre tredje på siden er rutere, og når du klikker på dem, skjer navigering til de tilsvarende websidene uten å bli oppdatert.

andre webside

Tredje webside

Det er det! Håper du kan lage et enkelt SPA som vist i denne bloggen. Når du har fått utdataene vellykket, kan du prøve komplekse SPAer på de samme linjene.

Konklusjon

Enkeltsidesapplikasjoner er veldig populære i dag, med merker som Netflix som velger dem.

Hvis du utvikler SPA, er AngularJS det åpenbare valget. Imidlertid tilbyr den nye versjonen av AngularJS, dvs. Angular, flere funksjoner. Ellers er det forskjellige teknologier som Node JS applikasjonsutvikling etc.

Følg med på vår kommende veiledning for å utforske om oppgradering av kantet versjon!

PREV Opplæring | NESTE veiledning

Anbefalt lesing

^