Menü

Erstellen einer Einzelseitenanwendung mit AngularJS (Tutorial mit Beispiel)

  • Haupt
  • Andere
  • Erstellen einer Einzelseitenanwendung mit AngularJS (Tutorial mit Beispiel)

build single page application using angularjs

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

Erstellen Sie ein Single Page Application SPA mit AngularJS:

Alles was wir über AngularJS wissen müssen wurde in unserem vorherigen Tutorial erklärt. In diesem Tutorial erfahren Sie mehr über die Entwicklung einer einseitigen Anwendung mit AngularJS.

Kennen Sie Netflix? Haben Sie jemals die Website besucht?

Wenn Sie mit 'Ja' antworten, wissen Sie, wie eine Anwendung mit nur einer Seite aussieht! Entdecken Sie unsere Vollständige Anleitung zu AngularJS um ein klares Wissen über AngularJS zu erhalten.

Einzelseitenanwendung mit AngularJS

Lassen Sie mich näher darauf eingehen!

Netflix verwendet AngularJS in seinem clientseitigen Framework, um die Benutzerfunktionen in seinen Webanwendungen zu erweitern.

Sie haben ihre Benutzeroberfläche sehr einfach gemacht, indem sie sie zu einer gemacht haben SPA (Einzelseitenanwendung). Dies bedeutet, dass die Navigation in Netflix ausgeführt wird, ohne die gesamte Seite zu aktualisieren.

Was du lernen wirst:

Vorteile von Einzelseitenanwendungen

Im Folgenden sind einige Vorteile von Einzelseitenanwendungen aufgeführt.

  • Verbesserte Benutzererfahrung.
  • Webseiten werden schneller aktualisiert, da weniger Bandbreite verwendet wird.
  • Die Bereitstellung der Anwendung - index.html, CSS-Bundle und Javascript-Bundle - in der Produktion wird einfacher.
  • Durch Aufteilen von Code können die Bundles in mehrere Teile aufgeteilt werden.

Warum ein SPA mit AngularJS entwickeln?

Heutzutage gibt es viele Javascript-Anwendungen auf dem Markt, wie ember.js, backbone.js usw. Dennoch enthalten viele Webanwendungen AngularJS in ihrer Entwicklung, um SPAs zu erstellen.

Nachstehend sind einige Gründe aufgeführt, warum AngularJS ein klarer Gewinner ist:

# 1) Keine Abhängigkeiten

Im Gegensatz zu AngularJS hat backbone.js Abhängigkeiten von underscore.js und jQuery. Während Ember JS Abhängigkeiten von Lenker und jQuery hat.

Was ist der beste Virenentferner?

# 2) Routing

Die Navigation zwischen Webseiten, die mit AngularJS erstellt wurden, ist im Vergleich zu Webseiten, die mit anderen Javascript-Frameworks erstellt wurden, sehr einfach. Die in AngularJS verwendeten Anweisungen sind leichtgewichtig, daher sind die Leistungsmetriken von AngularJS bemerkenswert.

# 3) Testen

Sobald die Anwendung mit AngularJS erstellt wurde, können automatisierte Tests zur Qualitätssicherung mit Selen durchgeführt werden. Dies ist eine der großartigen Funktionen von Anwendungen, die mit der AngularJS-Entwicklung erstellt wurden.

eckige JS-Funktionen

(Bildquelle edureka.co)

# 4) Datenbindung

AngularJS unterstützt die bidirektionale Datenbindung, d. H. Wenn das Modell aktualisiert wird, wird die Ansicht auch aktualisiert, wenn AngularJS der MVC-Architektur folgt.

Daher können die Daten vom Benutzer basierend auf seinen Präferenzen angezeigt werden.

# 5) Unterstützung für den Browser

AngularJS wird in den meisten Browsern unterstützt, einschließlich IE Version 9 und höher. Es kann auch an Handys, Tablets und Laptops angepasst werden.

# 6) Beweglichkeit

AngularJS unterstützt Agilität, was bedeutet, dass es neuen Anforderungen von Unternehmen gerecht werden kann, sobald diese in wettbewerbsfähige Arbeitsumgebungen gelangen. Die Controller können in der MVC-Architektur implementiert werden, um diese Anforderungen zu bedienen.

AngularJS enthält rund 30000 Module, die für eine schnelle Anwendungsentwicklung zur Verfügung stehen. Wenn ein Entwickler eine vorhandene Anwendung anpassen möchte, kann er die bereits verfügbaren Module verwenden und den Code optimieren, anstatt die gesamte Anwendung von Grund auf neu zu erstellen.

Darüber hinaus gibt es viele Mitwirkende und Experten in AngularJS, sodass Sie schnell Antworten auf alle Fragen erhalten, die Sie in Diskussionsforen veröffentlichen

Wie entwickle ich eine Einzelseitenanwendung mit AngularJS?

Nachfolgend sind die verschiedenen Schritte aufgeführt, die bei der Entwicklung eines SPA mit AngularJS erforderlich sind.

Schritt 1: Erstellen Sie ein Modul

Wir alle wissen, dass AngularJS der MVC-Architektur folgt. Daher enthält jede AngularJS-Anwendung ein Modul, das aus Controllern, Diensten usw. besteht.

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

Schritt 2: Definieren Sie einen einfachen Controller

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

Schritt 3: Fügen Sie das AngularJS-Skript in den HTML-Code ein

Geben Sie das Modul (erstellt in Schritt 1) ​​in an ng-app Attribut und der Controller (definiert in Schritt 2) in der ng-controller Attribut.

{{message}}

First Second Third

(Wenn Angular die durch die ng-template-Direktiven definierten Vorlagen erkennt, lädt es seinen Inhalt in den Vorlagencache und führt keine Ajax-Anforderung aus, um deren Inhalt abzurufen.)

Sobald der HTML-Code auf localhost ausgeführt wurde, wird die folgende Seite angezeigt.

erste Webseite

Beachten Sie, dass die Hyperlinks Erster zweiter Dritter Auf der Seite befinden sich Router. Wenn Sie darauf klicken, erfolgt die Navigation zu den entsprechenden Webseiten ohne Aktualisierung.

zweite Webseite

Dritte Webseite

Das ist es! Ich hoffe, Sie konnten ein einfaches SPA erstellen, wie in diesem Blog gezeigt. Sobald Sie die Ausgabe erfolgreich erhalten haben, können Sie komplexe SPAs in denselben Zeilen ausprobieren.

Fazit

Single-Page-Anwendungen sind heutzutage sehr beliebt, Marken wie Netflix entscheiden sich für sie.

Wenn Sie SPAs entwickeln, ist AngularJS die offensichtliche Wahl. Die neue Version von AngularJS, d. H. Angular, bietet jedoch mehr Funktionen. Ansonsten gibt es verschiedene Technologien wie Node JS-Anwendungsentwicklung etc.

Besuchen Sie unser bevorstehendes Tutorial, um mehr über das Aktualisieren der Angular-Version zu erfahren!

PREV Tutorial | NÄCHSTES Tutorial

Literatur-Empfehlungen

^