Detaillierte Erläuterung der AngularJS-Syntax (Fortsetzung)_AngularJS

src- und href-Attribute

In AngularJS sollte src als ng-src und href als ng-href geschrieben werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

Einige Texte

Ausdruck

Sie können in Vorlagen einfache mathematische Operationen, Vergleichsoperationen, bitweise Operationen, Referenzarrays, Objektnotationen usw. ausführen. Ausdrücke verwenden jedoch einen benutzerdefinierten Interpreter von Angular), anstatt die eval()-Funktion von Javascript zu verwenden, daher gibt es größere Einschränkungen.
Obwohl Ausdrücke hier in vielerlei Hinsicht strenger sind als Javascript, sind sie toleranter gegenüber undefiniert und null. Wenn ein Fehler auftritt, zeigt die Vorlage einfach nichts an, anstatt einen NullPointerException-Fehler auszulösen. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

{{computer() /10 }}

//Obwohl es legal ist, fügt es die Geschäftslogik in die Vorlage ein.

Trennen Sie die Verantwortlichkeiten von UI und Controller

Controller sind an bestimmte DOM-Fragmente gebunden, und diese Fragmente sind der Inhalt, den sie verwalten müssen. Es gibt zwei Möglichkeiten, einen Controller einem DOM-Knoten zuzuordnen. Eine besteht darin, ihn über ng-controller in der Vorlage zu deklarieren. Die zweite besteht darin, ihn über Routing an ein dynamisch geladenes DOM-Vorlagenfragment zu binden. Wir können verschachtelte Controller erstellen. Sie können Datenmodelle und Funktionen über Vererbungsstrukturen teilen. Die eigentliche Verschachtelung erfolgt auf dem $scope-Objekt. Durch den internen primitiven Vererbungsmechanismus wird der $scope des übergeordneten Controllerobjekts an das innere verschachtelte $ übergeben Geltungsbereich (alle Eigenschaften, einschließlich Funktionen). Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

...

Verwenden Sie $scope, um Modelldaten verfügbar zu machen

Sie können $scope-Eigenschaften explizit erstellen, zum Beispiel $scope.count = 5. Sie können Datenmodelle auch indirekt über die Vorlage selbst erstellen.

Nach Ausdruck. Zum Beispiel

Code kopieren Der Code lautet wie folgt:

Zählung auf drei einstellen

NG-Model für Formularelemente verwenden

Ähnlich wie Ausdrücke funktionieren die auf ng-model angegebenen Modellparameter auch im äußeren Controller. Der einzige Unterschied besteht darin, dass dadurch eine bidirektionale Bindung zwischen dem Formularelement und dem angegebenen Modell erstellt wird.

Verwenden Sie Watch, um Änderungen im Datenmodell zu überwachen

Die Funktionssignatur von $watch lautet: $watch(watchFn,watchAction,deepWatch)
watchFn ist eine Zeichenfolge mit einem Angular-Ausdruck oder einer Angular-Funktion, die den aktuellen Wert des überwachten Datenmodells zurückgibt. watchAction ist eine Funktion oder ein Ausdruck, die aufgerufen wird, wenn sich watchFn ändert. Seine Funktionssignatur lautet:
function(newValue,oldValue,scope) deepWatch Wenn dieser optionale boolesche Parameter auf true gesetzt ist, weist er Angular an, zu prüfen, ob sich jede Eigenschaft des überwachten Objekts geändert hat. Sie können diesen Parameter verwenden, wenn Sie Elemente in einem Array oder alle Eigenschaften eines Objekts überwachen möchten, anstatt einen einzelnen Wert zu überwachen. Beachten Sie, dass Angular Arrays oder Objekte durchlaufen muss. Wenn die Sammlung groß ist, ist der Vorgang kompliziert und umfangreich.

Die $watch-Funktion gibt eine Funktion zurück. Wenn Sie keine Änderungsbenachrichtigungen benötigen, können Sie diese zurückgegebene Funktion verwenden, um sich vom Monitor abzumelden.
Wenn wir eine Eigenschaft überwachen und uns dann von der Überwachung abmelden müssen, können wir den folgenden Code verwenden: var dereg = $scope.$watch('someModel.someProperty',callbackOnChange());
... dereg();

Der Beispielcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

   
   


   

       

            {{item.title}}
           
            {{item.price | Währung}}
            {{item.price * item.quantity | Währung}}
       

       

Gesamt: {{totalCart()| Währung }}

       

Rabatt: {{bill.discount | Währung}}

       

Zwischensumme: {{subtotal() | Währung}}

   

   

上面的watch存在性能问题, calculateTotals函数执行了6次, 其中三次是因为循坏, 每次循环, 都会重新渲染数据.
下面是改良后的代码

复制代码 代码如下:

   
   


   

       

            {{item.title}}
           
            {{item.price | Währung}}
            {{item.price * item.quantity | Währung}}
       

       

Gesamt: {{bill.totalcart| Währung }}

       

Rabatt: {{bill.discount | Währung}}

       

SubTotal: {{bill.subtotal | Währung}}

   

   

对于大型的itms数组来说,如果每次在Angular显示页面时只重新计算bill属性,那么性能会好很多。通过创建一个带有watchFn的$watch函数，我们可以实现这一点.

复制代码 代码如下:

$scope.$watch(
var totalCart = function() {
            var total = 0;
for (var i=0,len=$scope.items.length;i                          total = total $scope.items[i].price * $scope.items[i].quantity;
                }
                      $scope.bill.totalcart = total;
$scope.bill.discount = total > 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 Möglichkeiten:

Überwachen Sie den Wert der Verkettung dieser Eigenschaften

Fügen Sie sie in ein Array oder Objekt ein und übergeben Sie einen Wert an den Parameter „deepWatch“

Anleitung bzw.:
Im ersten Fall verfügt Ihr Gültigkeitsbereich über zwei Eigenschaften: a und b. Wenn sich diese beiden Eigenschaften ändern, müssen Sie diese beiden Eigenschaften gleichzeitig überwachen $scope.$watch('things.a Things.b',callMe(...));
Wenn die Liste sehr lang ist, müssen Sie eine Funktion schreiben, um den verketteten Wert zurückzugeben.

Im zweiten Fall müssen Sie alle Eigenschaften des Dingeobjekts überwachen. Sie können dies tun:

Code kopieren Der Code lautet wie folgt:

$scope.$watch('things',callMe(...),true);

Verwenden Sie Module, um Abhängigkeiten zu organisieren

Provider(Name,Objekt ODER Konstruktor()) Beschreibung: Ein konfigurierbarer Dienst, der komplexe Logikvergleiche erstellt. Wenn Sie ein Objekt als Parameter übergeben, muss das Objektobjekt über eine Funktion namens $get verfügen, die den Namen des Dienstes zurückgeben muss. Andernfalls geht AngularJS davon aus, dass Sie einen Konstruktor übergeben, und der Aufruf des Konstruktors gibt das Dienstinstanzobjekt zurück.
Factory(name,$get Function()) Beschreibung: Ein nicht konfigurierbarer Dienst, dessen Erstellungslogik relativ kompliziert ist. Sie müssen eine Funktion angeben, die beim Aufruf die Dienstinstanz zurückgibt. Es kann als Provider(name,{$get:$getFunction()}) gesehen werden.
service(name,constructor()) Da es sich um einen nicht konfigurierbaren Dienst handelt, ist das Erstellen von Logik relativ einfach. Ähnlich wie beim Konstruktorparameter der oben genannten Anbieterfunktion kann Angular eine Dienstinstanz erstellen, indem es diese aufruft.

Beispiel für die Verwendung der Modulfabrik

Code kopieren Der Code lautet wie folgt:

Shoppen!!

   
        {{item.title}}
        {{item.description}}
        {{item.price | Währung}}
   

引入第三方模块

这样就会工作的很好.但是,如果你打算使用第三方包提供的服务或者指令,他们一般都带有自己的模块,你需要在应用模块中定义依赖关心才能引用他们.

var appMod = angle.module('app',['Snazzy','Super']);

关于filter的例子

复制代码 代码如下:

{{pageHeading | titleCase}}