Meny

Bygg en enskild sidapplikation med AngularJS (Handledning med exempel)

  • Huvud
  • Övrig
  • Bygg en enskild sidapplikation med AngularJS (Handledning med exempel)

build single page application using angularjs

Prova Vårt Instrument För Att Eliminera Problem

Bygg ett SPA-applikationsprogram med en sida med AngularJS:

Allt vi behöver veta om AngularJS förklarades i vår tidigare handledning. I den här handledningen kommer vi att lära oss mer om att utveckla en enskild sidapplikation med AngularJS.

Känner du till Netflix? Har du någonsin besökt webbplatsen?

Om ditt svar är ”Ja”, vet du hur en enskild sidapplikation ser ut! Utforska våra Komplett guide till AngularJS för att få en tydlig kunskap om AngularJS.

Enkelapplikation med AngularJS

Låt mig utarbeta!

Netflix använder AngularJS i sitt ramverk på klientsidan för att berika användarfunktionerna i sina webbapplikationer.

De har gjort deras användargränssnitt väldigt enkelt genom att göra det till ett SPA (Applikation för en sida). Detta innebär att navigeringen inom Netflix utförs utan att hela sidan uppdateras.

Vad du kommer att lära dig:

Fördelar med applikationer på en sida

Nedan följer några fördelar med applikationer för enstaka sidor.

  • Förbättrad användarupplevelse.
  • Webbsidor uppdateras snabbare eftersom mindre bandbredd används.
  • Driftsättningen av applikationen - index.html, CSS-paketet och javascript-paketet - i produktion blir enklare.
  • Koddelning kan göras för att dela upp buntarna i flera delar.

Varför utveckla ett SPA med AngularJS?

Numera finns det många javaskriptapplikationer som finns tillgängliga på marknaden som ember.js, backbone.js, etc. Men ändå innehåller många webbapplikationer AngularJS i sin utveckling för att skapa SPA.

Nedan följer några skäl till varför AngularJS är en klar vinnare:

# 1) Inte beroende

Till skillnad från AngularJS har backbone.js beroende av underscore.js och jQuery. Medan JS har beroende av styr och jQuery.

grundläggande frågor om HTML och CSS

# 2) Routing

Navigering mellan webbsidor byggda med AngularJS är väldigt enkelt jämfört med dem som byggs med hjälp av andra javascript-ramar. Direktiven som används i AngularJS är lätta, därför är prestandamätvärdena för AngularJS märkbara.

# 3) Testning

När applikationen har byggts med AngularJS kan automatiserad testning utföras för kvalitetssäkring med selen. Detta är en av de fantastiska funktionerna i applikationer byggda med AngularJS-utveckling.

angularJS-funktioner

(bildkälla edureka.co)

# 4) Databindning

AngularJS stöder tvåvägs databindning, dvs. när modellen uppdateras, blir vyn också uppdaterad eftersom AngularJS följer MVC-arkitekturen.

Följaktligen kan data visas av användaren baserat på hans preferenser.

# 5) Stöd för webbläsaren

AngularJS stöds i de flesta webbläsare inklusive IE version 9 och senare. Det kan också anpassas till att fungera på mobiler, surfplattor och bärbara datorer.

# 6) Smidighet

AngularJS stöder smidighet vilket innebär att den kan tillgodose nya förfrågningar från företag när de kommer in i konkurrenskraftiga arbetsmiljöer. Kontrollerna kan implementeras i MVC-arkitekturen för att betjäna dessa förfrågningar.

Det finns cirka 30000 moduler i AngularJS, som är tillgängliga för snabb applikationsutveckling. När en utvecklare vill anpassa en befintlig applikation kan han använda de moduler som redan är tillgängliga och justera koden istället för att bygga hela applikationen från grunden.

Dessutom är bidragsgivarna och experterna i AngularJS många i antal, därför skulle du få snabba svar på alla frågor som du lägger upp på diskussionsforum

Hur utvecklar jag en enskild sidapplikation med AngularJS?

Nedan listas de olika stegen som är involverade i att utveckla ett SPA med AngularJS.

Steg 1: Skapa en modul

Vi vet alla att AngularJS följer MVC-arkitektur. Därför innehåller varje AngularJS-applikation en modul bestående av styrenheter, tjänster etc.

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

Steg 2: Definiera en enkel kontroller

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

Steg 3: Inkludera AngularJS-skript i HTML-kod

Ange modulen (skapad i steg 1) i ng-app attributet och styrenheten (definierad i steg 2) i ng-styrenheten attribut.

{{message}}

First Second Third

(När Angular upptäcker de mallar som definieras av ng-malldirektiven laddas det innehållet i mallcachen och Ajax-begäran kommer inte att få deras innehåll.)

När HTML körs på localhost visas följande sida.

första webbsidan

Observera att hyperlänkar Första andra tredje på sidan finns routrar och när du klickar på dem sker navigering till motsvarande webbsidor utan att uppdateras.

andra webbsidan

Tredje webbsidan

Det är allt! Hoppas att du kan skapa ett enkelt SPA som visas i den här bloggen. När du har fått utgången framgångsrikt kan du prova komplexa SPA på samma linjer.

Slutsats

Enstaka sidapplikationer är mycket populära idag, varumärken som Netflix väljer dem.

Om du utvecklar SPA är AngularJS det självklara valet. Den nya versionen av AngularJS, dvs. Angular, erbjuder dock fler funktioner. Annars finns det olika tekniker som Node JS applikationsutveckling etc.

Håll dig uppdaterad om vår kommande handledning för att utforska om Upgrading Angular Version!

PREV-handledning | NÄSTA självstudie

Rekommenderad läsning

^