Wir werden AngularJs und Bootstrap verwenden, um ein Beispiel für Front-End-Anwendungen zu entwickeln. Durch diese einfache Projektpraxis führen wir alle in den Palast der AngularJs Front-End-Entwicklung und stellen Ihnen einige Wissenspunkte vor:
1. MVC -Grundlagen lassen Sie sich anhand von Projektbeispielen alle vorläufig für die Anwendung des MVC -Designmodells verstehen.
2. Erstellen Sie unsere erste AngularJS -Anwendung. Durch die Entwicklung eines praktischen Anwendungsfalles kann jeder ein gewisses Wahrnehmungsverständnis für die Front-End-Entwicklung erlangen.
3. Ein vorläufiges Verständnis der drei wichtigsten Komponenten von AngularJs, nämlich Modell, Ansicht und Controller.
4. Vorläufiges Verständnis der Verwendung von AngularJS -Bereichsobjekten.
Grundlegende Einführung in den MVC -Modus:
MVC ist ein UI -Architekturmodell. Ziel ist es, die Funktionen von Anwendungen in spezielle Module zu zerlegen, die Wiederverwendbarkeit von Modulen zu verwirklichen, die Kopplung zwischen Modulen zu reduzieren und die Robustheit des Systems zu verbessern. Der MVC -Modus ist hauptsächlich in drei Teile unterteilt:
Modell: Wird zum Speichern von Systemdaten verwendet
Ansicht: Wird verwendet, um die Benutzeroberfläche des Systems zu implementieren
Controller: Verwendet, um Modell und Ansicht zu verbinden.
Meiner Meinung nach ist das Beste zum Lernen am besten. Wir werden ein Beispiel für Front-End-Anwendungen entwickeln. In diesem Beispiel können wir einseitig unser Verständnis des AngularJS -Frameworks vertiefen und gleichzeitig spüren, wie das MVC -Modell in den Entwicklungsprozess eingebettet ist.
Anwendungseinführung (Codepfad: http://xiazai.vevb.com/201608/yuanma/bootstrap-moc(vevb.com).rar)
Wir werden eine Webanwendung erstellen, die Zahlen mit der Schnittstelle wie folgt erraten:
Der Anwendungshintergrund generiert zufällig eine Zufallszahl mit einem Bereich von 1 bis 1000. Der Benutzer gibt die ersetztes Nummer im Textfeld ein. Wenn die Eingabe korrekt ist, wird die Anwendung unten eine grüne Eingabeaufforderung angezeigt. Wenn beispielsweise die Eingangszahl größer oder kleiner ist als die vom Hintergrund generierte Zahl, wird die Anwendung beispielsweise eine entsprechende Eingabeaufforderung angezeigt:
Die unten angegebenen Zahlen zeigen, wie oft wir erraten haben.
Die Code -Verzeichnisstruktur der gesamten Anwendung lautet wie folgt:
Da wir derzeit an einem einfachen Anwendungsbeispiel arbeiten, setzen wir den Code jedes Moduls zusammen. Wenn wir in Zukunft groß angelegte Front-End-Anwendungen bauen, werden wir die Code-Verzeichnisstruktur des gesamten Projekts sehr vorsichtig anordnen.
In der in der obigen Abbildung gezeigten Dateikomposition ist Angular.js die Framework -Datei, auf die wir uns auf Anwendungen stützen, bootstrap.min.css ist die Schnittstellenbibliotheksdatei, mit der die UI -Schnittstelle gestaltet wird, und Numberguessing.html ist die Hauptantragsdatei, die wir entwickeln möchten. Als nächstes werden wir Schritt für Schritt Code zu numberguessing.html hinzufügen und die Funktionen der Anwendung schrittweise erhöhen.
Zunächst müssen wir eine einfache HTML -Vorlage erstellen. In dieser Vorlage können wir langsam Funktionen hinzufügen. Der Vorlagencode lautet wie folgt:
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <title> Rate die Nummer! src = "Angular.js"> </script> </body> </html>
Beachten Sie im obigen Vorlagencode, dass eine Zeile "meta ... charset =" utf = 8 "vorhanden ist.
Der Zweck dieser Linie ist es, dem Browser die chinesische richtige Anzeige zu ermöglichen. Wenn diese Zeile nicht verfügbar ist, zeigt der Browser Chinesisch an. In der Vorlage stellen wir zunächst den Framework -Code und die UI -Schnittstellen -Bibliothekscode vor, die später verwendet werden soll. Nachdem dies erledigt ist, laden wir es in den Browser, um festzustellen, ob es Fehler gibt. Wenn das richtig ist, ist das, was wir derzeit sehen, ein Leerzeichen:
Als nächstes entwickeln wir den Hintergrundlogikcode der Anwendung und bestimmen zunächst einige zu verwendende Variablen:
OriginalVal, verwendet, um generierte Zufallszahlen zu speichern
Userguess, speichern Sie die erratene Nummer, die derzeit vom Benutzer eingegeben wurde
Numoftries, zeichnen Sie auf, wie oft der Benutzer versucht hat
Abweichung: Notieren Sie die Differenz zwischen der vom Benutzer eingegebenen Zahl und der Zufallszahl des Hintergrunds. Wenn die vom Benutzer eingegebene Nummer groß ist, dann die Definition> 0; Die Eingabe ist klein, die Definition <0; Wenn die Eingabe korrekt ist, dann die Definition == 0
Implementierung des Controller -Moduls
Controller wird verwendet, um die beiden Modell- und Ansichtsmodule zu verbinden, und die Geschäftslogik des Systems wird auch in Controller implementiert. Wenn der Benutzer einige Vorgänge auf der Schnittstelle ausführt, z. B. auf eine Schaltfläche klicken und Inhalte eingeben, empfängt der Controller die entsprechenden Informationen von der Ansichtsseite, und dann löst der Controller die entsprechende Ereignisverarbeitungslogik aus. Beispielsweise gibt der Benutzer eine Nummer in die Schnittstelle ein und klickt auf die Schaltfläche OK. Der Controller erhält den Eingangswert aus der Ansicht und nimmt dann die von der Anwendung aus dem Modell generierte Zufallszahl heraus, vergleicht ihn mit den beiden Fließheck und gibt das Vergleichsergebnis an die Ansicht zurück. In der Ansicht werden die entsprechenden Schnittstellenänderungen basierend auf dem zurückgegebenen Abweichungswert angezeigt. Mal sehen, wie der logische Körper des Controllers implementiert wird:
Funktion GuessThenumberController ($ scope) {$ scope.verifyGuess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.Deviation = null; } $ scope.initializeGame (); }Die Funktion "GuessThenumberController" legt die numerischen Eigenschaften des Modellobjekts fest. Die Bedeutung dieser Werte wurde früher erwähnt. Gleichzeitig leitet diese Controller -Funktion auch zwei Schnittstellenaufrufe ab, eines wird verifiziert. Wenn die Schaltfläche Bestätigung in der Schnittstelle klickt, ruft das Ansichtsmodul die Schnittstelle auf, um festzustellen, ob die vom Benutzer eingegebenen Daten korrekt sind. Gleichzeitig aktualisiert der Aufruf die Werte der beiden Attribute, Abweichungen und Numolen.
InitializeGame wird verwendet, um die gesamte Systemanwendung zu initialisieren, zuerst Zufallszahlen zu generieren und dann einige Variablen auf Leer zu initialisieren.
In unserer Controller -Körperfunktion wird ein Parameter $ -Geals übergeben. Dieser Parameter wird von AngularJs übergeben. Es ist im MVC -Modus, das Modell ist, im Grunde genommen M äquivalent. Es ähnelt einer Datenbank, die speziell zum Speichern von Anwendungsdaten und dem logischen Code verwendet wird. Wie Sie sehen können, stellt der Controller im InitializeGame -Aufruf Zahlen, OriginalVal und andere Daten in das $ Scope -Objekt ein. Im Aufruf von VerifyGuess erhält er diese Daten aus $ Scope für Berechnung und Änderung.
Nachdem der obige Controller -Code zu unserer Vorlagendateinummerguessing.html hinzugefügt wurde, ist das Ergebnis wie folgt:
<! DocType html> <html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <title> Rate die Nummer! src = "Angular.js"> </script> <script type = "text/javaScript"> Funktion GuessThenumberController ($ scope) {$ scope.verifyGuess = function () {$ scope.deviation = $ scope.originalval - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.Deviation = null; } $ scope.initializeGame (); } </script> </body> </html>App View Application Interface Design
Ansicht, dh Ansicht in MVC, soll die Daten im Modell über eine grafische Schnittstelle angezeigt werden. Unsere aktuelle Anwendung ist einfach und basierend auf dem Prinzip der Einfachheit ist die Benutzererfahrung des Schnittstellendesigns möglicherweise nicht sehr gut, aber es reicht aus, schnell zu verstehen, wie AngularJs und Bootstrap verwendet werden, um schnell eine Front-End-Schnittstelle für ein Programm zu erstellen.
Schauen wir uns die Schnittstellenkonstruktion an und integrieren Sie die Controller- und Schnittstellenlogik:
<body ng-App = "app"> <div ng-controller = "menadeThenumberController"> <H2> Vermutlich die Nummer! ng-klick = "verifiifyGuess ()"> bestätigen </button> <button ng-klick = "initializeGame ()"> return </button> <p> <p ng-show = "Abweichung <0"> Mr., Sie bieten zu hoch! </p> <p ng-show = "Abweichung> 0"> Mein Mann, wenn Sie weniger haben, fügen Sie mehr Punkte hinzu, fügen Sie weitere Punkte hinzu.
C In MVC, dh Controller, ist eine Brücke zwischen der Schnittstelle (Ansicht) und Daten (Modell). Um diese drei zu verbinden, müssen wir alle drei in das AngularJS -Gerüst einbetten und dann auf den AngularJS -Framework -Mechanismus angewiesen werden, um die Verbindung zwischen den drei zu erreichen.
Um die Ansicht in AngularJS einzubetten, ist die obige Code -Anweisung:
<Body Ng-App = "App">
NG-App Diese Eigenschaft zeigt Angular, dass der HTML-Code im Körper-Tag als Ansichtsteil in das AngulaJS-Framework eingebettet wird, und „App“ wird als NG-App-Eigenschaftswert verwendet, um das AngularJS-Framework zum Laden eines Moduls mit dem Namen „App“ zu informieren. Dieses Modul entspricht einem Lagerlager. Wir zerlegen verschiedene Funktionen der Front-End-Anwendung in verschiedene Einheiten. Diese Einheiten werden in einem Modul namens App gespeichert. Controller und Modell sind auch funktionale Einheiten. Später werden wir sehen, dass sie dem Modul namens App hinzugefügt werden. Das AngularJS -Framework nimmt die beiden Einheiten von Controllerre und Modell aus diesem Modul zur Verwendung heraus.
Als nächstes setzen wir dieses Modul namens App in das AngularJS -Framework ein. Der Code lautet wie folgt:
<script type = "text/javaScript"> angular.module ('App', []) Funktion GuessThenumberController ($ scope) {....} <Script>Auf diese Weise haben wir ein Modul namens App im AngularJS-Framework und verknüpfen das Modul mit der Schnittstelle über ng-App = "App". Als nächstes müssen wir die Controller -Einheit in das App -Modul einfügen, der Code ist wie folgt:
<script type = "text/javaScript"> angular.module ('App', []) .Controller ('GuessDenumberController', GuessThenumberController); Funktion GuessThenumberController ($ Scope) {....} </script>Die Funktion "Angular.module" erzeugt und gibt ein Modulobjekt zurück. Dieses Objekt enthält eine Schnittstelle namens Controller. Über diese Schnittstelle kann die von uns entwickelte Controller -Funktionseinheit in das Modul platziert werden. Aus dem obigen Code können wir sehen, dass wir eine Controller -Einheit in das Modul einfügen. Der Name dieser Einheit ist GuessthenumberController, der der erste Eingabeparameter der Controller -Funktion ist. Der zweite Eingangsparameter ist der funktionale Logikkörper der Controller -Einheit, die die zuvor entwickelte RateDtenumberController -Funktion ist.
Nach Abschluss der oben genannten Schritte wird unsere Anwendung entwickelt. Zu diesem Zeitpunkt kann unsere HTML aus dem Browser geladen werden, sodass Sie den spezifischen Effekt sehen können.
Gehen wir vor dem Ende tief in den Code ein, um zu sehen, wie AngularJS verschiedene Module integriert, um eine vollständige Front-End-Anwendung zu bilden. Im Code gibt es einige besondere Symbole und Attribute, spezielle Symbole wie: {{}} und spezielle Attribute wie: ng-App, ng-controller usw. Im Winkelkontext werden {{{{und}} kombiniert werden, werden mit Interpolationssymbolen bezeichnet, und Eigenschaften in Form von NG-* werden Anweisungen genannt. Angular wandelt Variablen um, die in {{und}} in Werte eingelassen sind, die Variablen entsprechen, wie z. B. dem folgenden Code -Snippet:
<p> Die Anzahl, mit der Sie erraten haben, ist: <span> {{numoftries}} </span> <p>
Numoftries bedeutet, wie oft der Benutzer versucht hat zu raten. Wenn der Wert von Numoftries 0 beträgt, entgeht AngularJS dem obigen Code als:
<p> Die Anzahl der, mit denen Sie erraten haben, ist: <Pan> 0 </span> <p>
Der Browser rendert die Schnittstelle in die folgende Situation:
AngularJS -Richtlinie ist ein komplexer technischer Wissenspunkt. In der anschließenden Diskussion werden wir es ausführlich diskutieren. Hier führen wir kurz die Rolle der AngularJS -Richtlinie ein, die hauptsächlich die Syntaxfunktion von HTML erweitert. Richtlinien sind die mächtigsten Teile im AngularJS -Framework. Lassen Sie uns kurz die im Code verwendete AngularJS -Richtlinie vorstellen.
NG-Controller: Diese Anweisung verbindet den Controller und die durch HTML dargestellte Ansicht. Nur mit dieser Richtlinie kann der vom Controller festgelegte Variablen und Schnittstellen zugreifen. Sie können versuchen, es in den Code zu stecken.
ng-model = ng-controller = "GuessThenumberController"
Entfernen Sie diesen Satz und sehen Sie, was das Ergebnis ist.
NG-Model: Bidirektional Bindungsvariablen im Modell mit Kontrollen in Sicht, zum Beispiel:
<input type = "number" ng-model = "userguess"/>
Diese Anweisung bindet die variable Userguess im Modell an das Textfeld Eingabetaste an der Schnittstelle. Wenn sich der Wert im Textfeld ändert, ändert sich auch der entsprechende Wert von Userguess. Im Gegenteil, wenn sich der Wert von Vermutungen im Hintergrund ändert, ändert sich der Inhalt im Textfeld auch entsprechend.
NG-Klick: Schließen Sie die von der Schnittstelle generierten Klickereignisse mit der Verarbeitungslogik des Controllers an, z. B.:
<button ng-klick = "verifiifyGuess ()"> bestätigen </button>
Der obige Code verbindet die Schaltfläche "OK". Klicken Sie mit der Funktion des Controllers verififyGuess (). Sobald die Schaltfläche klickt, wird die Funktion ausgeführt.
NG-Show: Wird verwendet, um zu steuern, ob die Steuerung zur Steuerung der angezeigten Ansicht verwendet wird. Wenn der Wert des entsprechenden Ausdrucks von ng-show wahr ist, wird die Steuerung angezeigt. Wenn es falsch ist, wird die Steuerung nicht angezeigt. Zum Beispiel:
<p ng-show = "Abweichung <0"> mr., Ihr Gebot ist zu hoch! </p>
Die Funktion des obigen Code ist, dass, wenn der Wert der Variablendefinition kleiner als 0 beträgt, der Inhalt des Absatzelements P auf der Schnittstelle angezeigt wird.
AngularJS ist ein leistungsstarker, aber relativ komplexer Front-End-Entwicklungsrahmen. Die Rolle unseres Beispiels besteht nur darin, jedem zu helfen, die leistungsstarken Funktionen von AngularJs zu verstehen und zunächst ein bestimmtes Wahrnehmungsverständnis zu erlangen, um eine solide Grundlage für uns zu schaffen, um die gesamte AngularJS-Front-End-Entwicklungstechnologie in Zukunft rational zu analysieren und zu beherrschen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.