Was ist AngularJs?
AngularJS ist ein strukturelles Rahmen für dynamische Webanwendungen. Sie können HTML als Vorlagensprache verwenden. Durch Erweiterung der HTML -Syntax können Sie Ihre Anwendungskomponenten klarer und besser erstellen. Seine Innovation ist, dass Datenbindungs- und Abhängigkeitsinjektion verwendet werden, was die Notwendigkeit beseitigt, viel Code zu schreiben. All dies wird über das Browser-Seite-JavaScript implementiert, was es auch perfekt mit jeder serverseitigen Technologie kombiniert.
AngularJS ist so konzipiert, dass sie die Mängel von HTML bei Gebäudemanien überwinden. HTML ist eine gute deklarative Sprache, die für die statische Textanzeige entwickelt wurde, aber es ist schwach, wenn Sie Webanwendungen erstellen möchten. Also habe ich etwas gearbeitet (vielleicht denken Sie, es sei ein kleiner Trick), um den Browser dazu zu bringen, das zu tun, was ich will. Formatdat
Normalerweise verwenden wir die folgenden Technologien, um die Mängel der statischen Web -Technologie beim Aufbau dynamischer Anwendungen zu lösen:
1. Klassenbibliothek - Klassenbibliothek ist eine Sammlung von Funktionen, mit denen Sie Webanwendungen schreiben können. Es ist Ihr Code, der Sie führt, und es liegt an Ihnen, zu entscheiden, wann die Klassenbibliothek verwendet werden soll. Klassenbibliotheken umfassen: jQuery usw.
2. Framework - Framework ist eine spezielle, implementierte Webanwendung. Sie müssen nur eine bestimmte Geschäftslogik ausfüllen. Das Framework spielt hier eine führende Rolle und ruft Ihren Code basierend auf der spezifischen Anwendungslogik auf. Zu den Frames gehören: Knockout, Sproutcore usw.
AngularJS verwendet einen anderen Ansatz, der versucht, die Mängel von HTML selbst in den Bauanwendungen auszugleichen. AngularJS ermöglicht es Browsern, neue Syntax durch Verwendung einer Struktur zu erkennen, die wir als Kennungen bezeichnen. Zum Beispiel:
1. Verwenden Sie Doppelsproces {{}} Syntax für die Datenbindung;
2. Verwenden Sie die DOM -Kontrollstruktur, um DOM -Fragmente zu iterieren oder auszublenden;
3.. Unterstützungsformen und Formbestätigung;
4.. In der Lage sein, den logischen Code mit verwandten DOM -Elementen zu verknüpfen;
5. Kann HTML in wiederverwendbare Komponenten unterteilen.
End-to-End-Lösungen
AngularJS versucht, eine End-to-End-Lösung in Webanwendungen zu werden. Dies bedeutet, dass es nicht nur ein kleiner Teil Ihrer Webanwendung ist, sondern eine vollständige End-to-End-Lösung. Auf diese Weise erscheinen AngularJs "hartnäckig" beim Erstellen einer Anwendung mit CRUD (addieren, abfragen, Abrufen, Aktualisieren, Aktualisieren, Löschen löschen) (der ursprüngliche Text ist der Meinung, was bedeutet, dass es nicht viele andere Möglichkeiten gibt). Trotz seiner "Sturheit" stellt es immer noch sicher, dass seine "Sturheit" nur am Ausgangspunkt des Aufbaus Ihrer Anwendung liegt und dass Sie sich immer noch flexibel ändern können. Einige der herausragenden Merkmale von AngularJS sind wie folgt:
1. Alle möglichen Inhalte, die zum Erstellen einer CRUD -Anwendung verwendet werden können, umfassen: Datenbindung, grundlegende Vorlagenkennung, Formularüberprüfung, Routing, tiefe Verknüpfung, Wiederverwendung von Komponenten und Abhängigkeitsinjektion.
2. Die Testaspekte umfassen: Unit-Tests, End-to-End-Tests, Simulation und automatisierte Test-Frameworks.
3. Seed Application mit Verzeichnislayout und Testskripten als Ausgangspunkt.
Die Niedlichkeit von AngularJs
AngularJS vereinfacht die Anwendungsentwicklung, indem sie ein höheres Abstraktionsniveau für Entwickler darstellt. Wie andere abstrakte Techniken verliert dies auch einige Flexibilität. Mit anderen Worten, nicht alle Anwendungen sind für die Verwendung mit AngularJs geeignet. AngularJS berücksichtigt hauptsächlich CRUD -Anwendungen. Glücklicherweise sind mindestens 90% der Webanwendungen Crud -Anwendungen. Um zu verstehen, was für den Bau mit AngularJs geeignet ist, müssen Sie verstehen, was nicht zum Bau mit AngularJs geeignet ist.
Wie Spiele und grafische Schnittstelleneditoren unterscheiden sich Anwendungen mit häufigen und komplexen DOM -Operationen stark von CRUD -Anwendungen. Sie eignen sich nicht zum Bauen mit AngularJs. Es ist möglicherweise besser, einige leichtere, einfachere Techniken wie jQuery wie diese zu verwenden.
Eine einfache AngularJS -Instanz
Im Folgenden finden Sie eine typische CRUD -Anwendung, die ein Formular enthält. Der Formwert wird zuerst verifiziert und dann verwendet, um den Gesamtwert zu berechnen, der im lokalen Stil formatiert ist. Hier sind einige gemeinsame Konzepte für Entwickler. Sie müssen zuerst verstehen:
1. assoziieren Sie das Datenmodell (Datenmodell) der Ansicht (UI);
2. Schreiben, lesen und überprüfen Sie die Benutzereingabe.
3. Berechnen Sie neue Werte basierend auf dem Modell;
4. Lokalisieren Sie das Ausgangsformat.
Index.html:
Die Codekopie lautet wie folgt:
<! docType html>
<html ng-App>
<kopf>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<div ng-controller = "invoicecntl">
<b> Rechnung: </b>
<br>
<br>
<tabelle>
<tr> <td> Menge </td> <td> Kosten </td> </tr>
<tr>
<td> <Eingabe type = "Integer" min = "0" ng-model = "qty" erforderlich> </td>
<td> <Eingabe type = "number" ng-model = "cost" erforderlich> </td>
</tr>
</table>
<hr>
<b> Gesamt: </b> {{qty * cost | Währung}}
</div>
</body>
</html>
script.js:
Die Codekopie lautet wie folgt:
Funktion invoicecntl ($ scope) {
$ scope.qty = 1;
$ scope.Cost = 19,95;
}
End-to-End-Test:
Die Codekopie lautet wie folgt:
It ('sollte die Winkelbindung zeigen', function () {
erwarten (bindend ('qty * cost')). gift ('$ 19,95');
input ('qty'). Enter ('2');
input ('cost'). ENTER ('5.00');
erwarten (bindend ('qty * cost')). gift ('$ 10,00');
});
Funktion invoicecntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19,95;}
Laufeffekt:
Die Codekopie lautet wie folgt:
Rechnung:
Mengenkosten
Gesamt: {{qty * cost | Währung}}
Probieren Sie das obige Beispiel aus und schauen Sie uns an, wie dieses Beispiel zusammenarbeitet. Im `` -Tag verwenden wir eine "ng-App" -Kennung, um anzuzeigen, dass dies eine AngularJS-Anwendung ist. Diese Kennung von "ng-App" führt zu AngularJs **, um Ihre Anwendung automatisch zu initialisieren. Wir verwenden das "` "-Tag, um AngularJS-Skript zu laden: <script src =" http://code.angularjs.org/angular-1.1.0.min.js ">
Durch das Einstellen der NG-Model-Eigenschaft im <eintrag> -Tag wird AngularJS die Daten automatisch in Zwei-Wege-Wege binden. Gleichzeitig haben wir auch einige einfache Datenüberprüfungen durchgeführt:
Die Codekopie lautet wie folgt:
Menge: <Eingabe type = "Integer" min = "0" ng-model = "qty" erforderlich>
Kosten: <Eingabe type = "number" ng-model = "Kosten" erforderlich>
Das Widget dieses Eingangsfelds sieht gewöhnlich aus, ist jedoch nicht gewöhnlich, wenn Sie die folgenden Punkte erkennen:
1. Wenn die Seite geladen wird, erzeugt AngularJs Variablen mit demselben Namen gemäß dem im Widget deklarierten Modellnamen (qty, cost). Sie können sich diese Variablen als M (Modell) im MVC -Entwurfsmuster vorstellen.
2. Beachten Sie, dass die Eingabe im obigen Widget über besondere Fähigkeiten verfügt. Wenn Sie keine Daten eingeben oder die Eingabedaten ungültig sind, wird dieses Eingabefeld automatisch rot. Diese neue Funktion des Eingabegleiters erleichtert Entwicklern die Implementierung der gemeinsamen Feldüberprüfungsfunktionen in CRUD -Anwendungen.
Schließlich können wir uns die mysteriösen Doppelklammern ansehen:
Die Codekopie lautet wie folgt:
Gesamt: {{qty * cost | Währung}}
Dieses {{Expression}} Tag ist AngularJS -Datenbindung. Die Ausdrücke darin können eine Kombination eines Ausdrucks und eines Filters sein ({{Ausdruck | Filter}}). AngularJS stellt Filter zur Formatierung von Eingangs- und Ausgabedaten bereit.
Im obigen Beispiel fordert der Ausdruck in {{}} AngularJs auf, die aus dem Eingangsfeld erhaltenen Daten zu multiplizieren, dann das Multiplikationsergebnis mit dem lokalen Währungsstil zu formatieren und dann auf die Seite auszugeben.
Es ist erwähnenswert, dass wir weder AngularJS -Methoden aufrufen noch eine bestimmte Logik wie die Verwendung eines Frameworks schreiben, aber die oben genannten Funktionen erfüllt haben. Hinter dieser Implementierung steht der Browser mehr als zuvor, um statische Seiten zu generieren, sodass es den Anforderungen dynamischer Webanwendungen entspricht. AngularJS senkt den Entwicklungsschwellenwert für dynamische Webanwendungen bis zu dem Punkt, an dem keine Klassenbibliotheken oder Frameworks erforderlich sind.
AngularJS '"Zen Tao (Konzept)" "
Angular ist der Ansicht, dass beim Erstellen von Ansichten (UIs) und zum Schreiben von Softwarelogik der deklarative Code viel besser ist als der imperative Code, obwohl der imperative Code sehr geeignet ist, Geschäftslogik auszudrücken.
1. Die Entkopplung von DOM -Operationen und Anwendungslogik ist eine sehr gute Idee, die die Abstimmbarkeit des Codes erheblich verbessern kann.
2. Es ist eine sehr, sehr gute Idee, Tests und Entwicklung gleichermaßen zu behandeln. Die Schwierigkeit des Tests hängt in hohem Maße von der Struktur des Codes ab.
3. Die Client- und Serverseite entkoppeln ist eine besonders gute Praxis. Es kann es beiden Seiten ermöglichen, sich parallel zu entwickeln und beider Seiten wiederzuverwenden;
V.
5. Es ist immer gut, "den Komplex in die Vereinfachung zu vereinfachen und es zu Null zu vereinfachen".
AngularJs kann Sie vom folgenden Albtraum befreien:
1. Verwenden Sie Rückrufe: Die Verwendung von Rückrufen stört die Lesbarkeit Ihres Codes, macht Ihren Code fragmentiert und es ist schwierig, die ursprüngliche Geschäftslogik zu erkennen. Es ist eine gute Sache, einen gemeinsamen Code wie Rückrufe zu entfernen. Ein drastisch reduzierter Code, den Sie aufgrund des Designs der JavaScript -Sprache schreiben müssen, können Sie die Logik Ihrer Anwendung klarer sehen.
2. Schreiben Sie manuell Code für den Betrieb von DOM-Elementen: Der Betrieb von DOM ist ein sehr grundlegender Bestandteil von AJAX-Anwendungen, aber es ist immer "umständlich" und fehleranfällig. Die auf deklarative Weise beschriebene Benutzeroberfläche kann sich mit der Änderung des Anwendungsstatus ändern und es Ihnen ermöglicht, sich vom Schreiben von Dom-Betriebscode auf niedrigem Niveau zu befreien. In den meisten in AngularJS geschriebenen Anwendungen müssen Entwickler keine Codes mehr schreiben, die DOM selbst betreiben, aber Sie können sie trotzdem schreiben, wenn Sie möchten.
3.. Lesen und schreiben Sie Daten an die Benutzeroberfläche: Ein großer Teil der AJAX -Anwendungen sind CRUD -Operationen. Ein klassischer Prozess besteht darin, die Serverdaten in interne Objekte zu formulieren, das Objekt dann in HTML -Formulare zu kompilieren, und der Benutzer ändert das Formular und überprüft dann das Formular. Wenn ein Fehler vorliegt, wird der Fehler angezeigt und die Daten dann in interne Objekte neu organisiert und an den Server zurückgegeben. Es gibt zu viel Code, um in diesem Prozess wiederholt zu werden, sodass der Code immer den gesamten Ausführungsprozess der Anwendung zu beschreiben scheint, anstatt die spezifischen Geschäftslogik- und Geschäftsdetails.
4. Sie müssen viel grundlegenden Code schreiben, bevor Sie beginnen: Normalerweise müssen Sie viel grundlegende Code schreiben, um eine "Hello World" -Anwendung zu implementieren. Mit AngularJS werden einige Dienste bereitgestellt, mit denen Sie Ihre Anwendung problemlos schreiben können. Diese Dienste werden Ihrer Anwendung automatisch mit einer Guice-ähnlichen Abhängigkeitseinspritzung im Injektion im Injektion in der Injektion im Stil von Guice hinzugefügt, mit der Sie schnell die spezifische Entwicklung Ihrer Anwendung eingeben können. Besonders wahr ist, dass Sie den Initialisierungsprozess automatisierter Tests vollständig erfassen können.