SRC- und HREF -Attribute
In AngularJs sollte SRC als NG-SRC geschrieben werden, und HREF sollte beispielsweise als NG-HREF geschrieben werden:
Die Codekopie lautet wie folgt:
<img ng-src = "/images/cats/{{favoritecat}}">
<a ng-href = "/shop/category = {{number}}"> ein text </a>
Ausdruck
Einfache mathematische Operationen, Vergleichsvorgänge, Boolesche Operationen, Bitoperationen, Referenzarrays und Objektsymbole können in Vorlagen durchgeführt werden. Obwohl wir viele Dinge mit Ausdrücken tun können, wird der Ausdruck mit einem benutzerdefinierten Interpreter (Teil von Angular) ausgeführt, anstatt JavaScript Eval () -Funktion zu verwenden, sodass er große Einschränkungen aufweist.
Obwohl die Ausdrücke hier in vielerlei Hinsicht strenger sind als JavaScript, haben sie eine bessere Fehlertoleranz gegenüber undefiniertem und Null. Wenn ein Fehler auftritt, zeigt die Vorlage einfach nichts an und wirft keinen NullPointerexception -Fehler auf. Zum Beispiel:
Die Codekopie lautet wie folgt:
<div ng-controller = 'somecontroller'>
<div> {{computer () /10}} < /div> // Obwohl es legal ist, steckt es die Geschäftslogik in die Vorlage, und dieser Ansatz sollte vermieden werden
</div>
Unterscheiden Sie zwischen UI- und Controller -Verantwortlichkeiten
Der Controller ist an ein bestimmtes DOM -Fragment gebunden, was sie verwalten müssen. Es gibt zwei Hauptmethoden, um den Controller dem DOM -Knoten zu assoziieren. Man wird durch den NG-Controller in der Vorlage deklariert, und die zweite besteht darin, sie durch Routing an ein dynamisch geladenes Dom-Template-Fragment zu binden. Diese Vorlage wird als Ansicht bezeichnet. Wir können verschachtelte Controller erstellen, sie können Datenmodell und Funktionen teilen, indem sie die Zahlenstruktur erben. Das reale Verschachtelung tritt auf dem $ Scope -Objekt auf. Durch den internen ursprünglichen Vererbungsmechanismus wird der $ Scope des übergeordneten Controller -Objekts an den internen verschachtelten $ Scope (alle Eigenschaften, einschließlich Funktionen) übergeben. Zum Beispiel:
Die Codekopie lautet wie folgt:
<div ng-controller = "parentController">
<div ng-controller = "ChildController"> ... </div>
</div>
Modelldaten mit $ Scope freilegen
Sie können die Erstellung von $ Scope -Attribut wie $ scope.count = 5 anzeigen. Sie können auch indirekt Datenmodelle über die Vorlage selbst erstellen.
Ausdruck passieren. Zum Beispiel
Die Codekopie lautet wie folgt:
<Schaltfläche ng-klick = 'count = 3'> Setzen Sie Count auf drei </button>
Verwenden von NG-Modell auf Formularelementen
Ähnlich wie bei der Expression funktionieren auch die auf dem NG-Modell angegebenen Modellparameter innerhalb des äußeren Controllers. Der einzige Unterschied besteht darin, dass dies eine Zwei-Wege-Bindungsbeziehung zwischen dem Formularelement und dem angegebenen Modell erzeugt.
Überwachen Sie Änderungen der Datenmodelle mithilfe von Watch
Die Funktionssignatur von $ watch lautet: $ watch (watchfn, watchAction, Deepwatch)
Watchfn ist eine Zeichenfolge mit einem Winkelexpression oder einer Winkelfunktion, die den aktuellen Wert des überwachten Datenmodells zurückgibt. WatchAction ist eine Funktion oder ein Ausdruck, das auf dem Namen Watchfn ändert. Seine Funktionssignatur ist:
Funktion (NewValue, OldValue, Scope) Deepwatch Wenn auf true eingestellt ist, wird dieser optionale boolesche Parameter angular beauftragt, ob sich jede Eigenschaft des überwachten Objekts geändert hat. Wenn Sie einen einfachen Wert zur Überwachung von Elementen im Array oder alle Attribute im Objekt anstelle von Werten überwachen, können Sie diesen Parameter verwenden. Beachten Sie, dass Angular Arrays oder Objekte durchqueren muss. Wenn der Satz größer ist, ist der Vorgang komplizierter.
Die $ Watch -Funktion gibt eine Funktion zurück. Wenn Sie keine Änderungsbenachrichtigungen erhalten müssen, können Sie die zurückgegebene Funktion verwenden, um sich aus dem Monitor abzumelden.
Wenn wir eine Eigenschaft überwachen und uns dann von der Überwachung anmelden müssen, können wir den folgenden Code verwenden: var Dereg = $ scope.
... Dereg ();
Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Ihr Einkaufswagen </title>
<script type = "text/javaScript">
Funktion cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{Titel: 'Paint Pots', Menge: 8, Preis: 3,95},
{Titel: 'Polka Dots', Menge: 17, Preis: 12,95},
{Titel: 'Pebbles', Menge: 5, Preis: 6,95}
];
$ scope.totalcart = function () {
var total = 0;
für (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .Price * $ scope.items [i] .quantity;
}
Return Total;
}
$ scope.subtotal = function () {
return $ scope.totalcart () - $ scope.bill.discount;
}
Funktion Calculediscount (NewValue, OldValue, Scope) {
$ scope.bill.discount = newValue> 100? 10: 0;
} // Die WatchAction -Funktion hier
$ scope.
}
</script>
</head>
<body>
<div ng-controller = "cartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<Eingabe ng-model = 'item.quantity'>
<span> {{item.price | Währung}} </span>
<span> {{item.price * item.quantity | Währung}} </span>
</div>
<div> Gesamt: {{TotalCart () | Währung}} </div>
<Div> Rabatt: {{Bill.discount | Währung}} </div>
<div> subtotal: {{{subtotal () | Währung}} </div>
</div>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
</body>
</html>
Die obige Uhr hat Leistungsprobleme. Die berechnete Funktion wurde 6 -mal ausgeführt, von denen drei der Aufbruch der Schleife waren. Jedes Mal, wenn die Schleife geschoben wurde, wurden die Daten erneut untergebracht.
Unten finden Sie den geänderten Code
Die Codekopie lautet wie folgt:
<html ng-App>
<kopf>
<title> Ihr Einkaufswagen </title>
<script type = "text/javaScript">
Funktion cartcontroller ($ scope) {
$ scope.bill = {};
$ scope.items = [
{Titel: 'Paint Pots', Menge: 8, Preis: 3,95},
{Titel: 'Polka Dots', Menge: 17, Preis: 12,95},
{Titel: 'Pebbles', Menge: 5, Preis: 6,95}
];
var totalCart = function () {
var total = 0;
für (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .Price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = insgesamt;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
}
$ scope.
}
</script>
</head>
<body>
<div ng-controller = "cartController">
<div ng-repeat = 'item in items'>
<span> {{item.title}} </span>
<Eingabe ng-model = 'item.quantity'>
<span> {{item.price | Währung}} </span>
<span> {{item.price * item.quantity | Währung}} </span>
</div>
<div> Gesamt: {{Bill.totalcart | Währung}} </div>
<Div> Rabatt: {{Bill.discount | Währung}} </div>
<div> subtotal: {{Bill.subtotal | Währung}} </div>
</div>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
</body>
</html>
Wenn bei großen ITMS -Arrays nur das Bill -Attribut jedes Mal neu berechnet wird, wenn die Seite in Angular angezeigt wird, ist die Leistung viel besser. Wir können dies erreichen, indem wir eine $ Watch -Funktion mit WatchFN erstellen.
Die Codekopie lautet wie folgt:
$ scope. $ watch (
var totalCart = function () {
var total = 0;
für (var i = 0, len = $ scope.items.length; i <len; i ++) {
Total = Total + $ Scope.Items [i] .Price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart = insgesamt;
$ scope.bill.discount = total> 100? 10: 0;
$ scope.bill.subtotal = total - $ scope.bill.discount;
});
Mehrere Dinge überwachen
Wenn Sie mehrere Eigenschaften oder Objekte überwachen und eine Funktion ausführen möchten, wenn sich eine davon ändert, haben Sie zwei grundlegende Optionen:
Überwachen Sie die Werte, nachdem Sie diese Eigenschaften verbinden
Legen Sie sie in ein Array oder ein Objekt und geben Sie dann einen Wert an den Deepwatch -Parameter weiter
Separat erklären:
Im ersten Fall, wenn es ein Objekt in Ihrem Bereich gibt, hat es zwei Eigenschaften A und B, und wenn sich beide Eigenschaften ändern, müssen Sie die Funktion Callme () ausführen, können Sie diese beiden Eigenschaften gleichzeitig überwachen.
Wenn die Liste sehr lang ist, müssen Sie eine Funktion schreiben, um den Wert nach der Verbindung zurückzugeben.
Im zweiten Fall müssen Sie alle Eigenschaften des Objekts überwachen. Sie können dies tun:
Die Codekopie lautet wie folgt:
$ scope. $ watch ("Dinge", callme (...), wahr);
Organisieren Sie Abhängigkeiten mit dem Modul
Anbieter (Name, Objekt oder Konstruktor ()) Beschreibung: Ein konfigurierbarer Dienst ist relativ komplex. Wenn Sie ein Objekt als Parameter übergeben, muss das Objektobjekt eine Funktion namens $ get haben, die den Dienstnamen zurückgeben muss. Andernfalls wird AngularJS denken, dass beim Übergeben eines Konstruktors der Aufruf des Konstruktors das Service -Instanzobjekt zurückgibt.
FACTORY (Name, $ Get Function ()) Beschreibung: Ein nicht konfigurierbarer Dienst, die Erstellungslogik ist relativ kompliziert. Sie müssen eine Funktion angeben, und wenn diese Funktion aufgerufen wird, wird die Serviceinstanz zurückgegeben. Es kann als die Form des Anbieters angesehen werden (Name {$ get: $ getFunction ()}).
Service (Name, Constructor ()) ist ein nicht konfigurierbarer Service, der relativ einfach erstellt. Ähnlich wie der Konstruktorparameter der oben genannten Anbieterfunktion fordert Angular es auf, eine Serviceinstanz zu erstellen.
Beispiel für die Verwendung der Modulfabrik
Die Codekopie lautet wie folgt:
<html ng-App = 'copyModule'>
<kopf>
<title> Ihr Einkaufswagen </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.factory ('items', function () {
var items = {};
items.Query = function () {
Zurückkehren [
{Titel: 'Paint Pots', Beschreibung: 'Töpfe voller Farbe', Preis: 3,95},
{Titel: 'Paint Pots', Beschreibung: 'Töpfe voller Farbe', Preis: 3,95},
{Titel: 'Paint Pots', Beschreibung: 'Töpfe voller Farbe', Preis: 3,95}
];
};
Gegenstände zurückgeben;
});
Funktion coppingController ($ scope, Artikel) {
$ scope.Items = items.Query ();
}
</script>
</head>
<Body ng-controller = 'ShoppingController'>
<h1> Shop !! </h1>
<tabelle>
<tr ng-Repeat = 'Artikel in Elementen'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | Währung}} </td>
</tr>
</table>
</body>
</html>
Einführung von Modulen von Drittanbietern
Erstellen Sie in den meisten Anwendungen ein einzelnes Modul für alle Code und geben Sie alle Abhängigkeiten in dieses Modul ein, was gut funktioniert. Wenn Sie jedoch vorhaben, Dienste oder Anweisungen zu verwenden, die von Paketen von Drittanbietern bereitgestellt werden, werden sie normalerweise mit eigenen Modulen geliefert, und Sie müssen die Abhängigkeitsversorgung im Anwendungsmodul definieren, um sie zu verweisen. Zum Beispiel:
var appmod = angular.module ('App', ['Snazzy', 'Super']);
Beispiele zum Filter
Die Codekopie lautet wie folgt:
<html ng-App = 'copyModule'>
<kopf>
<title> Ihr Einkaufswagen </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = angular.module ('ShoppingModule', []);
ShoppingModule.filter ('Titlecase', function () {
var titlecaseFilter = function (input) {
var words = input.split ('');
für (var i = 0; i <words.length; i ++) {
Wörter [i] = Wörter [0] .charat (0) .TouPPerCase () + Wörter [i] .Slice (1);
}
return words.join ('');
};
TitlecaseFilter zurückgeben;
});
FUNKTION COUPTINGCONTROLLER ($ scope) {
$ scope.pageheading = 'Dies ist ein Testfall';
}
</script>
</head>
<Body ng-controller = 'ShoppingController'>
<h1> {{Pageheading | Titlecase}} </h1>
</body>
</html>