AngularJS ist ein JavaScript - Framework. Es kann mit einem <script> Tag, um eine HTML-Seite hinzugefügt werden.
AngularJS erweitert HTML mit den Richtlinien Attributen und bindet Daten in HTML mit Ausdrücken.
AngularJS ist ein JavaScript-Framework
AngularJS ist ein JavaScript-Framework. Es ist eine Bibliothek, in JavaScript geschrieben.
AngularJS wird als JavaScript-Datei verteilt und kann mit einem Script-Tag zu einer Webseite hinzugefügt werden:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS Erweitert HTML
AngularJS erweitert HTML mit ng-Richtlinien.
Die ng-App - Richtlinie definiert eine AngularJS Anwendung.
Die ng-Modell Direktive bindet den Wert von HTML - Steuerelemente (input, select, TextArea-) auf Anwendungsdaten.
Die ng-bind Direktive bindet Datenanwendung auf die HTML - Ansicht.
AngularJS Beispiel
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Versuch es selber " Erklärt Beispiel:
AngularJS startet automatisch, wenn die Web-Seite geladen wurde.
Die ng-App - Direktive teilt AngularJS , dass das <div> Element ist der "Besitzer" eines AngularJS Anwendung.
Die ng-Modell Direktive bindet den Wert des Eingabefeldes für die Anwendung Variablennamen.
Die ng-bind Direktive bindet die innerHTML- des <p> Element der Anwendung Variablennamen.
AngularJS Richtlinien
Wie Sie bereits gesehen haben, sind AngularJS Richtlinien HTML mit einem Präfix ng Attribute.
Die ng-init Direktive initialisiert AngularJS Anwendungsvariablen.
AngularJS Beispiel
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Versuch es selber " Alternativ mit gültigen HTML:
AngularJS Beispiel
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Versuch es selber "  | Sie können Daten-ng- statt ng- verwenden, wenn Sie Ihre HTML - Seite gültig machen wollen. |
|---|
Sie werden viel mehr über Richtlinien später in diesem Tutorial lernen.
AngularJS Expressions
AngularJS Ausdrücke werden in doppelten Klammern geschrieben: {{Ausdruck}}.
AngularJS wird "Ausgang" Daten genau dort, wo der Ausdruck geschrieben:
AngularJS Beispiel
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Versuch es selber " AngularJS Ausdrücke binden AngularJS Daten auf die gleiche Weise wie die ng-bind - Richtlinie in HTML.
AngularJS Beispiel
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Versuch es selber " Sie werden mehr über Ausdrücke später in diesem Tutorial lernen.
AngularJS Anwendungen
AngularJS Module definieren AngularJS Anwendungen.
AngularJS Controller steuern AngularJS Anwendungen.
Die ng-App - Richtlinie definiert die Anwendung der ng-Controller - Richtlinie den Controller definiert.
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>
Versuch es selber " AngularJS Module definieren Anwendungen:
AngularJS Modul
var app = angular.module('myApp', []);
AngularJS Controller-Control-Anwendungen:
AngularJS-Controller
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Sie werden mehr über Module und Steuerungen später in diesem Tutorial lernen.