Einführung in AngularJS

AngularJS ist eines der am häufigsten verwendeten JavaScript-MVC-Frameworks in der Programmierwelt. In jüngster Zeit erfreut es sich aufgrund der Nachfrage nach mobilen Anwendungen und der Einführung von HTML5 durch die meisten Unternehmen der IT-Branche immer größerer Beliebtheit. Das AngularJS-Framework wird von Google veröffentlicht. AngularJS Erfindet das JS-Framework-Paradigma auf der nächsten Ebene neu, indem ein sehr leichtes Framework eingeführt wird, das auf dem DOM-Modell aufbaut.

lesen Sie auch:

  • AngularJS + Spring MVC
  • Spring Data Rest + AngularJS-Integration

Wenn Sie das AngularJS-Framework erlernen möchten, ist es wichtig, die Grundlagen seiner internen Funktionsweise zu verstehen AngularJS-Compiler. Dieses Tutorial und die nachfolgenden Tutorials bieten Ihnen auf jeden Fall eine einfache und unkomplizierte Lernerfahrung, bis Sie bereit sind, Ihre eigenen Anwendungen zu schreiben.

Wir würden uns freuen, wenn Sie uns im Kommentarbereich Feedback geben oder es auf der Facebook-Seite posten könnten.

AngularJS-Anweisungen

Vereinfacht ausgedrückt handelt es sich bei Direktiven um Funktionen, die ausgelöst werden, wenn der HTML-Compiler beim Durchlaufen aller DOM-Elemente auf sie stößt. Diese Anweisungen werden an die HTML-Elementnamen, Attribute, Klassennamen und Kommentare angehängt. Direktiven sind eine der wichtigen Komponenten der AngulasJS-Anwendung.

Eine Direktive ist ein Attribut, das eine neue Syntax einführt. Direktiven sind Markierungen auf einem DOM-Element, die ihm ein besonderes Verhalten zuweisen. AngularJS wird mit zahlreichen integrierten Anweisungen geliefert, die häufig zum Erstellen von Webanwendungen verwendet werden. Außerdem können Entwickler anwendungsspezifische benutzerdefinierte Anweisungen erstellen. Zum Beispiel, wenn Sie anhängen ng-wiederholen Wenn Sie eine Anweisung an ein HTML-Element senden, simuliert dieses Element eine Schleife.

In den folgenden Abschnitten werden einige der am häufigsten verwendeten Direktiven in den AngularJS-Anwendungen erläutert.

Ausdrücke

AngularJS-Ausdrücke werden in doppelte Klammern geschrieben: {{Ausdruck}}. Die Daten werden dort ausgegeben, wo genau der Ausdruck steht. Der Ausdruck kann nur eine Variable, eine beliebige arithmetische Notation oder eine Objekteigenschaft sein, die aus dem aktuellen Bereich ausgewertet wird. Beachten Sie, dass bei von den übergeordneten Bereichen geerbten Bereichen die Eigenschaft, wenn sie im aktuellen Bereich nicht gefunden wird, nach dem unmittelbar übergeordneten Bereich gesucht wird, bis sie den Stammbereich erreicht.

ng-app

Der Entwickler muss diese Direktive zum Bootstrap einer AngularJS-Anwendung verwenden. Diese Direktive wird normalerweise entweder im HTML- oder BODY-Tag des HTML-Dokuments verwendet. Mit einfachen Worten: Wenn Sie diese Anweisung nicht verwenden, aktiviert Ihr HTML-Dokument die AngulrJS-Module nicht. Jedes HTML-Dokument sollte nur eines haben ng-app Direktive und kann nicht in einer anderen verschachtelt werden.

Unterschied zwischen data-ng und ng:

Das ist Ihnen wahrscheinlich aufgefallen data-ng und ng sind Präfixe, die für die AngularJS-Direktiven verwendet werden. Warum „Daten“ in manchen Fällen zusätzlich vorangestellt wird. Es gibt keinen Unterschied in der Funktionalität durch die Verwendung von ng oder data-ng. Einige moderne Browser geben keine HTML5-Validatorfehler aus, wenn sie als data-ng verwendet werden. Sie können auch verwenden x-ng-app mit dem gleichen Effekt.

ng-Controller

Controller in AngularJS sind einfache JavaScript-Funktionen, die zum Initialisieren oder Laden von Daten in den zugehörigen Bereich verwendet werden. Wann ng-Controller Bei Verwendung der Direktive wird ein neues Controller-Objekt erstellt und das Controller-Objekt zur Ansicht angehängt. Es ist ratsam, die Controller-Klasse nur für Geschäftslogiken und nicht für andere Validierungen oder Manipulationen von DOM zu verwenden. Der Controller kann auf jeder Ebene von DOM-Elementen angehängt werden. Es kann auf der Stammebene des Dokuments oder für einen bestimmten Ansichtsblock im HTML-Dokument verwendet werden.

ng-wiederholen

Es ähnelt einem Schleifenkonstrukt, das zum Durchlaufen eines Sammlungsobjekts verwendet wird. Schauen Sie sich zum Beispiel den folgenden Code an:

<div   ng-repeat="e in  employees|filter:search">
        <div  >
	<!-- Using filter symbol | to display the letters in uppercase-->
            <p>{{e.name|uppercase}}</p>
        </div>
        <div  >
            <p>{{e.city}}</p>
        </div>
   </div>

Im obigen Code, div Element mit ng-wiederholen iteriert und erstellt für jedes Element in der eine neue Instanz derselben Vorlage Mitarbeiter Sammlungen. Jede Iteration hat ihren eigenen Umfang und ihre eigenen Werte, die an die Vorlage angehängt sind. Sie kann mithilfe von Variablen wie $index, $first, $last usw. verfolgt werden. (Referenz).

ng-Modell

Diese Direktive bindet die Eingabekomponenten (Eingabe, Auswahl und Textbereich) mithilfe von NgModelController an Eigenschaften im Bereich. Dies ist eine sehr leistungsstarke und nützliche Anweisung zum dynamischen Anzeigen der Daten zusammen mit den Benutzeroperationen.

In diesem einfachen Tutorial/Beispiel habe ich ein Modul mit Controller erstellt, um die Namen der Mitarbeiter und der Stadt zu speichern und sie dann auf dem Bildschirm anzuzeigen. Im Folgenden finden Sie die Schritte zum Ausführen dieses einfachen Beispiels. Ich würde Ihnen raten, dieses einfache Beispiel durchzugehen, das Ihnen sehr dabei helfen würde, fortgeschrittene AngularJS-Anwendungen zu verstehen und zu schreiben.

  • AngularJS-Skript vom CDN hinzufügen/importieren
  • Erstellen Sie ein AngularJS-Modul
  • Erstellt einen Controller innerhalb des Moduls
  • Daten erstellen und zum Umfang hinzufügen
  • Erstellen Sie eine HTML-Ansicht, die AngularJS-Anweisungen und -Controller verwendet, um sie auf dem Bildschirm anzuzeigen
  • AngularJS-Beispiel

    Hier ist der vollständige Code, der für dieses Tutorial verwendet wird. Beachten Sie, dass dieser Code Ihnen den Einstieg in das Schreiben Ihrer ersten AngularJS-Anwendung erleichtert.

     <!DOCTYPE html>
    <html ng-app="helloApp" ng-controller="employeesCtrl">
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <style type="text/css">
        .Table{display: table;}
        .Title{display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
        .Heading { display: table-row; font-weight: bold; text-align: center; }
        .Row { display: table-row; }
        .Cell{ display: table-cell; border: solid; border-width: thin; padding-left: 5px; padding-right: 5px; }
    </style>
    <script>
    	//Creating Angular Module
    	var helloApp = angular.module('helloApp', []);
    
    	//Creating Controller with Data
    	helloApp.controller('employeesCtrl', function($scope) {
    	$scope.employees = [
    	{name:'Pavan',city:'Bangalore'},{name:'Kalyan',city:'Salem'},{name:'Peter',city:'Chennai'},
    	{name:'Rajini',city:'Chennai'},{name:'Kamal',city:'Chennai'},{name:'Amir',city:'Salem'},
    	{name:'Surya',city:'Bangalore'},{name:'Vijay',city:'Chennai'},
    	];
    	$scope.title = "Employees List";
    	$scope.empName = "Name";
    	$scope.empCity = "City";
    });
    </script>
    </head>
    <body>
    <!-- Creating input component and attaching to ng-model -->
    Search Employees : <input type="text" ng-model="search">
     <div  >
        <div  >
            <p>{{title}}</p>
        </div>
        <div  >
            <div  >
                <p>{{empName}}</p>
            </div>
            <div  >
                <p>{{empCity}}</p>
            </div>
        </div>
       <!-- This div block executed using ng-repeat directive with filter-->
        <div   ng-repeat="e in  employees|filter:search">
            <div  >
    	<!-- Using filter symbol | to display the letters in uppercase-->
                <p>{{e.name|uppercase}}</p>
            </div>
            <div  >
                <p>{{e.city}}</p>
            </div>
       </div>
    </div>
    </body>
    </html>
    

    AngularJS-Demo

    Um das obige Beispiel auszuführen, klicken Sie bitte auf AnguleJS-Beispieldemo. Sie sehen die folgenden Bildschirme und können die Mitarbeiternamen mithilfe des Textfelds filtern.

    AngularJS-Einführung 1

    AngularJS-Einführung 2

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen