Was ist AngularJS? Einführung in AngularJS_AngularJS

Was ist AngularJS?

AngularJS ist ein strukturelles Framework, das für dynamische WEB-Anwendungen entwickelt wurde. Es ermöglicht Ihnen die Verwendung von HTML als Vorlagensprache und durch die Erweiterung der HTML-Syntax können Sie Ihre Anwendungskomponenten klarer und prägnanter erstellen. Die Innovation besteht darin, dass Sie durch die Verwendung von Datenbindung und Abhängigkeitsinjektion viel Code schreiben müssen. Diese werden alle durch browserseitiges Javascript implementiert, wodurch es auch perfekt in jede serverseitige Technologie integriert ist.

AngularJS wurde entwickelt, um die Mängel von HTML beim Erstellen von Anwendungen zu überwinden. HTML ist eine gute deklarative Sprache, die für die statische Textanzeige entwickelt wurde, aber beim Erstellen von WEB-Anwendungen ist sie schwach. Also habe ich einige Arbeiten durchgeführt (Tricks, wenn Sie so wollen), um den Browser dazu zu bringen, das zu tun, was ich wollte. formatDatum

Normalerweise verwenden wir die folgenden Technologien, um die Mängel der statischen Webseitentechnologie beim Erstellen dynamischer Anwendungen zu beheben:

1. Klassenbibliothek – Eine Klassenbibliothek ist eine Sammlung von Funktionen, die Ihnen beim Schreiben von WEB-Anwendungen helfen können. Es ist Ihr Code, der die Kontrolle übernimmt, und Sie entscheiden, wann Sie die Bibliothek verwenden. Zu den Klassenbibliotheken gehören: jQuery usw.

2. Framework – Ein Framework ist eine spezielle, bereits implementierte WEB-Anwendung, die Sie nur mit spezifischer Geschäftslogik füllen müssen. Das Framework spielt hier eine führende Rolle und ruft Ihren Code entsprechend der spezifischen Anwendungslogik auf. Zu den Frameworks gehören: Knockout, Sproutcore usw.

AngularJS verwendet einen anderen Ansatz und versucht, die Mängel von HTML selbst beim Erstellen von Anwendungen auszugleichen. AngularJS ermöglicht es Browsern, die neue Syntax mithilfe von Strukturen zu erkennen, die wir Direktiven nennen. Zum Beispiel:

1. Verwenden Sie die Syntax mit doppelten geschweiften Klammern {{}} für die Datenbindung 2. Verwenden Sie DOM-Kontrollstrukturen, um DOM-Fragmente zu iterieren oder auszublenden 3. Unterstützungsformulare und Formularvalidierung; 4. Fähigkeit, logische Codes relevanten DOM-Elementen zuzuordnen; 5. Möglichkeit, HTML in wiederverwendbare Komponenten zu gruppieren.


Komplettlösung

AngularJS versucht, eine End-to-End-Lösung für WEB-Anwendungen zu sein. Das bedeutet, dass es sich nicht nur um einen kleinen Teil Ihrer WEB-Anwendung handelt, sondern um eine komplette End-to-End-Lösung. Dadurch wird AngularJS beim Erstellen einer CRUD-Anwendung (Hinzufügen, Erstellen, Abfragen, Abrufen, Aktualisieren, Aktualisieren, Löschen, Löschen) sehr „meinungsorientiert“ (der Originaltext ist eigensinnig, was bedeutet, dass es nicht viele andere Möglichkeiten gibt). Obwohl es „hartnäckig“ ist, stellt es dennoch sicher, dass seine „Sturheit“ nur am Anfangspunkt beim Erstellen der Anwendung vorhanden ist und Sie immer noch die Flexibilität haben, Änderungen vorzunehmen. Einige der herausragenden Funktionen von AngularJS sind wie folgt: 1. Alles, was zum Erstellen einer CRUD-Anwendung verwendet werden kann, umfasst: Datenbindung, grundlegende Vorlagenkennungen, Formularvalidierung, Routing, Deep Linking, Komponentenwiederverwendung und Abhängigkeitsinjektion.

2. Das Testen umfasst: Unit-Tests, End-to-End-Tests, Simulation und ein automatisiertes Test-Framework.

3. Seed-Anwendung mit Verzeichnislayout und Testskripten als Ausgangspunkt.

Die Niedlichkeit von AngularJS

AngularJS vereinfacht die Anwendungsentwicklung, indem es Entwicklern eine höhere Abstraktionsebene bietet. Wie bei anderen Abstraktionstechniken geht auch hier etwas Flexibilität verloren. Mit anderen Worten: Nicht alle Anwendungen sind für AngularJS geeignet. Das Hauptanliegen von AngularJS ist die Erstellung von CRUD-Anwendungen. Glücklicherweise sind mindestens 90 % der WEB-Anwendungen CRUD-Anwendungen. Um jedoch zu verstehen, was für die Erstellung mit AngularJS geeignet ist, müssen Sie verstehen, was für die Erstellung mit AngularJS nicht geeignet ist. Zum Beispiel unterscheiden sich Spiele, grafische Schnittstelleneditoren und Anwendungen mit häufigen und komplexen DOM-Operationen stark von CRUD-Anwendungen und sind nicht für die Erstellung mit AngularJS geeignet. In solchen Situationen ist es möglicherweise besser, eine leichtere, einfachere Technologie wie jQuery zu verwenden.

Ein einfaches AngularJS-Beispiel

Das Folgende ist eine typische CRUD-Anwendung, die ein Formular enthält. Der Formularwert wird zunächst validiert und dann zur Berechnung des Gesamtwerts verwendet, der in einem lokalen Stil formatiert wird. Hier sind einige gängige Konzepte unter Entwicklern, die Sie zunächst verstehen müssen: 1. Ordnen Sie das Datenmodell (Datenmodell) der Ansicht (UI) zu 2. Benutzereingaben schreiben, lesen und überprüfen; 3. Berechnen Sie neue Werte gemäß dem Modell 4. Lokalisieren Sie das Ausgabeformat.

index.html:

Code kopieren

Der Code lautet wie folgt:

   
       
       
   
   
       

            Rechnung:
           

           

           
                MengeKosten
               
                   
                   
               
           
           

---

            Gesamt: {{Menge * Kosten | Währung}}
       

   

script.js:

复制代码 代码如下:

Funktion InvoiceCntl($scope) {
    $scope.qty = 1;
    $scope.cost = 19,95;
}

End-to-End-Test:

复制代码 代码如下:

it('sollte eine Winkelbindung anzeigen', function() {
    Expect(binding('qty * cost')).toEqual('$19.95');
    input('qty').enter('2');
    input('cost').enter('5.00');
    Expect(binding('qty * cost')).toEqual('$10.00');
});
Funktion InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}

运行效果：

复制代码 代码如下:

Rechnung:
Menge Kosten
Gesamt: {{Menge * Kosten | Währung}}

试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在``标签里, 我们用一个`ng -app` ist die neueste Version von „ng-app“.标识符会使AngularJS**自动初始化**(auto initialize)你的应用。 我们用``标签来加载AngularJS脚本:

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse