Wie lernt man tief in AngularJS? Die neueste einführende Lernerfahrung von AngularJS

In diesem Artikel geht es um die Selbstlernerfahrung von angularjs . Wenn Sie gut lernen möchten, lesen Sie mehr über die Lernergebnisse anderer. Wenn Sie jedoch mehr lesen, ist dies möglicherweise nicht der Fall , Sie werden sich auf jeden Fall wiederfinden, lassen Sie uns diesen Artikel jetzt lesen

1: Einführung in AngularJS

1 zu AngularJS : AngularJS ist ein JavaScript-Framework .

Die vier Kernideen von AngularJS: Abhängigkeitsinjektion, Modularisierung, bidirektionale Bindung und semantische Tags.

2. Entwicklungstools und Debugging-Tools : Verwenden Sie Durchsuchen Gerät zum Debuggen.

3. Die erste AngularJS-Webanwendung : ①Führen Sie die Datei „angular.js“ ein ( js/angular.min.js ) und verwenden Sie Die ng-app -Direktive deklariert AngularJS-Verwaltungsgrenzen.

②AngularJS Einfache Verwendung der Zwei-Wege-Bindung : doppelte Klammern {{}}

③Häufig verwendete Befehle: Siehe offizielle API

④Deklarieren Sie in : angle.module('app', [ ])

.controller('myctrl ' ,function($scope){

🎜> Andere vor js definierte Module, myctrl ist der Name des ng-Controllers, {{msg}}

2: Advanced AngularJS

1.

Design und Konstruktion von AngularJS Front-End MVC : Siehe ④Der Schreibstil ist ein einfacher MVC 2 > Bindungsanweisung implementiert bidirektionale Datenbindung

: ng-bind oder {{ }} (Hinweis: Verstehen Sie den Befehl ng-clock) 3, Verwendung des Controllers

: Definieren Sie den Controller; verwenden Sie ng-bind, um Daten zu binden und den Controller-Bereich anzuzeigen 🎜> 4. Verwendung von Variablen und Methoden im $scope

: ① Definieren Sie Methoden für $scope und führen Sie verbindliche Aufrufe auf der Seite durch.

② Variablen auf $scope definieren und in Methoden verwenden: Achten Sie auf die Art und Weise, wie die $scope-Methode aufgerufen wird.

3: AngularJS Advanced – Nutzung von Diensten und Anweisungen 1. Passen Sie einen Servicedienst an :

① Es gibt viele Ausdrucksformen für Dienste in AngularJS. Lernen Sie, Dienste in Controller zu verwenden

②Im Zu den Ausdrücken von Diensten in AngularJS gehören: Wert, Konstante (Konstante), Fabrik (entspricht dem Fabrikmodus), Dienste

2. Anwendung von Diensten : So verwenden Sie mehrere Shared Daten in Controllern

3. Verwendung allgemeiner Befehle :

ng-bind data bidirektionale Bindung (entspricht {{ }});

ng-model bindet das Formular im HTML-Element to Scope ;

ng-show zeigt das angegebene HTML-Element an, wenn der Ausdruck wahr ist, andernfalls verbirgt es das angegebene HTML-Element ;

ng-hide verbirgt das angegebene HTML-Element, wenn der Ausdruck wahr ist.

ng-if fügt es hinzu, wenn der Ausdruck wahr ist. Entfernen Sie das Element und zeigen Sie es an. Wenn falsch, entfernen Sie das Element (aus dem DOM entfernt)

ng-submit Die Anweisung wird verwendet, um die angegebene Funktion auszuführen, nachdem das Formular gesendet wurde ;

ng-disabled Die Anweisung legt das Attribut „disabled“ des Formulareingabefelds fest (input, select oder textarea). Wenn der Ausdruck „true“ zurückgibt, ist das Formularfeld deaktiviert ;

ng-checkde-Direktive wird verwendet, um das checkde-Attribut eines Kontrollkästchens (Checkbox) oder eines Optionsfelds (Radio) festzulegen. Wenn „true“ zurückgegeben wird, wird dies der Fall sein selected;

Die ng-src-Direktive überschreibt das src-Attribut des -Elements

ng-herf -Direktive überschreibt das native -Element-href-Attribut ;

ng- class wird verwendet, um eine oder mehrere CSS-Klassen dynamisch an HTML-Elemente zu binden ; Die

ng-selected -Direktive wird verwendet, um das ausgewählte Attribut des -Elements in der -Liste festzulegen 🎜>;

ng-change Die -Direktive wird verwendet, um AngularJS mitzuteilen, was zu tun ist, wenn der Wert eines HTML-Elements ändert sich. muss mit der ng-model -Direktive verwendet werden. Die

ng-change -Direktive überschreibt nicht das native onchange-Ereignis, wenn dieses Ereignis ausgelöst wird, ng-change Sowohl Ausdrücke als auch native Onchange-Ereignisse werden ausgeführt.

4. Verwendung von allgemeinen Anweisungen ng-repeat : Anweisungen Wird verwendet, um HTML-Elemente für eine bestimmte Anzahl von Malen zu durchlaufen ( Sammlung muss ein Array oder Objekt sein)

eindeutige Attribute ($index-Array-Index, $first (Wenn es das erste ist, wird true zurückgegeben), $last) verwenden Sie

Viertens: Integrierter AngularJS-Dienst – Verwendung von $http

1. Verwenden Sie $http, um MySQL-Daten abzufragen : Senden Sie zuerst eine $http-Anfrage und geben Sie die MySQL-Daten über zurück an das Frontend die Backend-Entwicklungssprache. 2. $http-Anfrage mit Parametern zum Implementieren des Hinzufügens, Löschens und Änderns der Datenbank : Fall

3 . Beispiel für Benutzerrollenberechtigungen: Üben Sie einfach

Fünf: Erweiterte AngularJS - Verwendung der Richtlinie

1 Anweisung zum Anpassen der HTML-Komponente : Bedeutung und Anwendung von „Restrict“ (A: Attribut, E: Element, C: Klassenname), Verwendung von „Replace“, Verwendung von Vorlage

2. Mehr Verwendung erfordert, sich gegenseitig zwischen Anweisungen aufzurufen; erfahren Sie mehr über die Verwendung von Link

Sechs: Mobile APP-Entwicklung mit AngularJS

1. Mobile Front-End-Einführung in das Framework lonic;

2. Einführung in Cordova: Eine Front-End-Plattform und eine Reihe von Codes können damit gepackt werden, um das aktuelle Android zu werden und IOS-Plattformen;

3. Finden Sie einige Fälle im Internet zum Üben.

Dieser Artikel endet hier (falls Sie mehr sehen möchten). , gehen Sie zur chinesischen PHP-Website AngularJS-Benutzerhandbuch Mittelschule). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.