Der grundlegende Betriebsprozess von Vorlagen und Daten lautet wie folgt:
Benutzeranforderungsanwendungs -Startseite
Der Browser des Benutzers initiiert eine HTTP -Verbindung zum Server und lädt dann die Index.html -Seite, die die Vorlage enthält
Angular wird in die Seite geladen, wartet auf das Laden der Seite und sucht nach der NG-App-Anweisung, um die Grenzen der Vorlage zu definieren.
Angular -Traversal -Vorlagen, finden Sie die angegebenen und gebundenen Beziehungen und lösen einige Spaltenaktionen aus: Registrieren Sie den Hörer, führen Sie einige DOM -Operationen aus und erhalten Sie Initialisierungsdaten vom Server. Schließlich wird die Anwendung gestartet und die Vorlage wird in eine DOM -Ansicht konvertiert
Stellen Sie eine Verbindung zum Server her, um andere Daten zu laden, die dem Benutzer angezeigt werden müssen
Text anzeigen
Man verwendet das Formular {{}} wie {{Begrüßung}} Der zweite Typ ng-bind = "Gruß"
Verwenden Sie den ersten Typ, nicht nachgegebene Seiten können von Benutzern gesehen werden. Es wird empfohlen, den zweiten Typ der Indexseite zu verwenden, und die verbleibenden Seiten können den ersten Typ verwenden
Formulareingabe
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Form </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
Funktion startupcontroller ($ scope) {
$ scope.funding = {startestimate: 0};
ComputNeeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope. // Änderungen des Uhrenmodells
}
</script>
</head>
<body>
<Form ng-controller = "startupcontroller">
Start: <Eingabe ng-change = "computeredEd ()" ng-model = "funding.startingestimate
Empfehlung: {{Finanzierung.Ented}}
</form>
</body>
</html>
In einigen Fällen wollen wir keine Bewegungen unmittelbar unmittelbar, wenn es eine Änderung gibt, aber wir müssen warten. Zum Beispiel:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Form </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
Funktion startupcontroller ($ scope) {
$ scope.funding = {startestimate: 0};
ComputNeeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope.
$ scope.requestfunding = function () {
window.alert ("Entschuldigung, bitte holen Sie sich zuerst mehr Kunden.")
};
}
</script>
</head>
<body>
<Formular ng-submit = "requestFunding ()" ng-controller = "startupcontroller"> // ng-submit
Start: <Eingabe ng-change = "computereded ()" ng-model = "finanzierung.startingestimate">
Empfehlung: {{Finanzierung.Ented}}
<Butth> Mein Startup finanzieren! </button>
</form>
</body>
</html>
Non-Form-Einreichungsinteraktion, klicken Sie als Beispiel Klick
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Form </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
Funktion startupcontroller ($ scope) {
$ scope.funding = {startestimate: 0};
ComputNeeded = function () {
$ scope.funding.Needed = $ scope.funding.startingestimate * 10;
};
$ scope.
$ scope.requestfunding = function () {
window.alert ("Entschuldigung, bitte holen Sie sich zuerst mehr Kunden.")
};
$ scope.reset = function () {
$ scope.funding.startingestimate = 0;
};
}
</script>
</head>
<body>
<Form ng-controller = "startupcontroller">
Start: <Eingabe ng-change = "computereded ()" ng-model = "finanzierung.startingestimate">
Empfehlung: {{Finanzierung.Ented}}
<button ng-klick = "requestFunding ()"> mein Startup finanzieren! </button>
<button ng-klick = "reset ()"> reset </button>
</form>
</body>
</html>
Listen, Tabellen und andere iterative Elemente
NG-Repeat gibt die aktuell referenzierte Elementnummer über $ index zurück. Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Form </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var students = [{name: 'mary', punkt: 10}, {name: 'jerry', punkt: 20}, {name: 'Jack', Score: 30}]
Funktion studentListController ($ scope) {
$ scope.students = Studenten;
}
</script>
</head>
<body>
<Tabelle ng-controller = "studentListController">
<tr ng-Repeat = 'Student in Studenten'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</tr>
</table>
</body>
</html>
Verstecken und zeigen
Die NG-Show- und NG-Hide-Funktionen sind gleichwertig, aber der Betriebseffekt ist genau das Gegenteil.
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<Script>
Funktion todymenucontroller ($ scope) {
$ scope.Menustate = {show: false}; // Wenn Sie in MenUtate.show = false wechseln, wird der Effekt nicht angezeigt. Geben Sie in Zukunft die Variablen in {} ein
$ scope.togglemenu = function () {
$ scope.menustate.show =! $ scope.Menustate.show;
};
}
</script>
</head>
<body>
<div ng-controller = 'todymenucontroller'>
<Button ng-klick = 'Togglemenu ()'> Umschalten des Menüs </button>
<ul ng-show = 'menustate.show'>
<li ng-klick = 'Stun ()'> Stun </li>
<li ng-klick = 'desintegrate ()'> zersinter </li>
<li ng-klick = 'erase ()'> löschen aus der Geschichte </li>
</ul>
</div>
</body>
</html>
CSS -Klasse und Stil
Sowohl die NG-Klasse als auch das NG-Stil können einen Ausdruck akzeptieren, und das Ergebnis der Expressionsausführung kann einer der folgenden Werte sein:
Zeichenfolge, die den Namen der CSS -Klasse darstellt, die durch Leerzeichen getrennt ist
CSS -Klassenname Array
Zuordnung des CSS -Klassennamens zum Booleschen Wert
Das Codebeispiel lautet wie folgt:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<style type = "text/css">
.Fehler {
Hintergrundfarbe: Rot;
}
.warning {
Hintergrundfarbe: Gelb;
}
</style>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<Script>
Funktion Headertroller ($ scope) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messAgetext = "Fehler !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
}
$ scope.showwarning = function () {
$ scope.messAgetext = "Warnung !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
}
}
</script>
</head>
<body>
<div ng-controller = "headerController">
<div ng-class = "{error: iSerror, Warnung: iswarning}"> {{MessAntext}} </div>
<button ng-klick = "duschror ()"> fehler </button>
<button ng-klick = "showwarning ()"> warnung </button>
</div>
</body>
</html>
Zuordnung des CSS -Klassennamens zum Booleschen Wert
Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<style type = "text/css">
.Selected {
Hintergrundfarbe: LightGreen;
}
</style>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<Script>
Funktion Restaurant ($ Scope) {
$ scope.list = [{name: "the hübsche", kuisine: "bbq"}, {name: "grün", kuisine: "salads"}, {name: "House", Küche: 'Seafood'}];
$ scope.Selectrestaurant = function (row) {
$ scope.selectedRow = row;
}
}
</script>
</head>
<body>
<Tabelle ng-controller = "Restaurant">
<tr ng-Repeat = 'Restaurant in der Liste' ng-klick = 'selectrestaurant ($ index)' ng-class = '{ausgewählt: $ index == SelectedRow}'> // Karte des CSS-Klasse-Namens zum Booleschen Wert. Wenn der Wert des Modellattributs SelectedRow in NG-Repeat gleich $ index ist, wird der SELECTD-Stil auf diese Zeile gesetzt
<td> {{Restaurant.Name}} </td>
<td> {{Restaurant.Cuisine}} </td>
</tr>
</table>
</body>
</html>