Ich habe ein Video über AngularJs gesehen. In dem Videoinhalt wird erläutert, wie ein Spa in Form der Todo -Liste erstellt wird (einfache Seitenanwendung). Um das Verständnis zu verbessern, wird nachstehend ein Artikel geschrieben, um sie zu überprüfen und zu konsolidieren.
Vorbereiten
AngularJS Download
Es wird als Download bezeichnet, aber in der Tat, solange Sie sich auf AngularJs auf unserer Seite verweisen können. Es kann die folgende Methode geben.
CDN -Beschleunigung
Es ist auch möglich, inländische CDN -Beschleunigungsdienste zu nutzen.
Kopieren Sie den Code wie folgt: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
NPM -Methode
Es ist auch sehr bequem, das Paket -Management -Tool von NodeJS zu verwenden. Grundsätzlich kann es in zwei Schritten erfolgen.
Geben Sie zunächst den Ordner ein, in dem wir den Code schreiben.
• Installieren Sie AngularJS: NPM anwinkel installieren
• Eingeführt, um auf der Seite zu verwenden:
<!-Diese SRC-Adresse hängt von Ihrer eigenen Situation ab->
<script src = "node_modules/angular/angular.js"> </script>
Konventioneller Weg
Die herkömmliche Methode besteht darin, relevante Dateien manuell herunterzuladen und dann manuell vorzustellen, da sie ziemlich umständlich ist. Hier gibt es keine Erzählung mehr.
Bootstrap Download
Bootstrap ist ein sehr beliebter und moderner Front-End-Frontwork. Adresse herunterladen
Wissensreserve
MVC -Architektur
Der AngularJS Core nimmt MVC-Architektur und ereignisgesteuerte Anwendungen an. Ich bin nur neu darin, also verstehe ich es nicht sehr gut. Wenn es einen Fehler gibt, hoffe ich, dass der Blogger darauf hinweist.
ng-App
Als Butler der gesamten einzelnen Seite bedeutet App die Anwendung und die Bedeutung der Anwendung. Unser einseitiger Service fungiert als App.
Im Allgemeinen sollte NG-App als Elternbehälter von NG-Controller verschachtelt werden. Andernfalls können die erwarteten Ergebnisse nicht erscheinen
ng-controller
Der Controller, der auf der Seite angewendete rechte Mann und die Existenz des Controllers vereinfacht die Kopplung zwischen Modulen und macht den Code, das standardisierter und einfacher schreibt.
NG-Modell
Während der Modellverarbeitung wird es im Allgemeinen mit Seitenelementen gebunden und ausgegeben, um einen aktualisiert-freien Seiteneffekt zu erzielen.
Ereignisbasis
NG-Klick
In unserer einzelnen Seitenanwendung haben Elemente, die dieses Attribut deklarieren, die Funktion der Klickereignisse. Was für welchen Teil der Funktionen, die aufgerufen werden, sind tatsächlich mit dem Container verwandt, in dem sich das Element befindet.
Das heißt, die Funktion, die dem Klickereignis entspricht, ist der Code, der im entsprechenden Controller geschrieben wurde, um eine bestimmte Funktion auszuführen.
Vollständiger Code
Der detaillierte Code für dieses Beispiel wird unten veröffentlicht
main.js
(Funktion (Fenster) {// Registrieren Sie ein Anwendungshauptmodul var todoapp = window.angular.module ('toDoapp', []); // Registrieren Sie den Controller // window.angular.module ('toDoApp') todoapp.controller ('Maincontroller', [$ Scope ', Funktion ($ scept to the sacto the sacto the sacto the sacto the sacto the sacto) {/ $ scape). Im Textfeld werden $ scope.text = ''; $ scope.text.trim (); $ scope.todolist.splice (Index, 1); // Um es zu löschen} // Die Anzahl der abgeschlossenen Ereignisse abrufen und es gemäß der Auswahl des Kontrollkästchens implementieren // Da die Seite dynamisch geändert wird, müssen Sie Funktionen verwenden oder einfach die Modellbindung verwenden, aber das wird ein kleiner schwieriger $ scope.donecount = function = funktions (). $ scope.todolist.filter (Funktion (Element) {Return item.done; // Return true, um anzugeben, dass die aktuellen Daten die Bedingungen erfüllen und das Ereignis abgeschlossen wurde});todolist.html
<! DocType html> <html> <Head> <meta charset = "utf-8"> <tits> Angularjs Integrieren Sie die Bootstrap-Implementierungsliste. rel = "stylesheet"> <style> .container {max-Width: 720px; } .done {color: #cca; } .CheckBox {Margin-Right: 12px; Randboden: 0; } .done> .CheckBox> Label> span {Textdekoration: Zeilenum; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div ng-App = "TodoApp" ng-controller = "maincontroller"> <!-Um eine gut aussehende Schnittstelle zu erreichen, wird Formregelung verwendet. ng-class="{'done':item.done}" ng-repeat="item in todolist" > <button type="button" aria-label="close" ng-click="delete(item)"> <span aria-hidden="true">×</span> <span>Close</span> </button> <div> <label> <input type="checkbox" ng-model="item.done"> <span>{{item.text }}</span> </label> </div> </li> </ul> <p> A total of <strong>{{todolist.length }}</strong> tasks have been completed</strong> </p> </section> </div></body></html>Seiteneffekt
Detaillierter Code Erläuterung
Die äußerste Codeschicht im Code kann als temporärer Raum eine gute Wirkung haben und die Verschmutzung der Namespace verhindern.
(Funktion (Fenster) {// etwas zu tun}) (Fenster)Beachten Sie, dass das letzte (Fenster) unverzichtbar ist.
Eine Anwendung erstellen
// Registrieren Sie ein Anwendungs -Hauptmodul
var todoapp = window.angular.module ('todoapp', []);
Erstellen Sie einen Controller
todoapp.controller ('maincontroller' // Das $ scope spielt hier auch die Rolle eines Containers und deklariert den sichtbaren Bereich der Variablen. Fügen Sie manuell eine Zeichenfolge von Listen hinzu $ scope.todolist = [{text: 'AngularJs', erledigt: false}, {text: 'bootstrap', erledigt: false}];Funktionsfunktionen verbessern
// eine Funktion hinzufügen, um auf die Interaktion zu reagieren $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, erledigt: false}); $ scope.text = ''; }} // klicken Seien Sie ein wenig problematisch $ scope.doneCount = function () {// Filter verwenden, um var temp = $ scope.todolist.filter (Funktion (Element) {return item.done; // zurückzusetzen, um anzuzeigen, dass die aktuellen Daten die Bedingungen erfüllen und das Ereignis abgeschlossen ist}); return temp.length; }Zusammenfassen
Es gibt nicht viele Codes und tiefgreifende Gedanken.
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.