suchen

Heim  >  Artikel  >  Web-Frontend  >  AngularJS-Tutorial und Beispielcode-Analyse

AngularJS-Tutorial und Beispielcode-Analyse

小云云
小云云Original
2018-01-04 09:32:231326Durchsuche

Dieser Artikel führt Sie hauptsächlich in das relevante Wissen über AngularJS ein. Interessierte Freunde sollten einen Blick darauf werfen. AngularJS erweitert HTML um neue Attribute und Ausdrücke. AngularJS kann eine Single-Page-Anwendung erstellen (SPAs: Single Page Applications).

Einführung in AngularJS

AngularJS ist ein JavaScript-Framework. Es kann über das Tag <script> zu HTML-Seiten hinzugefügt werden. </p> <p>AngularJS erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML. </p> <p>AngularJS ist ein JavaScript-Framework </p> <p>AngularJS ist ein JavaScript-Framework. Es handelt sich um eine in JavaScript geschriebene Bibliothek. </p> <p>AngularJS wird als JavaScript-Datei veröffentlicht, die über das Skript-Tag zu Webseiten hinzugefügt werden kann: </p> <p><script src="http://cdn.static.runoob.com/ libs /angular.js/1.4.6/angular.min.js"></script>

Hinweis: Wir empfehlen, das Skript am Ende des -Elements zu platzieren.

Dadurch wird die Seitenladegeschwindigkeit erhöht, da das Laden von HTML nicht vom Laden von Skripten abhängt.

Verschiedene Angular.js-Versionen herunterladen: https://github.com/angular/angular.js/releases

AngularJS erweitert HTML

AngularJS erweitert durch ng-directives HTML . Die

ng-app-Direktive definiert eine AngularJS-Anwendung. Die

ng-model-Direktive bindet Elementwerte (z. B. den Wert eines Eingabefelds) an die Anwendung.

Die ng-bind-Direktive bindet Anwendungsdaten an eine HTML-Ansicht.

AngularJS-Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> 
<p ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</p>
</body>
</html>

Beispielerklärung:

Wenn die Webseite geladen wird, startet AngularJS automatisch. Die

ng-app-Direktive teilt AngularJS mit, dass das

-Element der „Eigentümer“ der AngularJS-Anwendung ist.

Die ng-model-Direktive bindet den Wert des Eingabefelds an den Namen der Anwendungsvariablen. Die

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

Hinweis: Wenn Sie die ng-app-Direktive entfernen, zeigt der HTML-Code den Ausdruck direkt an, ohne das Ergebnis des Ausdrucks zu berechnen.

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 ein- und ausblenden.

  • AngularJS kann Code „hinter“ HTML-Elementen hinzufügen.

  • AngularJS unterstützt die Eingabevalidierung.

AngularJS-Direktiven

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

ng-init-Direktive initialisiert AngularJS-Anwendungsvariablen.

AngularJS-Beispiel

<p ng-app="" ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span ng-bind="firstName"></span></p>
</p>

Hinweis HTML5 erlaubt erweiterte (selbst erstellte) Attribute, beginnend mit data-.

AngularJS-Attribute beginnen mit ng-, aber Sie können data-ng- verwenden, um die Seite für HTML5 gültig zu machen.

Mit gültigem HTML5:

AngularJS-Instanz

<p data-ng-app="" data-ng-init="firstName=&#39;John&#39;">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</p>

AngularJS-Ausdruck

AngularJS-Ausdrücke werden in doppelte geschweifte Klammern geschrieben: {{ Ausdruck }}.

AngularJS-Ausdrücke binden Daten an HTML, was der ng-bind-Direktive ähnelt.

AngularJS gibt Daten dort aus, wo der Ausdruck geschrieben ist.

AngularJS-Ausdrücke ähneln JavaScript-Ausdrücken: Sie können Literale, Operatoren und Variablen enthalten.

Instanz {{ 5 + 5 }} oder {{ firstName + " " + lastName }}

AngularJS-Instanz

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<p ng-app="">
  <p>我的第一个表达式： {{ 5 + 5 }}</p>
</p>
</body>
</html>

AngularJS-Anwendung

AngularJS-Module definieren AngularJS-Anwendungen.

Der AngularJS-Controller (Controller) wird zur Steuerung von AngularJS-Anwendungen verwendet.

Die ng-app-Direktive definiert die Anwendung und ng-controller definiert den Controller.

AngularJS-Instanz

<p ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});
</script>

AngularJS-Moduldefinitionsanwendung:

AngularJS-Modul

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

AngularJS-Controller-Steuerungsanwendung:

AngularJS-Controller

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

Verwandte Empfehlungen:

Implementierungscode für die AngularJS-Fuzzy-Abfragefunktion

AngularJS implementiert die Warenkorbauswahl und die umgekehrte Auswahlfreigabe Funktionsbeispiele

AngularJS implementiert die Erinnerungsfunktion für die Wortbeschränkung des Eingabefelds

Das obige ist der detaillierte Inhalt vonAngularJS-Tutorial und Beispielcode-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung zum direkten Zugriff auf JSP-Seiten im WEB-INF-VerzeichnisNächster Artikel：Ausführliche Erläuterung zum direkten Zugriff auf JSP-Seiten im WEB-INF-Verzeichnis

In Verbindung stehende Artikel

Mehr sehen