1. Beginn
Angular JS ist ein Satz von Frameworks, Vorlagen, Datenbindung und reichhaltigen UI -Komponenten, die zur Entwicklung von Webseiten verwendet werden. Es bietet die Architektur von Webanwendungen ohne manuelle DOM -Vorgänge. AngularJS ist sehr klein, nur 60.000, kompatibel mit Mainstream -Browsern und passt gut zu JQuery.
2. Grundprinzipien verstehen
① Einige Einführungen in Angular
1. Grundwissen
1.angular gab IE8 auf
2. Die vier Kernpunkte sind MVC-, Modularitäts-, Anweisungssystem- und Zwei-Wege-Datenbindung
2. Einige Prinzipien
1. Verwenden Sie den Controller nicht wieder. Ein Controller ist im Allgemeinen nur für ein kleines Stück Sicht verantwortlich.
2. Betreiben Sie DOM nicht im Controller.
3. Formatieren Sie keine Daten in Controllerller, NG verfügt über gute Formsteuerelemente.
V.
5. Im Allgemeinen rufen Controller sich nicht gegenseitig an und die Interaktion zwischen den Controllern wird durch Ereignisse durchgeführt.
6.angular verwendet Anweisungen zur Wiederverwendung der Ansicht.
7. $ scope ist eine Baumstruktur, die parallel zum DOM -Tag ist.
8. Das Objekt des Kindes $ Scope erbt die Eigenschaften und Methoden des übergeordneten $ Scope.
9. Jede Winkelanwendung hat nur ein $ rootscope -Objekt. (Im Allgemeinen auf NG-App gelegen).
10. Sie können Angular.element ($ 0) .Scope () verwenden, um zu debuggen.
11. Verwenden Sie NGroute zum Routing zwischen Ansichten.
3..
①.ng-Klasse (geeignet für Situationen, in denen sich ein bestimmter Stil wie Likes und Aufmerksamkeit aufgrund einer bestimmten Operation ändern)
Die Anweisung der NG-Klasse wird verwendet, um einen oder mehrere CSS-Klassen dynamisch an HTML-Elemente zu binden. Der Wert der NG-Klasse-Anweisung kann eine Zeichenfolge, ein Objekt oder ein Array sein.
Wenn es sich um eine Zeichenfolge, werden mehrere Klassennamen durch Leerzeichen getrennt.
Wenn es sich um ein Objekt handelt, müssen Sie ein Schlüsselwertpaar verwenden, das ein boolescher Wert ist, und der Wert ist der Klassenname, den Sie hinzufügen möchten. Die Klasse wird nur hinzugefügt, wenn der Schlüssel wahr ist.
Wenn es sich um ein Array handelt, kann es aus Saiten oder Kombinationen von Objekten bestehen, und die Elemente des Arrays können Zeichenfolgen oder Objekte sein.
Zwei empfohlene Möglichkeiten zu verwenden:
1. In Form einer Zeichenfolge lautet der Code wie folgt:
<i ng-class = "{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'} [accountInfo.isfocus]" ng-klick = 'wetherfocus ()'> </i>Dies bedeutet, dass das I-Tag eine grundlegende Klassen-Symbol, NG-Klasse, die eine dynamische Klasse bindet. Der Wert dieser Klasse wird dadurch bestimmt, ob die AccountInfo.iscus wahr oder falsch ist. Wenn sein Wert wahr ist, fügt das I-Tag die Ionen-IOS-Herzklasse hinzu. Wenn sein Wert falsch ist, fügt das I-Tag die Ion-IOS-Heart-Outline hinzu. Wenn sein Wert falsch ist, fügt das I-Tag die Ion-IOS-Heart-Outline hinzu.
Diese Kategorie. Das I-Tag bindet auch ein NG-Klick-Ereignis. Zusätzlich zum Umgang mit der entsprechenden Logik wird auch der Wert von AccountInfo.ISFocus bestimmt. Auf diese Weise wird bei einer Klickoperation die entsprechende Klasse des I -Tags natürlich geändert, und dann werden verschiedene Stile angezeigt.
2. Der Stil des Schlüsselwerts ist der Code wie folgt:
<i ng-class = "{'Ion-ios-Heart': ISIOS, 'Ion-Android-Heart': isandroid}"> </i>Offensichtlich können wir aus dem Code sehen, dass diese Bedeutung lautet, dass, wenn ISISIS wahr ist, die Ionen-IOS-Herzklasse entnommen wird und wenn der Wert von Ion-Android-Herz der Ion-Android-Herz-Klasse genommen wird.
②.ng-show und ng-hide (geeignet, wenn zwei verschiedene Inhalte für verschiedene Situationen angezeigt werden)
Die NG-Show-Anweisung zeigt das angegebene HTML-Element an, wenn der Ausdruck wahr ist, andernfalls verbirgt sich das angegebene HTML-Element.
Die NG-Hide-Anweisung verbirgt das angegebene HTML-Element, wenn der Ausdruck wahr ist, andernfalls wird das angegebene HTML-Element angezeigt.
Haha, es sieht aus wie ein Bruder, der mit Wasser und Feuer unvereinbar ist. . . .
Beispiele sind wie folgt:
<div> <span ng-klick = "Togglemenu ()"> </span> </div> <div> <ul ng-show = "MenUtate"> ... </ul> <div ng-hide = "Menustate"> ... </div>
Legen Sie einen booleschen Variablen -Menü (In der tatsächlichen Entwicklung können Sie Ausdrücke, Trilogiegleichungen usw. verwenden). Wenn es wahr ist, wird der Inhalt der NG-Show angezeigt und der Inhalt von NG-Hide wird versteckt. Ansonsten ist das Gegenteil wahr. . .
③.ng-switch (geeignet zum Anzeigen verschiedener Inhalte in mehreren Situationen)
Die NG-Switch-Anweisung zeigt oder verbirgt den entsprechenden Teil gemäß dem Ausdruck.
Die entsprechenden untergeordneten Elemente verwenden die NG-Switch-wenn-Richtlinie. Wenn die Übereinstimmung ausgewählt ist, wählen Sie die Anzeige aus und die anderen werden entfernt.
Durch Einstellen der Standardoptionen mithilfe der NG-Switch-Default-Anweisung werden die Standardoptionen angezeigt, wenn keiner davon übereinstimmt.
Beispiel:
<div ng-switch = "EssayType"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng ng-switch-whoden = "1"> ... </divnng-switch-withwhen-
④.NG-Model (Ich werde hauptsächlich über die magische kleine Grube des NG-Modells sprechen)
Die NG-Modell-Direktive bindet HTML-Formelemente in die Umfangsvariable.
Wenn es keine Variable im Bereich gibt, wird es erstellt. NG-Model wird üblicherweise in <eingabe>, <Select>, <textarea> und anderen Elementen verwendet.
Der folgende Code:
<div> <textArea name = "My-massage-detail" ng-model = "content" placeholder = "Bitte geben Sie eine Meldung ein"> </textarea> <ang klick = "subledMes ()"> subieren </a> <br> </div>
Per Definition ist es theoretisch, wenn wir einreichen, in Ordnung, den Wert des auf der Seite im Controller definierten NG-Modells direkt zu erhalten. In der Tat ist dies jedoch nicht machbar. Persönliche Tests ergaben, dass ein undefinierter Ausgang ausgegeben wurde. Wenn der Anfangswert von NG-Modell im Controller definiert ist, wird der Anfangswert anstelle des letzten Werts nach der Änderung erhalten.
Ich habe nach Informationen gesucht, was es grob bedeutet. Winkel begrenzt einige unserer Definitionen. Wir können nur ein nicht primitives Objekt verwenden, um Parameter zu übergeben.
Was bedeutet es? Eine kleine Änderung des obigen Beispiels wie folgt:
HTML -Code:
<div> <textArea name = "My-massage-detail" ng-model = "model
Controller -Code:
$ scope.model = {}; $ scope.model.content = '';Das heißt, wir definieren ein Objekt und definieren dann NG-Model als Eigenschaft in diesem Objekt, um es zu handhaben. Auf diese Weise erhalten wir den neuesten Wert von NG-Model.
Ein weiterer einfacher Weg besteht darin, NG-Model als Parameter darin zu übergeben.
Beispiele sind wie folgt:
// HTML-Code <Eingabe type = "text" ng-model = "code"> <button ng-klick = "setCode (code)"> login </button> <br> // Controller-Code $ scope.setcode = Funktion (Code) {alert (Code);}4. Praktische Fähigkeiten für die Dateninteraktion
Verheißung
ES6 definiert das Versprechenobjekt. Dieses Objekt ist sehr nützlich, insbesondere bei der Interaktion mit dem Hintergrund. Es verhindert nicht nur, dass Rückrufe zu tief sind, sondern kann auch für einige Situationen einheitlich behandelt werden und verbessert auch die Lesbarkeit des Codes. Ein solcher Dienst ist auch in AngularJs eingekapselt, was $ Q ist.
$ q existiert als Dienst von AngularJs und ist nur eine vereinfachte Implementierung des versprechen asynchronen Programmiermodus. Das Defer -Objekt (Verzögerungsobjekt) kann über $ q.Defer () erhalten werden. Es gibt drei Methoden für dieses Objekt:
Resolve (Wert): Senden Sie eine Nachricht an den asynchronen Ausführungsgremium des Versprechensobjekts und teilt ihm mit, dass ich die Aufgabe erfolgreich abgeschlossen habe, und der Wert ist die gesendete Nachricht.
Ablehnen (Wert): Senden Sie eine Nachricht an den asynchronen Ausführungsgremium des Versprechensobjekts und teilt ihm mit, dass es mir unmöglich ist, diese Aufgabe zu erledigen. Der Wert ist die gesendete Nachricht.
Benachrichtigen (Wert): Senden Sie eine Nachricht an den asynchronen Ausführungsgremium des Versprechensobjekts, um ihm die aktuelle Aufgabenabschluss zu informieren. Der Wert ist die gesendete Nachricht.
Nach dem Senden dieser Nachrichten wird die vorhandene Rückruffunktion aufgerufen.
Versprechen ist das Versprechensobjekt mit diesem Verschiebungsobjekt. Versprechen Objekt kann durch Aufschub erhalten werden.
Dann (SuccessCallback, Fehlercallback, NotifyCallback): Die Parameter sind verschiedene Rückruffunktionen unter verschiedenen Nachrichten. Auf Defer sendet verschiedene Nachrichten, um verschiedene Rückruffunktionen auszuführen. Die Nachrichten werden als Parameter dieser Rückruffunktionen übergeben. Der Rückgabewert ist zurück zu einem Versprechensobjekt, das zur Unterstützung von Kettenanrufen existiert. Wenn das erste Defer -Objekt eine Nachricht sendet, sendet das entsprechende Aufschubobjekt des nachfolgenden Versprechens auch eine Nachricht, die gesendeten Nachrichten sind jedoch unterschiedlich. Unabhängig davon, ob das erste Aufschubobjekt Ablehnung oder Lösung sendet, werden die zweiten und später gelöst und die Nachricht ist passable.
catch (errorCallback): dann (null, errorCallback).
Schließlich (Rückruf): entspricht der Abkürzung von dann (Rückruf, Rückruf). Die Methode in akzeptiert schließlich keine Parameter, kann aber den Nachrichten- und Nachrichtentyp erfolgreich über die nächste Verschiebung übergeben.
Defer (): Wird verwendet, um ein Verzögerungsobjekt zu generieren var defer = $ q.Defer ();
Reject (): Der Parameter empfängt eine Fehlermeldung, die einer Ausnahme in die Rückruffunktion entspricht und dann die falsche Rückruffunktion im nächsten Mal aufgerufen wird.
All (): Der Parameter wird als Versprechen -Array empfangen und ein neues einzelnes Versprechensobjekt wird zurückgegeben. Wenn alle entsprechenden Aufschubobjekte dieser Versprechungsobjekte gelöst werden, wird dieses einzelne Versprechensobjekt gelöst. Wenn eines dieser Versprechungsobjekte abgelehnt wird, wird auch dieses einzelne Versprechen abgelehnt.
wenn (): erhält den ersten Parameter als willkürlicher Wert oder als Versprechensobjekt und die anderen 3, dann die Methoden desselben Versprechens, und der Rückgabewert ist ein Versprechensobjekt. Wenn der erste Parameter kein Versprechensobjekt ist, wird der Erfolgsrückruf direkt ausgeführt und die Nachricht ist dieses Objekt. Wenn es sich um ein Versprechen handelt, ist das zurückgegebene Versprechen tatsächlich ein Wrapper für das Argument dieses Versprechens. Die von dem Aufschub entsprechende Nachricht, die dem eingehenden Versprechen entspricht, wird von dem von unserer When Function zurückgegebenen Versprechensobjekt empfangen.
Die spezifische Verwendung ist wie folgt:
Definieren Sie in Angular einen Dienst speziell für die Interaktion.
GET: Funktion (URL, Optionen) {<br> var deferred = $ q.Defer (); <br> showtip (); $ http.get (URL, Optionen) .success (function (data) {hidetip (); if (data.success) {deferred.resolve (data);} else {deerred.Reject.reject (Data.message);}}}). {hidetip (); deperred.Reject (data);}); return deferred.Promise;} // Der Aufruf im Controller get ('url', params) .then (function (data) {// hier ist SuccessCallback}, Funktion (Daten) {// hier ist fehlercallback});Auf diese Weise können wir einige Eingabeaufforderungen einheitlich definieren, wenn jede Anfrage ausgestellt wird, und diese Eingabeaufforderungen nach Abschluss der Anforderung ausblenden. In diesem Code ist die allgemeine Bedeutung, dass, wenn die Anforderung erfolgreich ist, aufgeschoben.Resolve (Daten) aufgerufen wird, um den Status auf den Erfolg festzulegen, so dass die erste Funktion automatisch ausgeführt wird, nämlich SuccessCallback, und die angeforderten Datendaten werden übergeben. Wenn die Anforderung fehlschlägt, wird die zweite Funktion, nämlich Fehlercallback, bezeichnet.
Die oben genannten sind die praktischen Entwicklungsfähigkeiten von AngularJs, die der Editor Ihnen vorgestellt hat. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!