Analyse von TodoMVC in AngularJS Studiennotizen_AngularJS

Ich habe mir kürzlich AngularJS angesehen, daher werde ich mir einen Moment Zeit nehmen, um es zusammenzufassen.

Offizielle Website-Adresse: http://angularjs.org/

Empfehlen Sie zunächst ein paar Tutorials

1. AngularJS Erste Schritte-Tutorial Es ist relativ einfach und die Übersetzung des offiziellen Tutorials.

2. Vom AngularJS-Neuling zum Experten in sieben Schritten. Es ist auch relativ einfach und ich habe eine Website zum Abspielen von Online-Musik erstellt.

3. AngularJS-Entwicklungshandbuch Dieses Tutorial ist relativ umfangreich, aber ich finde, dass die Übersetzung etwas unklar ist.

Nachdem ich diese Tutorials gelesen habe, habe ich das Gefühl, dass ich AngularJS ein wenig verstehe, und ich möchte es verwenden, um etwas zu tun. Lassen Sie uns in AngularJS geschriebenes todomvc analysieren.

Offizielle Website-Adresse von Todomvc: http://todomvc.com/

Das Verzeichnis des Projekts lautet wie folgt:

Es gibt zwei Ordner in „bower_components“. Der Ordner „angular“ wird zum Speichern der Datei „angular.js“ verwendet. Der Ordner „todomvc-common“ enthält die einheitlichen CSSJs für alle todo-Projekte (wird nur zum Generieren des Inhalts auf der linken Seite verwendet, nicht im Zusammenhang mit das Projekt) und Bilder.

Der js-Ordner ist der große Header, der den entsprechenden Controller (Controller), die Direktive (Anweisung), den Dienst (Service) und app.js enthält.

Der Testordner enthält Code zum Testen und wird nicht analysiert.

index.html ist die Ansichtsseite des Projekts.

Werfen wir zunächst einen Blick auf app.js

Code kopieren Der Code lautet wie folgt:

/*globaler Winkel */
/*jshint unbenutzt:false */
'strikt verwenden';
/**
 * Das Hauptmodul der TodoMVC-App
 *
 * @type {angular.Module}
 */
var todomvc = angle.module('todomvc', []);

Es definiert ein Modul todomvc

Schauen Sie sich todoStorage.js noch einmal unter „Dienste“ an

Code kopieren Der Code lautet wie folgt:

/*global todomvc */
'strikt verwenden';
/**
 * Dienste, die bestehen bleiben und TODOs aus localStorage abrufen
 */
todomvc.factory('todoStorage', function () {
// Die eindeutige Kennung des Todos-JSON-String-Speichers
var STORAGE_ID = 'todos-angularjs';
Geben Sie {
zurück ​​​​ // Aufgaben von localStorage abrufen und in ein JSON-Objekt analysieren
          get: function () {
                return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
// Konvertieren Sie das Todos-Objekt in einen JSON-String und speichern Sie ihn in localStorage
Put: Funktion (todos) {
​​​​​​localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
});

Die Dienstmethode von todoStorage wird mithilfe der Factory-Methode erstellt. Der Kern dieser Dienstmethode besteht darin, zwei Methoden zurückzugeben, get und put, die beide die Funktionen von JSON2 und HTML5 verwenden. get übernimmt den Inhalt von todos aus localStorage und analysiert ihn in JSON, und put konvertiert todos in einen JSON-String und speichert ihn in localStorage.

Schauen Sie sich noch einmal die beiden Anweisungsdateien unter „Anweisungen“ an.

todoFocus.js

Code kopieren Der Code lautet wie folgt:

/*global todomvc */
'strikt verwenden';
/**
 * Direktive, die den Fokus auf das Element legt, auf das sie angewendet wird, wenn der Ausdruck, an den sie bindet, als wahr ausgewertet wird
 */
todomvc.directive('todoFocus', function todoFocus($timeout) {
Rückgabefunktion (Bereich, Elem, Attrs) {
​​​​ // Einen Listener für den Wert des todoFocus-Attributs hinzufügen
Scope.$watch(attrs.todoFocus, Funktion (newVal) {
                if (newVal) {
                    $timeout(function () {
                      elem[0].focus();
                 }, 0, false);
            }
        });
};
});

Unter den an die Funktion zurückgegebenen Parametern ist elem das Array, das die Elemente der Anweisung enthält, und attrs ist ein Objekt, das aus allen Attributen und Attributnamen des Elements besteht.

Es werden zwei AngularJS-Methoden verwendet

$watch(watchExpression, listener, objectEquality) registriert einen Listener-Rückruf. Immer wenn sich watchExpression ändert, wird der Listener-Rückruf ausgeführt.

$timeout(fn[, delay][, invokeApply]) Wenn der Wert von timeout erreicht ist, führen Sie die fn-Funktion aus.

todoFocus.js erstellt die todoFocus-Direktive. Wenn ein Element ein todoFocus-Attribut hat, fügt diese Anweisung einen Listener zum Wert des todoFocus-Attributs des Elements hinzu. Wenn sich der Wert des todoFocus-Attributs in „true“ ändert, wird $timeout(function () {elem[0].focus(); wird ausgeführt). }, 0, false); Die Verzögerungszeit beträgt 0 Sekunden, daher wird elem[0].focus() sofort ausgeführt.

todoEscape.js

Code kopieren Der Code lautet wie folgt:

/*global todomvc */
'strikt verwenden';
/**
 * Direktive, die einen Ausdruck ausführt, wenn das Element, auf das er angewendet wird,
erhält  * ein „Escape“-Keydown-Ereignis.
 */
todomvc.directive('todoEscape', function () {
var ESCAPE_KEY = 27;
Rückgabefunktion (Bereich, Elem, Attrs) {
          elem.bind('keydown', function (event) {
If (event.keyCode === ESCAPE_KEY) {
Scope.$apply(attrs.todoEscape);
            }
        });
};
});

todoEscape.js erstellt die todoEscape-Direktive. Wenn die Escape-Taste gedrückt wird, wird der Ausdruck attrs.todoEscape ausgeführt.

Schauen Sie sich den Header todoCtrl.js im Controller-Ordner an. Diese Datei ist etwas lang, daher habe ich nur Kommentare geschrieben.

Code kopieren Der Code lautet wie folgt:

/*global todomvc, eckig */
'strikt verwenden';
/**
 * Der Hauptcontroller für die App. Der Controller:
 * – ruft das Modell über den todoStorage-Dienst ab und speichert es.
 * – stellt das Modell der Vorlage zur Verfügung und stellt Ereignishandler bereit
 */
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
    // 从localStorage中获取all
    var todos = $scope.todos = todoStorage.get();

// Neue Aufgaben aufzeichnen
$scope.newTodo = '';
// Notieren Sie die bearbeitete Aufgabe
$scope.editedTodo = null;
// Methode ausführen, wenn sich der Wert von todos ändert
$scope.$watch('todos', function (newValue, oldValue) {
​​​​ // Ermitteln Sie die Anzahl der unerledigten Aufgaben
           $scope.remainingCount = filterFilter(todos, { abgeschlossen: false }).length;
​​​​ // Ermitteln Sie die Anzahl der erledigten Aufgaben
           $scope.completedCount = todos.length - $scope.remainingCount;
// Genau dann, wenn $scope.remainingCount 0 ist, ist $scope.allChecked wahr
          $scope.allChecked = !$scope.remainingCount;
// Wenn der neue Wert von todos nicht dem alten Wert entspricht, speichern Sie todos
in localStorage If (newValue !== oldValue) { // Dies verhindert unnötige Aufrufe des lokalen Speichers
             todoStorage.put(todos);
}
}, wahr);
If ($location.path() === '') {
​​​​ //Wenn $location.path() leer ist, setzen Sie es auf /
          $location.path('/');
}
$scope.location = $location;
// Methode ausführen, wenn sich der Wert von location.path() ändert
$scope.$watch('location.path()', Funktion (Pfad) {
​​​​ // Statusfilter abrufen
// Wenn der Pfad „/aktiv“ ist, ist der Filter { abgeschlossen: falsch }
// Wenn der Pfad „/completed“ ist, ist der Filter { abgeschlossen: true }
​​​​ // Ansonsten ist der Filter null
           $scope.statusFilter = (path === '/active') ?
{ abgeschlossen: false } : (path === '/completed') ?
                      { abgeschlossen: wahr } : null;
});
// Eine neue Aufgabe hinzufügen
$scope.addTodo = function () {
      var newTodo = $scope.newTodo.trim();
If (!newTodo.length) {
             zurück;
}
​​​​ // Füge eine Todo zu Todos hinzu, das abgeschlossene Attribut ist standardmäßig auf „false“ gesetzt
         todos.push({
               Titel: newTodo,
abgeschlossen: falsch
        });
                                        // Leer lassen
           $scope.newTodo = '';
};
//Eine Aufgabe bearbeiten
$scope.editTodo = Funktion (todo) {
           $scope.editedTodo = todo;
                // Klonen Sie die ursprüngliche Aufgabe, um sie bei Bedarf wiederherzustellen.
                  // Speichern Sie die Aufgabe vor der Bearbeitung, um sie auf die Fortsetzung der Bearbeitung vorzubereiten
           $scope.originalTodo = angle.extend({}, todo);
};
// Aufgabe bearbeiten abgeschlossen
$scope.doneEditing = Funktion (todo) {
                                        // Leer lassen
          $scope.editedTodo = null;
         todo.title = todo.title.trim();
Wenn (!todo.title) {
                                                // Wenn der Titel der Aufgabe leer ist, entfernen Sie die Aufgabe
               $scope.removeTodo(todo);
}
};
//Stellen Sie die Aufgaben vor der Bearbeitung wieder her
$scope.revertEditing = Funktion (todo) {
         todos[todos.indexOf(todo)] = $scope.originalTodo;
          $scope.doneEditing($scope.originalTodo);
};
// Aufgaben entfernen
$scope.removeTodo = Funktion (todo) {
         todos.splice(todos.indexOf(todo), 1);
};
// Erledigte Aufgaben löschen
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (val) {
               return !val.completed;
        });
};
// Markiere den Status aller Aufgaben (wahr oder falsch)
$scope.markAll = Funktion (abgeschlossen) {
         todos.forEach(function (todo) {
              todo.completed = abgeschlossen;
        });
};
});

Schauen wir uns abschließend index.html an. Lassen Sie uns diese Datei Abschnitt für Abschnitt analysieren.

Code kopieren Der Code lautet wie folgt:

   
       
       
       
       
       
   
   
       

           

               

todos

               

                   
               

           

           

               
                Mark all as complete
               

                   
• 
                         
  
                             
                              {{todo.title}}
                             
                         
  
                         
  
                             
                         
  
                     

               

           

           

                {{remainingCount}}
                   
               
               

                   
• 
                          Alle
                     

                   
• 
                          Active
                     

                   
• 
                          Abgeschlossen
                     

               

                Abgeschlossen löschen ({{completedCount}})
           

       

       

           

Doppelklicken, um eine Aufgabe zu bearbeiten

           

Credits:
                Christoph">http://twitter.com/cburgdorf">Christoph Burgdorf,
                Eric">http://ericbidelman.com">Eric Bidelman,
                Jacob">http://jacobmumm.com">Jacob Mumm und
                Igor">http://igorminar.com">Igor Minar
           

           

Teil von TodoMVChttp://todomvc.com">TodoMVC>
       

       
       
       
       
       
       
       
   

首先是在最下面，引入相应的JS，这个就不多说了.

复制代码 代码如下:

定义style[ng-cloak]，含有ng-cloak属性则不可见.

复制代码 代码如下:

Sie können todo verwenden Jetzt können Sie addTodo() verwenden ，添加了一条todo到todos中.

复制代码 代码如下:

   

再看展示todos的html

复制代码 代码如下:

   
    Alle als abgeschlossen markieren
   

       
• 
             
  
                 
                  {{todo.title}}
                 
             
  
             
  
                 
             
  
         

   

section使用ngShow方法根据todos的长度判断是否显示,加上ng-cloak属性是为了在刚开始时不要显示出AngularJS未处理的页面.可以去掉刷新试一试.

Sie können „id“ mit „toggle-all“checkbox und „allChecked“ als Modell markieren

使用ngRepeat循环产生li标签，todo in todos | filter:statusFilter track by $index，循环todos，用statusFilter过滤，用$index追踪。ngClass绑定了两个class，{completed: todo.completed, editing: todo == editedTodo}，如果todo.completed为true， Die abgeschlossene Klasse wird bearbeitet. Die Klasse wird bearbeitet odo),editTodo会将todo赋给editedTodo, 然后会触发下面form中的todoFocus指令, 这时候form中的input可见, 按Esc就触发revertEditing(todo), 恢复到编辑前, 按Enter或者失去焦点就触发doneEditing(todo) 保存编辑后的todo.class为destroy的button绑定了click事件，点击触发removeTodo(todo)，删除掉该条todo。

最后看todos的统计信息展示的html

复制代码 代码如下:

    {{remainingCount}}
       
   
   

       
• 
              Alle
         

       
• 
              Active
         

       
• 
              Abgeschlossen
         

   

    Abgeschlossen löschen ({{completedCount}})

ng-pluralize标签实现了当remainingCount个数为1时，显示 item left，否则显示 items left。

id为filters的ul标签中根据location.path()的内容不同,标记不同的a标签被选中.

id为clear-completed的button添加了点击事件,触发clearCompletedTodos()，清除掉所有已完成的todo。

今天的笔记就先到这里吧，都是些个人心得，希望小伙伴们能够喜欢。