Menü

AngularJS-Direktive mit unserem ersten AngularJS-Beispiel

  • Haupt
  • Andere
  • AngularJS-Direktive mit unserem ersten AngularJS-Beispiel

angularjs directive with our first angularjs example

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

AngularJS-Direktive mit erstem AngularJS-Beispiel:

Wir hatten ein kurze Einführung in AngularJS in unserem vorherigen Tutorial. Dieses Tutorial erklärt Ihnen die wichtigen Fakten, die Sie über AngularJS wissen müssen.

AngularJS ist ein Open-Source-Webanwendungsframework, das auf JavaScript basiert.

Es wird von der Google Corporation und einer großen Community verwaltet. AngularJS ist eine Antwort auf die verschiedenen Nachteile, die bei der Formulierung von Anwendungen mit nur einer Seite auftreten.

Lesen Sie unsere Ganze AngularJS-Serie für vertiefte Kenntnisse über das AngularJS-Konzept.

Software-Qualitätssicherung in der Softwareentwicklung

AngularJS-Richtlinie und Beispiel

Das AngularJS-Anwendungsframework fungiert als Vorlage und kann die Herausforderungen bei der Entwicklung von Webanwendungen verringern.

Was du lernen wirst:

Übersicht über AngularJS

AngularJS wurde am 20. von Google veröffentlichtthOktober 2010, und heute ist es ein wichtiger Rahmen für verschiedene Anwendungen mit nur einer Seite.

Aus diesem Grund hat sich AngularJS trotz der rasanten technologischen Entwicklung behauptet. Das plattformübergreifende schnittstellenbasierte System macht es auch effizienter.

AngularJS ergänzt und profitiert von Apache Cordova, einem Framework, das für plattformübergreifende mobile Apps verwendet wird. Es hat die Vision, die Erfahrung zu verbessern und das Testen und Entwickeln von Web-Apps zu vereinfachen, und bietet ein robustes Framework für die Entwicklung von AngularJS-Anwendungen.

Warum AngularJS verwenden?

Nachfolgend sind die verschiedenen Funktionen und Gründe aufgeführt, aus denen AngularJS bei der Entwicklung von Webanwendungen verwendet werden sollte.

  1. Datenbindung: Die Plattform bietet eine automatische Synchronisierung der Daten zwischen dem Modell und den Ansichtsinhalten und spart somit viel Zeit und Mühe.
  2. Regler: Hierbei handelt es sich um JavaScript, das an einen bestimmten Bereich gebunden ist.
  3. Dienstleistungen: AngularJS verfügt über viele integrierte Dienste. Z.B $ https
  4. Filter: Dies hilft bei der Auswahl einer Teilmenge von Elementen aus einem Array und gibt sie an ein neues Array zurück.
  5. Richtlinien: Sie sind Markierungen auf DOM-Elementen wie Attributen, CSS-Elementen usw. Diese können als benutzerdefinierte HTML-Tags verwendet werden.
  6. Routing: Hilft beim Erstellen von Anwendungen mit nur einer Seite. Es wird in der URL nach dem # -Zeichen angegeben und ermöglicht es Ihnen, verschiedene URLs für verschiedene Inhalte in Ihrer Anwendung zu erstellen.
  7. MVC: Steht für Modell, Ansicht und Controller. Es ist ein Entwurfsmuster und wird zum Unterteilen einer App in verschiedene Teile verwendet, d. H. Modell, Ansicht und Controller.
  8. Deep Linking: Mit dieser Funktion des App-Frameworks können Sie den Status der Anwendung in der URL für Lesezeichen codieren. Später kann die App auch über die URL im selben Status wiederhergestellt werden.
  9. Abhängigkeitsspritze: AngularJS verfügt außerdem über ein integriertes Subsystem für die Abhängigkeitsinjektion, das für den Entwickler hilfreich sein kann, um den Entwicklungs- und Testprozess einfacher, zusammenhängender und unkomplizierter zu gestalten.
  10. Umfang: Dies sind die Objekte, die als Klebstoff zwischen der Steuerung und der Ansicht fungieren.

Wie verwende ich AngularJS?

Persönlich glaube ich, dass es kaum ein besseres Framework für die Entwicklung von Front-End-Web-Apps gibt, das heute auf dem Markt verfügbar ist als AngularJS.

Die Tutorials zur Verwendung von AngularJS sind nicht frustrierend komplex, und ich fand sie auch recht einfach zu befolgen. Sie können auch ein Zwei-Wege-Bindungssystem, Vorlagenfunktionen, Modularisierung, Abhängigkeitsinjektionssystem, AJAX-Handling-Funktion und die anderen Funktionen dieses Frameworks nutzen.

Bevor Sie mit der Codierung beginnen, sollten Sie sich mit dem MVC-Konzept (Modell, Ansicht und Controller), dem Skript „Hello World“ und den verschiedenen Funktionen von AngularJS vertraut machen.

AngularJS-Richtlinien

AngularJS bietet Ihnen eine große Anzahl von Richtlinien Damit können Sie die verschiedenen HTML-Elemente mit Anwendungsdaten verknüpfen. Dies sind die grundlegenden Attribute, die mit dem Schlüsselwort beginnen ng- .

Die wichtigste Anweisung, die Sie bei der Verwendung von AngularJS auf einer Seite einfügen müssen, ist unten angegeben.

ng-app -

Es ist der Ausgangspunkt der AngularJS-Anwendung und muss zu jedem Element hinzugefügt werden, das den Rest der Seite umgibt, wie z. B. das Körperteilelement. AngularJS sucht nach diesem Aspekt, wenn die Seite geladen wird, und neigt dazu, alle verschiedenen Anweisungen im Code automatisch auszuwerten.

Die Richtlinien von AngularJS umfassen:

# 1) ng-app ::Dies wird verwendet, um die AngularJS-Anwendung zu starten. Wenn die Webseite mit der AngularJS-Anwendung geladen wird, wird die Anwendung automatisch durch Definieren des Stammelements gebootet. In Ihrem HTML-Code sollte nur eine ng-app-Direktive verwendet werden.

Wenn jedoch mehr als eine ng-app-Direktive im HTML-Code gefunden wird, wird das erste Erscheinungsbild verwendet.

Syntax:

{body of the HTML code}

# 2) Hitze ::Dies wird verwendet, um die Anwendung zu initialisieren.

Es enthält eine Reihe von Werten, die zu Initialisierungszwecken Variablen zugeordnet werden müssen. Diese Anweisung wird nicht oft verwendet, da die Initialisierung von Variablen normalerweise über bestimmte Funktionen innerhalb des Projekts erfolgt.

Syntax:

# 3) ng-controller: Es wird verwendet, wenn die Initialisierung von Variablen basierend auf einer Funktion erfolgen muss. d.h. jede der Variablen muss basierend auf der Funktionslogik initialisiert werden. AngularJS ruft die in der ng-controller-Direktive angegebene Funktion mit einem Objekt auf.

Syntax:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-Modell ::Dies wird verwendet, um die Werte von AngularJS an die von der Anwendung bereitgestellten Steuerelemente zu binden. Um genau zu sein, werden die Daten, die von der Eingabe über die Steuerung und das Modell abgerufen werden, an die Ansicht (mit MVC-Modell) gebunden, die dem Benutzer angezeigt wird.

Syntax:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show und ng-hide: Diese Befehle verbergen und zeigen die Elemente an. Dies wird durch Festlegen des CSS-Anzeigestils erreicht.

Mit AngularJS können Sie auch benutzerdefinierte Anweisungen definieren. Sie werden verwendet, um die Funktionalität von HTML zu erweitern, und werden mit der Funktion 'Direktive' definiert. Sie ersetzen einfach das Element, für das sie aktiviert sind.

Der AngularJS Spickzettel hat mir das Leben gerettet. Es gibt eine Reihe anderer Richtlinien, die Sie auf dem Spickzettel überprüfen können. Sie können sogar lernen, wie Sie mithilfe von AngularJS benutzerdefinierte Anweisungen erstellen. Ich habe alle Anweisungen und Anweisungen der AngularJS-Plattform auf dem Spickzettel gefunden, um viele Probleme zu vereinfachen.

AngularJS Beispiel

Ein einfaches AngularJS-Beispiel kann wie folgt geschrieben werden:

Sie müssen eine HTML-Datei erstellen. Zum Beispiel , anglejsexample.html Wie nachfolgend dargestellt.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

Im obigen Beispiel repräsentiert das Skript AngularJS JavaScript.

Sie wären überrascht zu wissen, wie viele Apps, die Sie täglich verwenden, auf der AngularJS-Plattform entwickelt wurden.

Hier sind einige Namen:

  • Der Wächter
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Freiberufler
  • iStock

Aus den obigen Namen geht hervor, welche Höhe Sie erreichen können, wenn Sie lernen, dieses Framework zu verwenden. Diese Websites stehen an der Spitze ihres Spiels, und ein großer Teil ihres Erfolgs hängt definitiv von der Effizienz der Websites ab, nur weil sie auf AngularJS entwickelt wurden.

Fazit

Wenn Sie einseitige Apps für Mobilgeräte oder sogar Websites erstellen und entwickeln möchten, wie ich es früher war, dann sind Sie hier genau richtig.

AngularJS ist ein One-Stop-Shop für Sie, da diese Website die Entwicklung von Anwendungen wesentlich komfortabler und zusammenhängender macht. Es ist nicht nur für Anfänger großartig, sondern wenn Sie tiefer in es eintauchen, werden Sie dazu neigen, mit Erfahrung zu lernen und großartige Apps zu entwickeln.

Wenn Sie auf neuere Versionen aktualisieren, müssen Sie keine großen Anstrengungen unternehmen. Wenn Sie nur ein paar neue Befehle lernen und neue Optimierungen verstehen, können Sie auch Anwendungen in den neuen Versionen entwickeln.

In unserem nächsten Tutorial erfahren Sie mehr über die Entwicklung einseitiger Webanwendungen mit AngularJS.

PREV Tutorial | NÄCHSTES Tutorial

Literatur-Empfehlungen

^