AngularJS Einführung

AngularJS ist einJavaScript-Framework. Es kann über ein <script>-Tag zu einer HTML-Seite hinzugefügt werden.

AngularJS erweitert HTML durchDirektivenund bindet Daten überAusdrückean HTML.

AngularJS ist ein JavaScript-Framework

AngularJS ist ein JavaScript-Framework. Es ist eine in JavaScript geschriebene Bibliothek.

AngularJS wird als JavaScript-Datei bereitgestellt und kann mithilfe eines script-Tags zu einer Webseite hinzugefügt werden:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

Note Wir empfehlen, das Skript am Ende des <body>-Elements zu platzieren.
Dies verbessert die Ladegeschwindigkeit der Webseite, da das Laden von HTML nicht vom Laden des Skripts abhängt.

Downloads für verschiedene angular.js-Versionen:https://github.com/angular/angular.js/releases

AngularJS erweitert HTML

AngularJS erweitert HTML durchng-Direktiven.

ng-appDirektiven definieren eine AngularJS-Anwendung.

ng-modelDirektiven binden Elementwerte (wie Eingabefeldwerte) an die Anwendung.

ng-bindDirektiven binden Anwendungsdaten an die HTML-Ansicht.

AngularJS-Beispiele

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Name:<input type="text" ng-model="name"></p> <h1>Hallo {{name}}</h1> <p ng-bind="name"></p> </div> </body> </html>

Selbst ausprobieren »

Beispielerklärung:

Wenn die Webseite vollständig geladen ist, startet AngularJS automatisch.

ng-appDie Direktive teilt AngularJS mit, dass das <div>-Element der „Eigentümer“ der AngularJS-Anwendungist.

ng-modelDie Direktive bindet den Wert des Eingabefelds an die Anwendungsvariablename。

ng-bindDie Direktive bindet den Namen der Anwendungsvariablen an das innerHTML eines Absatzes.

Note Wenn Sie dieng-app-Direktive entfernen, zeigt HTML den Ausdruck direkt an, ohne das Ergebnis des Ausdrucks auszuwerten.

Was ist AngularJS?

AngularJS erleichtert die Entwicklung moderner Single-Page-Anwendungen (SPAs: Single Page Applications).

  • AngularJS bindet Anwendungsdaten an HTML-Elemente.
  • AngularJS kann HTML-Elemente klonen und wiederholen.
  • AngularJS kann HTML-Elemente ausblenden und anzeigen.
  • AngularJS kann Code „hinter“ HTML-Elementen hinzufügen.
  • AngularJS unterstützt Eingabevalidierung.

AngularJS-Direktiven

Wie Sie sehen können, sind AngularJS-Direktiven HTML-Attribute mit dem Präfixng.

ng-initDie Direktive initialisiert AngularJS-Anwendungsvariablen.

AngularJS-Beispiel

<div ng-app="" ng-init="firstName='John'"> <p>Der Name ist<span ng-bind="firstName"></span></p> </div>

Selbst ausprobieren »

Note HTML5 erlaubt erweiterte (benutzerdefinierte) Attribute, die mitdata-beginnen.
AngularJS-Attribute beginnen mitng-, aber Sie könnendata-ng-verwenden, damit die Webseite für HTML5 gültig ist.

Mit gültigem HTML5:

AngularJS-Beispiel

<div data-ng-app="" data-ng-init="firstName='John'"> <p>Der Name ist<span data-ng-bind="firstName"></span></p> </div>

Selbst ausprobieren »

AngularJS-Ausdrücke

AngularJS-Ausdrücke werden in doppelte geschweifte Klammern geschrieben:{{ expression }}。

AngularJS-Ausdrücke binden Daten an HTML, wasng-bindähnelt.

AngularJS „gibt“ Daten dort aus, wo der Ausdruck geschrieben steht.

AngularJS-Ausdrückesind JavaScript-Ausdrückensehr ähnlich: Sie können Literale, Operatoren und Variablen enthalten.

Beispiel: {{ 5 + 5 }} oder {{ firstName + " " + lastName }}

AngularJS-Beispiel

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Mein erster Ausdruck: {{ 5 + 5 }}</p> </div> </body> </html>

Selbst ausprobieren »

AngularJS-Anwendungen

AngularJS ModulDefiniert die AngularJS-Anwendung.

AngularJS ControllerWird zur Steuerung der AngularJS-Anwendung verwendet.

ng-appDirektiven definieren die Anwendung,ng-controllerdefinieren den Controller.

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="myCtrl">Vorname:<input type="text" ng-model="firstName"><br>Nachname:<input type="text" ng-model="lastName"><br> <br>Vollständiger Name: {{firstName + " " + lastName}}</div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>

Selbst ausprobieren »

AngularJS-Module definieren Anwendungen:

AngularJS-Module

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

AngularJS-Controller steuern Anwendungen:

AngularJS-Controller

app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });

In den kommenden Tutorials erfahren Sie mehr über Anwendungen und Module.

AngularJS in Cloud Studio verwenden

  • Schritt 1: Besuchen Sie Tencent Cloud Developer Platform, registrieren Sie sich / melden Sie sich in Ihrem Konto an.

  • Schritt 2: Wählen Sie im Menü Laufzeitumgebung rechts aus: "ubuntu"

  • Schritt 3: Erstellen Sie im Codeverzeichnis links ein html-Verzeichnis und schreiben Sie Ihren HTML-Code, zum Beispiel index.html

  • Schritt 4: Fügen Sie den folgenden Code in die Datei index.html ein, um AngularJS einzubinden:

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

  • Schritt 5: Geben Sie den Befehl sudo vim /etc/nginx/site-enable/default im Terminal ein. Ändern Sie den rot umrahmten Teil der Konfigurationsdatei wie in der folgenden Abbildung gezeigt, und geben Sie dann den Befehl ein: sudo nginx restart, um den nginx-Dienst neu zu starten (Nachdem nginx installiert und gestartet wurde, lauscht es standardmäßig auf Port 80. Wir müssen das Site-Verzeichnis und den lauschenden Port von nginx an unsere Anforderungen anpassen.)

  • Schritt 6: Klicken Sie ganz rechts auf den Tab [Zugriffslink], geben Sie im Zugriffslink-Bereich die Portnummer 8080 ein (übereinstimmend mit der Portnummer in der soeben verwendeten nginx-Konfigurationsdatei), klicken Sie auf Link erstellen, und dann können Sie auf die generierte Verknüpfung klicken, um auf den gerade geschriebenen Code zuzugreifen und den AngularJS-Effekt anzuzeigen.

Jetzt veranstaltet CODING einen [My Favorite Cloud Studio Plugin Selection Contest] basierend auf Cloud Studio-Arbeitsbereichen. Besuchen Sie die offizielle Veranstaltungswebsite: https://studio.qcloud.coding.net/campaign/favorite-plugins/index, um weitere Informationen zur Veranstaltung zu erhalten.

Weitere Erweiterungen