Einführung in Angular und Einführung in seine Funktionen_AngularJS

Zuvor wurden bei der Front-End-Entwicklung (Web oder Mobil) hauptsächlich native jQuery-JS verwendet. Wenn Sie ein Front-End-UI-Framework verwenden, werden möglicherweise auch einige APIs bereitgestellt, die Sie verwenden können. Und viele UI-Frameworks basieren derzeit auf jQuery, also sprechen wir über die große Spanne von jQuery bis zu AngularJS. Ich habe mich eine Zeit lang mit AngularJS beschäftigt:

Über den Vergleich mit jquery

Erstens ist Angular ein MVC-Framework. Der Unterschied zu jQuery besteht darin, dass ersteres sich der Entkopplung von MVC-Code widmet und Modell, Controller und Ansicht zum Organisieren des Codes verwendet, während letzteres Ihnen viele API-Funktionen bietet dass Sie nicht viele native JS schreiben müssen, um komplexere Effekte zu erzielen, z. B. $.animate. Wenn für einen solchen Effekt native JS geschrieben werden müssen, ist die Menge an Code relativ groß

Zweitens definiert jQuery nicht, wie Ihr Code organisiert ist. Sie können ihn als Referenz in eine separate js-Datei einfügen oder ihn direkt in die Seite schreiben und mit Skript-Tags umschließen, oder Sie können ihn sogar direkt schreiben Inline. Angularjs unterteilt eine HTML-Seite in mehrere Module. Jedes Modul kann auch miteinander kommunizieren, aber die Gesamtstruktur ist relativ klar Die Codeorganisation ist modular.

Schließlich besteht die Idee von jQuery darin, zuerst die Seite zu entwerfen, dann Dom-Operationen auf der vorhandenen Seite auszuführen und dann die Seite anzuzeigen. Die Winkelansicht kann jedoch nur ein Frame sein und die Dom-Operationen oder die Zeitüberwachung Die Ansichten sind alle in der Direktive implementiert, und im Allgemeinen schreiben Sie Dom-Operationscode selten direkt, solange Sie sich das Modell anhören. Wenn sich das Modell ändert, ändert sich auch die Ansicht.

Über anwendbare Anlässe

jQuery sollte für die meisten Webentwicklungen geeignet sein, und es gibt auch eine mobile Version (jQuery Mobile). Einige Leute sagen, dass AngularJS besser für SPA geeignet ist (ich persönlich denke, dass SPA auf Mobiltelefonen zu Leistungsproblemen führen kann, weil es schmutzig ist). Der Überprüfungsmechanismus wirkt sich auf die Leistung aus. Auf der Website können weiterhin einige CRUD-Anwendungen oder Verwaltungssoftware verwendet werden (natürlich ist das Verständnis hier möglicherweise nicht korrekt, und wir werden durch eingehendes Studium mehr darüber erfahren und es verwenden).

Über die Kombination von UI

Die Entwicklung eines Produkts erfordert die Verwendung einer Front-End-Benutzeroberfläche. Derzeit basieren viele Benutzeroberflächen auf jQuery. Wenn Sie also AngularJS und diese Ui-Komponenten verwenden möchten, müssen Sie einige Komponenten mit der AngularJS-Direktive neu schreiben. Dieser Prozess ist problematischer. Glücklicherweise stellt uns Angular einige UI-Komponenten zur Verfügung, die verwendet werden können (die Webseite wird hauptsächlich mit Bootstrap-Front-End-Komponenten kombiniert),

http://angular-ui.github.io /, und in Das mobile Terminal wird hauptsächlich mit dem ionischen Framework http://ionicframework.com/ kombiniert, aber mit der Entwicklung von Angular haben viele HTML5-Front-End-Frameworks nach und nach die AngularJS integriert Version zur Verwendung.

Über die Funktionen von AngularJS

1. Zwei-Wege-Bindung von Daten: Dies ist möglicherweise die aufregendste Funktion. Die Daten in der Ansichtsebene und die Daten in der Modellebene sind bidirektional. Wenn sich eine davon ändert, ändert sich auch die andere . Dazu müssen Sie keinen Code schreiben! (Überlegen Sie, wie Sie es mit jQuery machen)

2. Code-Modularisierung: Der Code jedes Moduls hat unabhängig seinen eigenen Umfang, sein eigenes Modell, seinen eigenen Controller usw.

3. Leistungsstarke Anweisungen können viele Funktionen in HTML-Tags, Attribute oder Kommentare usw. kapseln, was die Struktur von HTML erheblich verschönert und die Lesbarkeit verbessert

4. Abhängigkeitsinjektion, dieses Back-End-Sprachentwurfsmuster wird dem Front-End-Code zugewiesen, was bedeutet, dass der Front-End-Code die Wiederverwendbarkeit und Flexibilität verbessern kann. Zukünftige Modelle können eine große Anzahl von Operationen auf dem Client durchführen , und der Server stellt nur Datenquellen und Vorgänge bereit, die andere Clients nicht ausführen können

5. Testgetriebene Entwicklung, AngularJS hat dies von Anfang an zum Ziel. Anwendungen, die mit Angular entwickelt wurden, können problemlos Unit-Tests und End-to-End-Tests durchführen, wodurch die Mängel des herkömmlichen JS-Codes behoben werden und pflegen

Das Obige ist die Schlussfolgerung, die aus dem Studium von AngularJS über einen bestimmten Zeitraum gezogen wurde. In einigen von ihnen kann es einige Auslassungen geben. Als nächstes werde ich einige davon Schritt für Schritt erläutern.