Menu

Byg applikation til en enkelt side ved hjælp af AngularJS (vejledning med eksempel)

  • Vigtigste
  • Andet
  • Byg applikation til en enkelt side ved hjælp af AngularJS (vejledning med eksempel)

build single page application using angularjs

Prøv Vores Instrument Til At Fjerne Problemer

Byg et SPA-program til en enkelt side ved hjælp af AngularJS:

Alt hvad vi behøver at vide om AngularJS blev forklaret i vores tidligere tutorial. I denne vejledning lærer vi mere at vide om udvikling af en enkelt sideapplikation ved hjælp af AngularJS.

Kender du til Netflix? Har du nogensinde besøgt dets websted?

Hvis dit svar er 'Ja', ved du, hvordan en enkelt sideapplikation ser ud! Udforsk vores Komplet guide til AngularJS for at få et klart kendskab til AngularJS.

Enkeltsidet applikation ved hjælp af AngularJS

Lad mig uddybe!

Netflix bruger AngularJS i sin klienterside til at berige brugerfunktionaliteterne i deres webapplikationer.

De har gjort deres brugergrænseflade meget enkel ved at gøre det til et SPA (Enkeltsidet applikation). Dette betyder, at navigationen inden for Netflix udføres uden at opdatere hele siden.

Hvad du vil lære:

Fordele ved applikationer med en enkelt side

Nedenfor er der få fordele ved applikationer med en enkelt side.

  • Forbedret brugeroplevelse.
  • Websider opdateres hurtigere, da der bruges mindre båndbredde.
  • Implementeringen af ​​applikationen - index.html, CSS-pakke og javascript-pakke - i produktion bliver lettere.
  • Kodedeling kan gøres for at opdele bundterne i flere dele.

Hvorfor udvikle et SPA ved hjælp af AngularJS?

I dag er der mange javascript-applikationer, der er tilgængelige på markedet som ember.js, backbone.js osv. Men stadig er der mange webapplikationer, der inkorporerer AngularJS i deres udvikling for at skabe SPA'er.

Nedenfor er der få grunde til, at AngularJS er en klar vinder:

# 1) Ikke afhængigheder

I modsætning til AngularJS har backbone.js afhængigheder af understregning.js og jQuery. Mens JS har afhængighed af styr og jQuery.

forretningsanalytiker interview spørgsmål og svar ppt

# 2) Routing

Navigation mellem websider bygget ved hjælp af AngularJS er meget enkel sammenlignet med dem, der er bygget ved hjælp af andre javascript-rammer. Direktiverne, der anvendes i AngularJS, er lette, hvorfor præstationsmålingerne for AngularJS er mærkbare.

# 3) Test

Når applikationen er bygget ved hjælp af AngularJS, kunne der udføres automatiseret test for kvalitetssikring ved hjælp af selen. Dette er en af ​​de fantastiske funktioner i applikationer bygget ved hjælp af AngularJS-udvikling.

angularJS funktioner

[billedkilde edureka.co]

# 4) Databinding

AngularJS understøtter tovejs databinding, dvs. når modellen opdateres, bliver visningen også opdateret, da AngularJS følger MVC-arkitektur.

Derfor kan dataene ses af brugeren baseret på hans præferencer.

# 5) Support til browseren

AngularJS understøttes i de fleste browsere inklusive IE version 9 og nyere. Det kan også tilpasse sig arbejde på mobiltelefoner, tablets og bærbare computere.

# 6) Adræthed

AngularJS understøtter agility, hvilket betyder, at det kan imødekomme nye anmodninger fra virksomheder, når og når de kommer op i konkurrencedygtige arbejdsmiljøer. Controllerne kan implementeres i MVC-arkitekturen for at servicere disse anmodninger.

Der er omkring 30000 moduler i AngularJS, der er let tilgængelige til hurtig applikationsudvikling. Når en udvikler ønsker at tilpasse en eksisterende applikation, kan han bruge de moduler, der allerede er tilgængelige, og tilpasse koden i stedet for at bygge hele applikationen fra bunden.

Desuden er bidragsydere og eksperter i AngularJS mange i antal, og derfor får du hurtige svar på eventuelle spørgsmål, du sender på diskussionsfora

Hvordan man udvikler en enkelt sideapplikation ved hjælp af AngularJS?

Nedenfor er de forskellige trin involveret i udviklingen af ​​et SPA ved hjælp af AngularJS.

Trin 1: Opret et modul

Vi ved alle, at AngularJS følger MVC-arkitektur. Derfor indeholder hver AngularJS-applikation et modul bestående af controllere, tjenester osv.

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

Trin 2: Definer en simpel controller

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

Trin 3: Inkluder AngularJS-script i HTML-kode

Angiv modulet (oprettet i trin 1) i ng-app attributten og controlleren (defineret i trin 2) i ng-controlleren attribut.

{{message}}

First Second Third

(Når Angular registrerer de skabeloner, der er defineret af ng-template-direktiverne, indlæses dets indhold i skabeloncachen og udfører ikke Ajax-anmodning om at få deres indhold.)

Når HTML er kørt på localhost, vises den følgende side.

første webside

Vær opmærksom på, at hyperlinks Første anden tredje på siden er routere, og når du klikker på dem, vises navigering til de tilsvarende websider uden at blive opdateret.

anden webside

Tredje webside

Det er det! Håber du kunne oprette en simpel SPA som demonstreret i denne blog. Når du først har fået output, kan du prøve komplekse SPA'er på de samme linjer.

Konklusion

Enkeltsides applikationer er meget populære i dag, hvor mærker som Netflix vælger dem.

Hvis du udvikler SPA'er, er AngularJS det oplagte valg. Den nye version af AngularJS, dvs. Angular, tilbyder dog flere funktioner. Ellers er der forskellige teknologier som Node JS applikationsudvikling osv.

Hold øje med vores kommende vejledning for at udforske om opgradering af kantet version!

PREV-vejledning | NÆSTE vejledning

Anbefalet læsning

^