AngularJS Controller Tutorial mit Beispiel

Inhaltsverzeichnis:

Anonim

Was ist Controller in AngularJs?

Ein Controller in AngularJs nimmt die Daten aus der Ansicht, verarbeitet sie und sendet sie dann an die Ansicht, die dem Endbenutzer angezeigt wird. Der Controller verfügt über Ihre Kerngeschäftslogik.

Die Steuerung verwendet das Datenmodell, führt die erforderliche Verarbeitung durch und übergibt die Ausgabe an die Ansicht, die wiederum dem Endbenutzer angezeigt wird.

In diesem Tutorial lernen Sie:

  • Was Controller aus Angulars Sicht macht
  • So erstellen Sie einen Basis-Controller
  • So definieren Sie Methoden in Controller
  • Verwendung von ng-controller in externen Dateien

    • Was Controller aus Angulars Sicht macht

    Im Folgenden finden Sie eine einfache Definition der Funktionsweise von Angular JS Controller.

    • Die Hauptverantwortung des Controllers besteht darin, die Daten zu steuern, die an die Ansicht übergeben werden. Der Umfang und die Ansicht haben eine wechselseitige Kommunikation.
    • Die Eigenschaften der Ansicht können "Funktionen" für den Bereich aufrufen. Darüber hinaus können Ereignisse in der Ansicht "Methoden" für den Bereich aufrufen. Das folgende Codefragment gibt ein einfaches Beispiel für eine Funktion.
      • Die Funktion ($ scope), die beim Definieren des Controllers definiert wird, und eine interne Funktion, mit der die Verkettung von $ scope.firstName und $ scope.lastName zurückgegeben wird.
      • Wenn Sie in AngularJS eine Funktion als Variable definieren, wird sie als Methode bezeichnet.
    • Daten auf diese Weise werden vom Controller an den Bereich übergeben, und dann werden die Daten vom Bereich zur Ansicht hin und her übertragen.
    • Der Bereich wird verwendet, um das Modell der Ansicht zugänglich zu machen. Das Modell kann über im Bereich definierte Methoden geändert werden, die über Ereignisse aus der Ansicht ausgelöst werden können. Wir können die bidirektionale Modellbindung vom Gültigkeitsbereich zum Modell definieren.
    • Controller sollten nicht idealerweise zur Manipulation des DOM verwendet werden. Dies sollte durch die Richtlinien geschehen, die wir später sehen werden.
    • Die beste Vorgehensweise besteht darin, Controller basierend auf der Funktionalität zu haben. Wenn Sie beispielsweise ein Formular für die Eingabe haben und dafür einen Controller benötigen, erstellen Sie einen Controller mit dem Namen "Formular-Controller".

    So erstellen Sie einen Basis-Controller

    Bevor wir mit der Erstellung eines Controllers beginnen, müssen wir zunächst unsere grundlegende HTML-Seite einrichten.

    Das folgende Codefragment ist eine einfache HTML-Seite mit dem Titel "Ereignisregistrierung" und Verweisen auf wichtige Bibliotheken wie Bootstrap, jquery und Angular.

    1. Wir fügen Verweise auf die Bootstrap-CSS-Stylesheets hinzu, die in Verbindung mit den Bootstrap-Bibliotheken verwendet werden.
    2. Wir fügen Verweise auf die AngularJS-Bibliotheken hinzu. Was auch immer wir mit angular.js in Zukunft tun, wird nun aus dieser Bibliothek referenziert.
    3. Wir fügen Verweise auf die Bootstrap-Bibliothek hinzu, um unsere Webseite für bestimmte Steuerelemente reaktionsfähiger zu machen.
    4. Wir haben Verweise auf jquery-Bibliotheken hinzugefügt, die für die DOM-Manipulation verwendet werden. Dies wird von Angular benötigt, da einige der Funktionen in Angular von dieser Bibliothek abhängen.

    Standardmäßig ist das obige Code-Snippet in allen unseren Beispielen vorhanden, sodass wir in den folgenden Abschnitten nur den spezifischen Winkel-JS-Code anzeigen können.

    Zweitens schauen wir uns unsere Dateien und die Dateistruktur an, mit denen wir für die Dauer unseres Kurses beginnen werden.

    1. Zuerst trennen wir unsere Dateien in 2 Ordner, wie dies bei jeder herkömmlichen Webanwendung der Fall ist. Wir haben den Ordner "CSS". Es wird alle unsere kaskadierenden Stylesheet-Dateien enthalten, und dann haben wir unseren "lib" -Ordner, der alle unsere JavaScript-Dateien enthält.
    2. Die Datei bootstrap.css wird im CSS-Ordner abgelegt und dient dazu, unserer Website ein gutes Erscheinungsbild zu verleihen.
    3. Die Datei angle.js ist unsere Hauptdatei, die von der Website angleJS heruntergeladen und in unserem lib-Ordner gespeichert wurde.
    4. Die Datei app.js enthält unseren Code für die Controller.
    5. Die Datei bootstrap.js wird verwendet, um die Datei bootstrap.cs zu ergänzen und unserer Webanwendung Bootstrap-Funktionen hinzuzufügen.
    6. Die jquery-Datei wird verwendet, um unserer Site DOM-Manipulationsfunktionen hinzuzufügen.

    Sehen Sie sich ein Beispiel zur Verwendung von angle.js an.

    Wir möchten hier nur die Wörter "AngularJS" sowohl im Textformat als auch in einem Textfeld anzeigen, wenn die Seite im Browser angezeigt wird.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Code Erläuterung:

    1. Das Schlüsselwort ng-app gibt an, dass diese Anwendung als eckige Anwendung betrachtet werden soll. Alles, was mit dem Präfix 'ng' beginnt , wird als Direktive bezeichnet. "DemoApp" ist der Name unserer Angular.JS-Anwendung.
    2. Wir haben ein div-Tag erstellt und in diesem Tag eine ng-controller-Direktive zusammen mit dem Namen unseres Controllers "DemoController" hinzugefügt. Dies macht unser div-Tag im Grunde die Möglichkeit, auf den Inhalt des Demo-Controllers zuzugreifen. Sie müssen den Namen des Controllers in der Direktive angeben, um sicherzustellen, dass Sie auf die im Controller definierten Funktionen zugreifen können.
    3. Wir erstellen eine Modellbindung mit der ng-model-Direktive. Dies bedeutet, dass das Textfeld für den Tutorial-Namen an die Mitgliedsvariable "tutorialName" gebunden wird.
    4. Wir erstellen eine Mitgliedsvariable mit dem Namen "tutorialName", mit der die Informationen angezeigt werden, die der Benutzer in das Textfeld für Tutorial Name eingibt.
    5. Wir erstellen ein Modul, das an unsere DemoApp-Anwendung angehängt wird. So wird dieses Modul nun Teil unserer Anwendung.
    6. Im Modul definieren wir eine Funktion, die unserer Variablen tutorialName den Standardwert "AngularJS" zuweist.

    Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

    Ausgabe:

    Da wir der Variablen tutorialName den Wert "Angular JS" zugewiesen haben, wird dieser im Textfeld und in der Nur-Text-Zeile angezeigt.

    So definieren Sie Methoden in Controller

    Normalerweise möchte man mehrere Methoden in der Steuerung definieren, um die Geschäftslogik zu trennen.

    Angenommen, Sie möchten, dass Ihr Controller zwei grundlegende Dinge ausführt:

    1. Führen Sie die Addition von 2 Zahlen durch
    2. Führen Sie die Subtraktion von 2 Zahlen durch

    Sie würden dann idealerweise zwei Methoden in Ihrem Controller erstellen, eine, um die Addition durchzuführen, und die andere, um die Subtraktion durchzuführen.

    Sehen wir uns ein einfaches Beispiel an, wie Sie benutzerdefinierte Methoden in einem Angular.JS-Controller definieren können. Der Controller gibt einfach eine Zeichenfolge zurück.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Code Erläuterung:

    1. Hier definieren wir nur eine Funktion, die eine Zeichenfolge von "AngularJS" zurückgibt. Die Funktion wird über eine Mitgliedsvariable namens tutorialName an das Bereichsobjekt angehängt.
    2. Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

    Ausgabe:

    Verwendung von ng-controller in externen Dateien

    Schauen wir uns ein Beispiel für "HelloWorld" an, bei dem alle Funktionen in einer einzigen Datei gespeichert wurden. Jetzt ist es Zeit, den Code für den Controller in separaten Dateien abzulegen.

    Befolgen Sie dazu die folgenden Schritte.

    Schritt 1) Fügen Sie in der Datei app.js den folgenden Code für Ihren Controller hinzu

    angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

    Der obige Code führt die folgenden Aktionen aus:

    1. Definieren Sie ein Modul namens "App", das den Controller zusammen mit der Controller-Funktionalität enthält.
    2. Erstellen Sie einen Controller mit dem Namen "HelloWorldCtrl". Dieser Controller verfügt über eine Funktion zum Anzeigen einer "Hello World" -Nachricht.
    3. Das Bereichsobjekt wird verwendet, um Informationen von der Steuerung an die Ansicht zu übergeben. In unserem Fall wird das Bereichsobjekt also verwendet, um eine Variable namens "Nachricht" zu speichern.
    4. Wir definieren die variable Nachricht und weisen ihr den Wert "Hello World" zu.

    Schritt 2) Fügen Sie nun in Ihrer Sample.html-Datei eine div-Klasse hinzu, die die ng-controller-Direktive enthält, und fügen Sie dann einen Verweis auf die Mitgliedsvariable "message" hinzu.

    Vergessen Sie auch nicht, einen Verweis auf die Skriptdatei app.js hinzuzufügen, die den Quellcode für Ihren Controller enthält.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Wenn der obige Code korrekt eingegeben wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

    Ausgabe:

    Zusammenfassung

    • Die Hauptverantwortung des Controllers besteht darin, ein Bereichsobjekt zu erstellen, das wiederum an die Ansicht übergeben wird
    • So erstellen Sie einen einfachen Controller mithilfe der Anweisungen ng-app, ng-controller und ng-model
    • So fügen Sie einem Controller benutzerdefinierte Methoden hinzu, mit denen verschiedene Funktionen innerhalb eines AngularJS-Moduls getrennt werden können.
    • Controller können in externen Dateien definiert werden, um diese Ebene von der Ansichtsebene zu trennen. Dies ist normalerweise eine bewährte Methode beim Erstellen von Webanwendungen.