Ich habe AngularJs in letzter Zeit schon eine Weile beobachtet und werde es irgendwann zusammenfassen.
Offizielle Website -Adresse: http://angularjs.org/
Empfehlen Sie zuerst ein paar Tutorials
1. AngularJS Einführungs -Tutorial ist relativ einfach und eine Übersetzung des offiziellen Tutorials.
2. Sieben Schritte von AngularJS Novices zu Experten sind ebenfalls relativ einfach, und es wurde eine Online -Musik -Playback -Website erstellt.
3. Das Tutorial für AngularJs Development Guide ist ziemlich umfassend, aber ich bin der Meinung, dass die Übersetzung etwas dunkel und schwer zu verstehen ist.
Nachdem ich diese Tutorials gelesen hatte, hatte ich das Gefühl, dass AngularJs auch ein wenig wusste, also wollte ich etwas damit anfangen, also analysierte ich den von AngularJS geschriebenen Toomvc.
Todomvc offizielle Website -Adresse: http://todomvc.com/
Das Projektverzeichnis ist wie folgt:
Es gibt zwei Ordner in Bower_Components, unter denen der Winkelordner mit der Angular.js -Datei übereinstimmt. Der Ordner todomvc-Common enthält das einheitliche CSS/JS aller Todo-Projekte (nur zur Erzeugung des linken Inhalts und hat nichts mit dem Projekt zu tun) und Bilder.
Der JS -Ordner ist ein großer Header, und der entsprechende Controller (Controller)/Richtlinie (Anweisungen)/Service (Service) und App.js sind im Inneren platziert.
Der Testordner enthält den Code zum Testen und wird nicht analysiert.
Index.html ist die Ansichtsseite des Projekts.
Schauen wir uns App.js an
Die Codekopie lautet wie folgt:
/ *Global Angular */
/ *jsint unbenutzt: falsch */
"Strikte";
/**
* Das Haupttomvc -App -Modul
*
* @type {angular.module}
*/
var todomvc = angular.module ('todomvc', []);
Es definiert ein Modul todomvc
Werfen Sie einen Blick auf todostorage.js unter Dienstleistungen
Die Codekopie lautet wie folgt:
/ *global todomvc */
"Strikte";
/**
* Dienste, die Todos von LocalStorage anhalten und abrufen
*/
todomvc.factory ('todostorage', function () {
// TODOS eindeutige Kennung für JSON String Storage
var Storage_id = 'todos-angularjs';
zurückkehren {
// Nehmen Sie Todos von LocalStorage heraus und analysieren Sie es in ein JSON -Objekt
get: function () {
return json.parse (localStorage.getItem (Storage_id) || '[]');
},
// Das Todos -Objekt in eine JSON -String konvertieren und in LocalStorage speichern
put: function (todos) {
localStorage.setItem (Storage_id, json.stringify (todos));
}
};
});
Die TodSostorage -Dienstmethode wird mithilfe der Werksmethode erstellt. Die Essenz dieser Servicemethode besteht darin, zwei Methoden zurückzugeben und zu setzen. Beide verwenden die Funktionen von JSON2 und HTML5. Get nimmt den Inhalt von Todos von LocalStorage aus und analysiert ihn in JSON, stellte Todos in JSON String und speichert es in LocalStorage.
Schauen wir uns die beiden Befehlsdateien unter den Anweisungen an.
todofocus.js
Die Codekopie lautet wie folgt:
/ *global todomvc */
"Strikte";
/**
* Richtlinie, die sich auf das Element konzentriert, auf das sie angewendet wird
*/
todomvc.directive ('todofocus', Funktion todofocus ($ timeout) {
Rückgabefunktion (Umfang, Elem, Attrs) {
// Hören Sie sich den Wert der Todofocus -Eigenschaft an
Scope. $ watch (attr.todofocus, function (newval) {
if (newval) {
$ timeout (function () {
Elem [0] .Focus ();
}, 0, falsch);
}
});
};
});
In der Parameter -Rückgabefunktion ist Elem ein Array von Elementen, die die Anweisung enthalten, und Attrs ist ein Objekt, das aus allen Attributen, Attributnamen usw. des Elements besteht.
Es werden zwei AngularJS -Methoden verwendet
$ watch (watchExpression, Hörer, Objektequalität) Registrieren Sie einen Listener -Rückruf. Immer wenn sich der WatchExpression ändert, wird der Listener -Rückruf ausgeführt.
$ timeout (fn [, delay] [, invoceApply]) Wenn der Wert des Zeitlimits erreicht ist, wird die FN -Funktion ausgeführt.
todofocus.js erstellt die Todofocus -Richtlinie. Wenn ein Element über eine Todofocus -Eigenschaft verfügt, fügt die Richtlinie einen Hörer zum Wert der Todofocus -Eigenschaft des Elements hinzu. Wenn der Wert der Todofocus -Eigenschaft in true geändert wird, $ timeout (function () {elem [0] .focus ();}, 0, false); Die Verzögerungszeit beträgt 0 Sekunden, also wird Elem [0] .Focus () sofort ausgeführt.
todoescape.js
Die Codekopie lautet wie folgt:
/ *global todomvc */
"Strikte";
/**
* Richtlinie, die einen Ausdruck ausführt, wenn das Element, auf das es angewendet wird
* Ein `Escape` Keydown -Ereignis.
*/
todomvc.directive ('todoescape', function () {
var Escape_key = 27;
Rückgabefunktion (Umfang, Elem, Attrs) {
Elem.bind ('Keydown', Funktion (Ereignis) {
if (Event.KeyCode === ESCECTE_KEY) {
Scope. $ bewerben (attr.todoescape);
}
});
};
});
todoescape.js erstellt die Todescape -Richtlinie. Wenn die Fluchttaste gedrückt wird, wird der Ausdruck von attr.todoescape ausgeführt.
Schauen Sie sich den großen Kopf an, todoctrl.js im Ordner Controllers. Diese Datei ist etwas länger, also habe ich gerade Kommentare geschrieben.
Die Codekopie lautet wie folgt:
/ *global todomvc, eckel */
"Strikte";
/**
* Der Hauptcontroller für die App. Der Controller:
* - Ruft das Modell über den Todostorage -Service ab und bestehen
* - Stellen Sie das Modell der Vorlage aus und geben Sie Ereignishandler an
*/
todomvc.controller ('todoctrl', function todoctrl ($ scope, $ location, todostorage, filterfilter) {
// Holen Sie sich Todos von LocalStorage
var Todos = $ scope.todos = todostorage.get ();
// NEUE TODO aufnehmen
$ scope.newtodo = '';
// Aufzeichnung bearbeitetes Todo
$ scope.editedTodo = null;
// Führen Sie die Methode aus, wenn sich der Wert von Todos ändert
$ scope. $ watch ('Todos', Funktion (NewValue, OldValue) {
// Erhalten Sie die Anzahl der unvollendeten Todos
$ scope.RemainingCount = filterFilter (Todos, {abgeschlossen: false}). Länge;
// Holen Sie sich die Anzahl der abgeschlossenen Todos
$ scope.completedCount = todos.length - $ scope.RemainingCount;
// $ scope.allChecked ist wahr, wenn $ scope.remainingCount 0 ist
$ scope.Allchecked =! $ scope.RemainingCount;
// Wenn der neue Wert von Todos und der alte Wert nicht gleich sind, speichern Sie Todos in LocalStorage
if (newValue!
todostorage.put (todos);
}
}, WAHR);
if ($ location.path () === '') {
// Wenn $ location.path () leer ist, auf / gesetzt
$ location.Path ('/');
}
$ scope.location = $ location;
// Führen Sie die Methode aus, wenn sich der Wert des Ortes ändert.
$ scope. $ watch ('location.path ()', Funktion (Pfad) {
// Staatsfilter erhalten
// Wenn der Pfad '/aktiv' ist, ist der Filter {abgeschlossen: false}
// Wenn der Pfad '/abgeschlossen' ist, ist der Filter {abgeschlossen: true}
// Ansonsten ist der Filter null
$ scope.StatusFilter = (Path === '/Active')?
{abgeschlossen: false}: (path === '/abgeschlossen')?
{abgeschlossen: true}: null;
});
// Fügen Sie ein neues Todo hinzu
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
zurückkehren;
}
// Fügen Sie Todos ein Todo hinzu, die ausgefüllte Eigenschaft stand in false
todos.push ({{{
Titel: Newtodo,
Fertig: Falsch
});
// Leer
$ scope.newtodo = '';
};
// Ein Todo bearbeiten
$ scope.edittodo = function (todo) {
$ scope.EditedTodo = Todo;
// Klonen Sie das ursprüngliche Todo, um es auf Nachfrage wiederherzustellen.
// Schreibdo vor dem Bearbeiten speichern und sich auf die Wiederherstellung der Bearbeitung vorbereiten
$ scope.originalTodo = angular.extend ({}, todo);
};
// Todo bearbeiten, um zu vervollständigen
$ scope.doneediting = function (todo) {
// Leer
$ scope.editedTodo = null;
todo.title = todo.title.trim ();
if (! todo.title) {
// Wenn der Titel von Todo leer ist, entfernen Sie den Todo
$ scope.removetodo (todo);
}
};
// Todo vor der Bearbeitung wiederherstellen
$ scope.copediting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originalTodo;
$ scope.doneediting ($ scope.originalTodo);
};
// Todo entfernen
$ scope.removeTodo = function (todo) {
todos.splice (todos.indexof (todo), 1);
};
// Clear Ferle TODOS
$ scope.clearcompletedTodos = function () {
$ scope.todos = todos = todos.filter (function (val) {
return! val.com pleted;
});
};
// markieren Sie den gesamten Todo -Status (wahr oder falsch)
$ scope.markall = function (abgeschlossen) {
todos.foreach (Funktion (todo) {
todo.com pleted = abgeschlossen;
});
};
});
Schauen wir uns schließlich einen Blick auf Index.html an, unsere Analyse dieser Datei nacheinander.
Die Codekopie lautet wie folgt:
<! docType html>
<html Lang = "en" ng-App = "todomvc" data-ramework = "Angularjs">
<kopf>
<meta charset = "utf-8">
<meta http-äquiv = "x-ua-kompatible" content = "ie = edge">
<title> AngularJS • todomvc </title>
<link rel = "stylesheet" href = "bower_components/todomvc-common/base.css">
<Styles> [ng-cloak] {display: keine; } </style>
</head>
<body>
<Abschnitt ID = "TodoApp" ng-controller = "todoctrl">
<Header ID = "Header">
<h1> Todos </h1>
<form id = "Todo-Form" ng-submit = "addtodo ()">
<input id = "new-todo" placeholder = "Was muss getan werden?" ng-model = "newtodo" autofocus>
</form>
</header>
<Abschnitt ID = "Main" ng-show = "Todos.length" ng-cloak>
<input id = "Toggle-All" Typ = "Kontrollkästchen" ng-model = "AllChecked" ng-klick = "markall (AllChecked)">
<Label für = "Toggle-All"> Alle als vollständig markieren </label>
<ul id = "Todo-list">
<li ng-Repeat = "Todo in todos | Filter: StatusFilter-Track von $ index" ng-class = "{abgeschlossen: todo.com pleted, bearbeitet: todo == editedTodo}">
<div>
<Eingabe type = "CheckBox" ng-model = "Todo.com pleted">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<button ng-klick = "removetodo (toDo)"> </button>
</div>
<Form ng-submit = "Dreading (todo)">
<Eingabe ng-trim = "false" ng-model = "Todo.title" todo-escape = "Reversediting (todo)" ng-blur = "Dreading (todo)" todo-focus = "Todo == bearbeitet">
</form>
</li>
</ul>
</Abschnitt>
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{restingCount}} </strong>
<ng-pluralize count = "restingCount" When = "{eins: 'Element links', andere: 'Elemente links'}"> </ng-pluralize>
</span>
<ul id = "filter">
<li>
<a ng-class = "{ausgewählt: location.path () == '/'}" href = "#/"> alle </a>
</li>
<li>
<a ng-class = "{ausgewählt: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{ausgewählt: location.path () == '/ferast'}" href = "#/ferast"> abgeschlossen </a>
</li>
</ul>
<button id = "clear-completed" ng-klick = "clearCompletedTodos ()" ng-show = "ferastCount"> clear ad Clear ({{ferastCount}}) </button>
</footer>
</Abschnitt>
<footer id = "info">
<p> Doppelklicken Sie, um ein Todo zu bearbeiten </p>
<p> Credits:
<a href = "http://twitter.com/cburgdorf"> Christoph burgdorf </a>,,
<a href = "http://ericbidelman.com"> Eric Bidelman </a>,,
<a href = "http://jacobmumm.com"> Jacob Mumm </a> und
<a href = "http://igorminar.com"> Igor Minar </a>
</p>
<p> Teil von <a href = "http://todomvc.com"> todomvc </a> </p>
</footer>
<script src = "bower_components/todomvc-common/base.js"> </script>
<script src = "bower_components/angular/angular.js"> </script>
<script src = "js/app.js"> </script>
<script src = "js/controller/todoctrl.js"> </script>
<script src = "js/dienste/todostorage.js"> </script>
<script src = "JS/Direktiven/todofocus.js"> </script>
<script src = "JS/Direktiven/todoescape.js"> </script>
</body>
</html>
Zunächst werden wir die entsprechenden JS unten vorstellen, also werde ich nicht viel dazu sagen.
Die Codekopie lautet wie folgt:
<script src = "bower_components/todomvc-common/base.js"> </script>
<script src = "bower_components/angular/angular.js"> </script>
<script src = "js/app.js"> </script>
<script src = "js/controller/todoctrl.js"> </script>
<script src = "js/dienste/todostorage.js"> </script>
<script src = "JS/Direktiven/todofocus.js"> </script>
<script src = "JS/Direktiven/todoescape.js"> </script>
Definieren Sie den Stil [ng-cloak], der das NG-Clloak-Attribut enthält und nicht sichtbar ist.
Die Codekopie lautet wie folgt:
<Styles> [ng-cloak] {display: keine; } </style>
Schauen wir uns die HTML an, um Todo hinzuzufügen. Das gebundene Modell ist Newtodo. Die Methode des Subjekts ist addtodo () in todoctrl.js. Ein Todo wird hinzugefügt. Klicken Sie auf die Eingabetaste und das Einreichungsereignis wird standardmäßig ausgelöst, wodurch die addtodo () -Methode ausgelöst wird und TODOS ein Todo hinzufügt.
Die Codekopie lautet wie folgt:
<form id = "Todo-Form" ng-submit = "addtodo ()">
<input id = "new-todo" placeholder = "Was muss getan werden?" ng-model = "newtodo" autofocus>
</form>
Schauen Sie sich die HTML an, die Todos zeigt
Die Codekopie lautet wie folgt:
<Abschnitt ID = "Main" ng-show = "Todos.length" ng-cloak>
<input id = "Toggle-All" Typ = "Kontrollkästchen" ng-model = "AllChecked" ng-klick = "markall (AllChecked)">
<Label für = "Toggle-All"> Alle als vollständig markieren </label>
<ul id = "Todo-list">
<li ng-Repeat = "Todo in todos | Filter: StatusFilter-Track von $ index" ng-class = "{abgeschlossen: todo.com pleted, bearbeitet: todo == editedTodo}">
<div>
<Eingabe type = "CheckBox" ng-model = "Todo.com pleted">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<button ng-klick = "removetodo (toDo)"> </button>
</div>
<Form ng-submit = "Dreading (todo)">
<Eingabe ng-trim = "false" ng-model = "Todo.title" todo-escape = "Reversediting (todo)" ng-blur = "Dreading (todo)" todo-focus = "Todo == bearbeitet">
</form>
</li>
</ul>
</Abschnitt>
Der Abschnitt verwendet die NGShow -Methode, um zu bestimmen, ob sie basierend auf der Länge von TODOS angezeigt wird. Das NG-Clloak-Attribut wird hinzugefügt, um die Seiten zu verhindern, dass AngularJs zu Beginn nicht verarbeitet werden. Sie können die Aktualisierung entfernen und versuchen.
Das Kontrollkästchen mit der ID wird umgeschaltet und ist an das alchecked-Modell gebunden, klicken, um Markall auszulösen (AllChecked), den Wert von AlChecked zu übergeben und alle Todos zu markieren.
Verwenden Sie die NGrepeat -Schleife, um Li -Tags zu generieren, todo in todos | Filter: StatusFilter -Track von $ index, Loop Todos, Filter mit StatusFilter und Trace mit $ index. NgClass bindet zwei Klassen, {abgeschlossen: todo.com pleted, bearbeitet: todo == editedTodo}, wenn Todo.com pleted wahr ist, fertige Klasse hinzufügen und wenn todo == editedTodo, hinzufügen, bearbeitungsklasse hinzuzufügen. Die Klasse ist an todo.com verpflichtet, um das Kontrollkästchen von Toggle zu entfalten. Das im Todo-Titel angezeigte Etikett bindet ein Doppelklickereignis. Doppelklicken Sie, um Edittodo (Todo) auszulösen. Edittodo wird Todo dem EditedTodo zuweisen und dann die Todofocus -Anweisung in der folgenden Form auslösen. Zu diesem Zeitpunkt kann der Eingang in der Form sichtbar sein. Drücken Sie ESC, um das Rückverfahren (todo) auszulösen. Bevor Sie zur Bearbeitung zurückkehren, drücken Sie den Eingabetaste oder verlieren Sie den Fokus auf das Auslöser (TODO), um das bearbeitete Todo zu retten. Die Klasse bindet die Schaltfläche zum Klickenereignis, um zu zerstören, klicken Sie, um die Removetodo (TODO) auszulösen, und löschen Sie das Todo.
Sehen Sie sich schließlich die HTML an, die von Todos Statistics angezeigt wird
Die Codekopie lautet wie folgt:
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{restingCount}} </strong>
<ng-pluralize count = "restingCount" When = "{eins: 'Element links', andere: 'Elemente links'}"> </ng-pluralize>
</span>
<ul id = "filter">
<li>
<a ng-class = "{ausgewählt: location.path () == '/'}" href = "#/"> alle </a>
</li>
<li>
<a ng-class = "{ausgewählt: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{ausgewählt: location.path () == '/ferast'}" href = "#/ferast"> abgeschlossen </a>
</li>
</ul>
<button id = "clear-completed" ng-klick = "clearCompletedTodos ()" ng-show = "ferastCount"> clear ad Clear ({{ferastCount}}) </button>
</footer>
Das NG-Pluralize-Tag implementiert das Anzeigeelement, das übrig bleibt, wenn die Anzahl der verbleibenden Bezirke 1 beträgt, andernfalls die Anzeigeelemente übrig.
Das UL -Tag mit ID IS -Filtern wird gemäß dem Inhalt des Standorts ausgewählt.Path ().
ID fügt der Schaltfläche "Clear-Completed" ein Klickereignis hinzu, wodurch ClearCompletedTodos () ausgelöst wird, wodurch alle abgeschlossenen Todos gelöscht werden.
Lassen Sie uns die heutigen Notizen hier anhalten. Sie sind alle persönliche Erfahrungen. Ich hoffe du kannst sie mögen.