Einführung in die Angular JS-Anwendung

Angular JS ist eine Open-Source-Anwendung. Es wurde in JavaScript geschrieben. Angular JS wurde im Jahr 2010 von Google entwickelt. Angular JS-Anwendung bietet einen dynamischen Verweis auf Webanwendungen und Seiten. Mit Angular JS können Sie das HTML-Vokabular für Ihre Anwendung erweitern. Angular JS wird verwendet, weil HTML stockt, wenn versucht wird, die dynamischen Ansichten in Webanwendungen zu deklarieren. Angular JS wird als Toolset zum Erstellen des für Ihre Anwendungsentwicklung am besten geeigneten Frameworks bezeichnet.

Angular JS Framework-Funktionen können geändert oder ersetzt werden, um sie an den Workflow anzupassen oder für den zukünftigen Gebrauch zu verwenden. Es ist vollständig erweiterbar und funktioniert auch mit anderen Bibliotheken. AngularJS-Anwendungscode ist in alten Javascript-Objekten einfach. Damit können Sie Ihren Code testen, warten und wiederverwenden. In Angular JS müssen keine proprietären Typen vererbt werden, um die Modelle wie in anderen Accessormethoden einzuschließen. Angular JS hat die neuesten Konzepte für die Entwicklung befolgt.

Konzepte der Angular JS-Anwendung

Die Konzepte von Angular JS Application mit ihren Beispielen lauten wie folgt:

  • Anweisungen zum Erweitern von HTML-Attributen

Die Feature-Direktive ist eindeutig und in anderen Frameworks verfügbar. Die Direktiven sind einfach zu schreiben und können generisch sein, da sie einmal geschrieben und viele Male wiederverwendet werden können. Die Direktiven sind sehr nützlich und es gibt viele Gründe, um sie zu verwenden, zum Beispiel wenn Sie spezielle Anforderungen wie das benutzerdefinierte Raster oder andere Funktionen haben. Die gewünschte Direktive ist noch nicht vorhanden. Die Angular JS Application Direktive beginnt mit 'ng-' wie ng-pp, ng-controller, ng-view, ng-model, ng-class, ng-click, ng-src usw.

Beispiel:

Looping mit ng-repeat:

    ((x))

  • Umfang

Es wird für die Kommunikation zwischen Steuerung und Ansicht verwendet. Es bindet eine Ansicht an das Ansichtsmodell und die Funktionen, die in Angular JS Application für Controller definiert sind, und unterstützt verschachtelte oder hierarchische Bereiche. Es ist eine Datenquelle für Angular JS Application und kann bei Bedarf Eigenschaften hinzufügen oder entfernen. Die gesamte Datenmanipulation und -zuweisung erfolgt über das Bereichsobjekt, wenn eine CRUD-Operation ausgeführt werden soll.

  • Controller

Diese werden verwendet, um den Bereich für die Ansichten zu definieren, und der Bereich kann als Variablen und Funktionen betrachtet werden, die von der Ansicht möglicherweise gebunden werden.

Beispiel:




First Name:

Last Name:


Full Name: ((firstName + " " + lastName))

var app = angular.module('myApp', ());
app.controller('myCtrl', function ($scope) (
$scope.firstName = "James";
$scope.lastName = "Anderson";
));

  • Datenbindung

Es synchronisiert die Daten zwischen dem Modell und der Ansicht. Dies bedeutet, dass durch die Änderung des Modells die Ansicht aktualisiert wird. Die ng-model-Direktive wird für die bidirektionale Datenbindung verwendet.

Beispiel:
Wenn der Benutzer in das Textfeld eingibt, wird der geänderte Wert in Groß- und Kleinschreibung in einer Bezeichnung angezeigt, die eine bidirektionale Datenbindung darstellt.

  • Dienstleistungen

Es wird verwendet, wenn der Status für die gesamte Anwendung freigegeben wurde und eine Lösung für die Datenspeicherung benötigt wird. Es kann ein Singleton sein und von anderen Komponenten wie Direktiven, Controllern und anderen Diensten verwendet werden. Die verwendeten Dienste sind $ http, $ location, $ log, $ route, $ filter, $ document, $ timeout, $ exceptionHandler.

  • Routing

Es hilft, die App in mehrere Ansichten zu unterteilen und mehrere Ansichten an Controller zu binden. Das SPA wird in mehrere Ansichten unterteilt, um die App logisch zu unterteilen und die Verwaltung zu vereinfachen.

Beispiel: Standardroute

App.config(('$routeProvider',
function($routeProvider)
(
$routeProvider.
when('/List',
(
templateUrl: 'Views/list.html',
controller: 'ListController'
)).
when('/Add',
(
templateUrl: 'Views/add.html',
controller: 'AddController'
).
otherwise((
redirectTo: '/List'
));
)));

  • Filter

Diese werden verwendet, um das Verhalten von Bindungsausdruck und Direktive zu erweitern. Sie können die Daten formatieren und Werte formatieren oder bestimmte Bedingungen anwenden. Filter werden in HTML mit der Pipe in Ausdrücken aufgerufen.

Beispiel:

< html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

 html>

var app = angular.module('myApp', ());
app.controller("namesCtrl", function ($scope) (
$scope.friends = (
( name: "Karl", age: 27, city: "Bangalore" ),
( name: "Lewis", age: 55, city: "Newyork" ),
);
));

Filtereingang:

    (((x.name | Großbuchstabe) + ', ' + x.age + ', ' + x.city))

  • Ausdrücke

Die Ausdrücke (()) sind die deklarative Methode zum Angeben des Speicherorts für die Datenbindung in HTML und zum Verwenden eines Ausdrucks für die Datenbindung. Es kann in HTML-Vorlagen hinzugefügt werden und unterstützt keine Kontrollflussanweisungen, unterstützt jedoch Filter zum Formatieren der Daten vor der Anzeige.

Beispiel:

Gib etwas in das Eingabefeld ein:

Name:

Du hast geschrieben: ((firstName))

  • Module

    Das Modul ist der Container einer Anwendung und Anwendungscontroller gehören zum Modul. Es ist eine Sammlung von Funktionen und unterteilt die Anwendung in eine kleine und wiederverwendbare Funktionskomponente. Ein Modul kann durch einen eindeutigen Namen identifiziert werden und von anderen Modulen abhängig sein.

Beispiel:



//Referring module name myApp
(( firstName + " " + lastName ))


  • Testen

Zum Testen des Angular JS-Anwendungscodes werden häufig Test-Frameworks wie Jasmine und Karma verwendet. Diese Test-Frameworks unterstützen hauptsächlich Mocking und können mithilfe einer JSON-Datei mithilfe verschiedener Plug-in-Angular-JS-Anwendungen in hohem Maße konfiguriert werden.

Schlussfolgerung - Angular JS Application

Angular JS bietet das Framework, das eindeutige Anweisungen und leistungsstarke Funktionen enthält. Direktiven helfen uns beim Erstellen der neuen HTML-Syntax, die hauptsächlich für eine Anwendung spezifisch ist. Es wird als wiederverwendbare Komponente verwendet. Mit der Komponente können Sie komplexe Strukturen und anderes Verhalten ausblenden. Der Fokus würde nur darauf liegen, was die Anwendung tut und wie die Anwendung separat aussieht. Angular JS-Anwendungen werden heutzutage immer beliebter, da sie leicht zu erlernen und zu entwickeln sind. Für den Front-End-Entwickler gibt es auf dem Markt viele Möglichkeiten. Wenn Sie gut mit JavaScript umgehen können, ist es nicht schwer, Angular JS zu erlernen, und es ist eine gute Idee, Ihre Kenntnisse mit dieser Technologie zu aktualisieren.

Empfohlene Artikel

Dieser Artikel war ein Leitfaden für Angular JS Application. Hier haben wir die Konzepte der Angular JS-Anwendung mit einigen Beispielen besprochen, um ein besseres Verständnis zu erhalten. Sie können auch den folgenden Artikel lesen, um mehr zu erfahren.

  1. Unterschiede von Winkel 5 und Winkel 4
  2. Was ist maschinelles Lernen?
  3. Unterschiede zwischen JSON und BSON
  4. Was ist Laravel Framework?
  5. Was ist das Testen von Frameworks für Java?

Kategorie:

Software-Entwicklung