AngularJS-Einführung
AngularJS ist ein JavaScript-Framework . Es kann mit einem <script>-Tag zu einer HTML-Seite hinzugefügt werden.
AngularJS erweitert HTML-Attribute mit Direktiven und bindet Daten mit Ausdrücken an HTML .
AngularJS ist ein JavaScript-Framework
AngularJS ist ein in JavaScript geschriebenes JavaScript-Framework.
AngularJS wird als JavaScript-Datei verteilt und kann mit einem Skript-Tag zu einer Webseite hinzugefügt werden:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS erweitert HTML
AngularJS erweitert HTML um ng-directives .
Die Direktive ng-app definiert eine AngularJS-Anwendung.
Die Direktive ng-model bindet den Wert von HTML-Steuerelementen (input, select, textarea) an Anwendungsdaten.
Die Direktive ng-bind bindet Anwendungsdaten an die HTML-Ansicht.
AngularJS-Beispiel
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Beispiel erklärt:
AngularJS startet automatisch, wenn die Webseite geladen wurde.
Die Direktive ng-app teilt AngularJS mit, dass das <div>-Element der „Besitzer“ einer AngularJS- Anwendung ist .
Die Direktive ng-model bindet den Wert des Eingabefelds an die Anwendungsvariable name .
Die Direktive ng-bind bindet den Inhalt des Elements <p> an die Anwendungsvariable name .
AngularJS-Direktiven
Wie Sie bereits gesehen haben, sind AngularJS-Direktiven HTML-Attribute mit einem ng - Präfix.
Die Direktive ng-init initialisiert AngularJS-Anwendungsvariablen.
AngularJS-Beispiel
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternativ mit gültigem HTML:
AngularJS-Beispiel
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Sie können data-ng- anstelle von ng- verwenden , wenn Sie Ihre Seite HTML-gültig machen möchten.
Später in diesem Tutorial erfahren Sie noch viel mehr über Direktiven.
AngularJS-Ausdrücke
AngularJS-Ausdrücke werden in doppelte Klammern geschrieben: {{ expression }} .
AngularJS "gibt" Daten genau dort aus, wo der Ausdruck geschrieben ist:
AngularJS-Beispiel
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS-Ausdrücke binden AngularJS-Daten auf die gleiche Weise wie die ng-bind- Direktive an HTML.
AngularJS-Beispiel
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Später in diesem Lernprogramm erfahren Sie mehr über Ausdrücke.
AngularJS-Anwendungen
AngularJS- Module definieren AngularJS-Anwendungen.
AngularJS - Controller steuern AngularJS-Anwendungen.
Die Direktive ng-app definiert die Anwendung, die Direktive ng-controller definiert den Controller.
AngularJS-Beispiel
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS-Module definieren Anwendungen:
AngularJS-Modul
var app = angular.module('myApp', []);
AngularJS-Controller steuern Anwendungen:
AngularJS-Controller
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Später in diesem Tutorial erfahren Sie mehr über Module und Controller.