Das AngularJS-Framework wird im Grunde genommen in Front-End-Projekten verwendet. Ich wusste vorher nichts über diesen Rahmen, und das lag daran, dass ich in letzter Zeit die Arbeit übernommen habe, also hatte ich vor, es gut zu lernen. Früher war ich eine PC-Seite, aber jetzt habe ich das mobile Projekt übernommen. Das mobile UI -Framework verwendet Ionic + Vordova, verwendet jedoch keine Bootstrap. Ich verwende hauptsächlich iOS + Android App -Schnittstelle. Ich weiß nicht viel über den ionischen Rahmen und muss Zeit verbringen, um mich damit vertraut zu machen. AngularJS Learning Novizen sind herzlich eingeladen, mich zu korrigieren.
Was ist AngularJs?
Einfach ausgedrückt, es ist ein Framework von JavaScript, das einer Webseite über Skript -Tags hinzugefügt wird. Das heißt, wenn wir AngularJs verwenden, müssen wir den folgenden Code einführen.
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
Es wird normalerweise empfohlen, das Skript am unteren Rand des <body> -Elements zu platzieren, weshalb die Ladegeschwindigkeit der Webseite verbessern wird. Weil das HTML -Laden nicht dem Laden des Skripts unterliegt.
Was ist AngularJs?
AngularJS erleichtert die Entwicklung moderner einseitiger Anwendungen (SPAS: Einzelseiten -Anwendungen).
• AngularJS bindet Anwendungsdaten an HTML -Elemente.
• AngularJs können HTML -Elemente klonen und wiederholen.
• AngularJs können HTML -Elemente verbergen und anzeigen.
• AngularJs kann Code "hinter" das HTML -Element hinzufügen.
• AngularJS unterstützt die Eingangsüberprüfung.
Beispielsweise verwenden mobile Terminals im Grunde genommen einzelne Seitenvergleiche, die mithilfe der Konvertierung von Angular Routing durchgeführt werden. Wie unser aktuelles Projekt verwenden wir auch eine einzelne Seite. Das heißt, auf der Hauptseite werden auf der Hauptseite die gesprungenen Seiten alle durchgeführt. Der Screenshot lautet wie folgt:
AngularJS -Ausdrücke
AngularJS -Ausdruck ist in doppelten Klammern geschrieben: {{Ausdruck}}.
AngularJS-Expressionen binden Daten an HTML, die der NG-Bind-Richtlinie ähnlich sind.
AngularJs "Ausgabe" Daten an dem Ort, an dem der Ausdruck geschrieben wird.
AngularJS -Ausdrücke ähneln JavaScript -Ausdrücken: Sie können Literale, Operatoren und Variablen enthalten.
<! docType html> <!-Tag Angularjs, um die gesamte HTML-Seite zu verarbeiten und die Anwendung zu starten-> <HTML NG-App> <kopf> <meta charset = "utf-8"> <Skript src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body><p>name:{{"ting"+"feng"}}</p><p>number:{{5+5}}</p><div ng-init = "person = {name: 'Tingfeng', Alter: '13 '}"> <p> Name: {{Person.Name}} Alter: {{Person.age}} </p> </div> </body> </html>Anwendung von AngularJs in HTML
Erweitern Sie HTML hauptsächlich durch ng-direktes. Die AngularJS -Direktive ist ein mit NG vorangestellter HTML
NG-Init: Diese Anweisung initialisiert AngularJS-Anwendungsvariablen. Zum Beispiel die folgenden Spalten:
<! docType html> <!-Tag Angularjs, um die gesamte HTML-Seite zu verarbeiten und die Anwendung zu leiten-> <html ng-App> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-0.1.1.1.Min.Min.Js" ng-init = "name = 'Tingfeng'"> <p> Name ist: <span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-App: Diese Anweisung zeigt an, dass eine AngularJS-Anwendung definiert ist. Normalerweise hinter HTML platziert, können Sie auch die NG-App-Direktive lokal verwenden. Zum Beispiel wird das Skript an AngularJS nur im Div ausgeführt, was bedeutet, dass von hier aus alle Inhalte AngularJS für die Verwaltung sind.
NG-Model: Diese Richtlinie bezieht sich auf Bindungselementwerte (z. B. den Wert des Eingangsfelds) für die Anwendung.
NG-BIND: Diese Richtlinie bindet Anwendungsdaten an die HTML-Ansicht. Verwenden Sie die entsprechenden Anweisungen, um AngularJs zu verwenden, um die HTML -Seite zu bedienen. Schauen wir uns den Code an, um ihn zu verwenden.
Verwenden Sie zu diesem Zeitpunkt das NG-Modell, um an die SetName-Modellvariable zu binden. Wenn der Wert in das Eingangsfeld eingeben, ändert sich auch der entsprechende SetName. Sie können es selbst testen.
Erklärung zu $ Scope
Was ist $ Scope? Was ist ihre Funktion? Wie benutze ich es?
Einfach ausgedrückt ist Scope ein Pojo (PlainoldjavaScriptObject), ähnlich wie ein Objekt, mit Eigenschaften und Methoden. Umfang ist ein Pojo (PlainoldjavaScriptObject), ähnlich wie ein Objekt, mit Eigenschaften und Methoden, SCOPE Watch (), Watch () und anwenden () Werkzeugmethoden. AngularJS 'MVC wird alle mit Hilfe von $ Scope erledigt.
Merkmale: 1. Es ist die Ausführungsumgebung (oder den Umfang des Ausdrucks)
2. Umfang ist eine Baumstruktur, parallel zum DOM -Tag, das einen Bereich enthält, der eine Baumstruktur ist, die parallel zum DOM -Tag ist und ein Rootscope enthält, auf der oberen Ebene.
3. Umfang erbt den übergeordneten Umfang erben die Eigenschaften und Methoden des übergeordneten Rootscope.
4. $ Scope kann Ereignisse ausbreiten, ähnlich wie DOM, die sich nach oben oder unten ausbreiten können.
5. $ scope ist nicht nur die Grundlage für MVC, sondern auch die Grundlage für die Implementierung einer wechselseitigen Bindung.
Komponenten von AngularJs
Vorlage: Das heißt, geschriebene HTML- und CSS -Dateien, die die Ansicht der Anwendung anzeigen. AngularJs kann seine eigenen HTML -Tags in HTML bauen!
Controller: Im Gegensatz zu AJAX müssen keinen Hörer oder DOM -Controller schreiben, da er bereits in AngularJs eingebaut ist. Vorteile: Einfach zu schreiben, zu testen, zu warten und zu verstehen.
Modelldaten: Das Modell wird von AngularJs als Attribute von Domänenobjekten erweitert. Die Daten des Modells können ein JS -Objekt, ein Array oder ein primitiver Typ sein, aber alle gehören zu einem AngularJS -Bereichsobjekt.
Wie versteht man den Umfang in AngularJs?
Das heißt, ein Zielfernrohr kann als Vorlage angesehen werden, eine Bindung, die mit dem Modell und dem Controller zusammenarbeitet. AngularJS verwendet den Umfang und es gibt auch Informationen, Datenmodelle und Controller in der Vorlage. Diese können helfen, das Modell und die Ansicht zu trennen, aber beide sind synchronisiert! Änderungen am Modell werden sofort in der Ansicht reflektiert, und alle Änderungen an der Ansicht werden im Modell sofort reflektiert.
Ansicht: In AngularJS ist eine Ansicht die Zuordnung, nachdem das Modell durch die HTML -Vorlage gerendert wurde. Unabhängig davon, wann sich das Modell ändert, aktualisiert AngularJS die Junction -Punkte in Echtzeit und aktualisiert die Ansicht.
Es ist intuitiver, Codes zu posten!
<! docType html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.Min.js"> </scribularJs.org/angular-1.0.Min.js "> </script> // modular var myModule －Control Template HelloangularMymodule.Controller ("Helloangular", ['$ scope', Funktion helloangular ($ scope) {$ scope.value = {name: 'jianging'};}]); </script> </head> <body> <!-MVC-View Angular-> <div ng-controller = "helloangular"> －Die Controller ist Halloangular <p> {{value.name}}, Hallo!Schauen wir uns die Anwendung des Controllers an, dh Controller, dh der Controller bedient Daten, bindet sie und zeigt sie auf der HTML -Seite an.
AngularJS -Modul (Modul) definiert AngularJS -Anwendungen.
AngularJS Controller (Controller) wird verwendet, um AngularJS -Anwendungen zu steuern.
Die NG-App-Anweisung definiert die Anwendung und der NG-Controller definiert den Controller. Verwenden wir die oben genannten Spalten, um anzuzeigen:
AngularJS -Modul definiert Anwendungen:
var mymodule = angular.module ("helloangular", []); －Control -Vorlage HalloangularAngularJS Controller Control Application:
myModule.controller ("helloangular", ['$ scope', function helloangular ($ scope) {$ scope.value = {name: 'jianging'};}]);Front-End MVC verstehen
Über Controller -Funktionen:
1. Versuchen Sie nicht, den Controller zu nehmen, ein Controller ist normalerweise nur für eine kleine Ansicht verantwortlich.
2. Betreiben Sie das DOM nicht direkt im Controller, sondern nicht in seiner Verantwortung
3. Führen Sie keine Datenfiltervorgänge im Controller durch, sondern ein Filterdienst, der sich
4. Formatieren Sie keine Daten im Controller, NG hat sehr nützliche Formularsteuerungen
5. Der Controller ruft sich nicht gegenseitig an. Die Interaktion zwischen Controllern wird durch Ereignisse durchgeführt. Es wird durch den Filterservice geschehen. 4. Formatieren Sie keine Daten im Controller. Es gibt sehr nützliche Formsteuerungen. 5. Der Controller ruft sich nicht gegenseitig an. Die Interaktion zwischen Controllern wird durch Ereignisse durchgeführt. Es wird durch den Umfang durchgeführt.
Sehen wir uns an, wie Sie das Befehlssystem anpassen. Der Code ist wie folgt:
<!doctype html><html ng-app><head><meta charset="utf-8"><script src="http://code.angularjs.org/angular-1.0.1.min.js"></script><script>//Instruction system var myModule = angular.module("MyModule", []); MyModule.directive ("Hallo", function () {return {prestrict: 'e', Vorlage: '<div> Hallo allerseits!In der Richtlinie werden danach drei Parameter zurückgegeben, wobei sich die Mitte der Vorlage auf das eingefügte HTML -Tag bezieht. Jetzt werde ich selbst ein Stück HTML -Code schreiben und sehen, wie man ihn in AngularJs schreibt.
Der ursprüngliche statische HTML -Code lautet wie folgt:
<ul> <li> <span> new1 </span> <p> Nur ein Testpage1 </p> </li> <li> <Pan> new2 </span> <p> Nur ein Testpage 2 </p> </li> </ul>
Der Weg, es an AngularJs zu ändern, ist wie folgt:
<! docType html> <html ng-App> <Head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.min.js"> </script> <Script> // $ Scope ist der Bereich des Controllers. // AngularJS Scope: Es kann als Vorlage angesehen werden. Nach dem Start der Anwendung wird ein Wurzelbereich erstellt und der Umfang des Controllers ist ein typischer Nachfolger des Wurzelbereichs. Funktion NewsCtrl ($ scope) {$ scope.news = [{"Inhalt": "New1", "Einführung": "Nur ein Test Seite1"}, {"Inhalt": "new2", "Einführung": "Nur ein Testpage 2"}]; commas};} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in News"> {{new.content}} <p> {{new.inroducuDie oben genannte ist die Analyse der grundlegenden Merkmale von AngularJs, die Ihnen vom Editor (i) vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. 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!