Analyse de TodoMVC dans AngularJS Study Notes

J'ai regardé AngularJS récemment, je vais donc prendre un moment pour le résumer.

Adresse du site officiel : http://angularjs.org/

Recommandez d'abord quelques tutoriels

1. Tutoriel de démarrage d'AngularJS Il est relativement basique et est la traduction du tutoriel officiel.

2. De novice AngularJS à expert en sept étapes C'est aussi relativement basique et j'ai créé un site de lecture de musique en ligne.

3. Guide de développement AngularJS Ce tutoriel est relativement complet, mais j'ai l'impression que la traduction est un peu obscure.

Après avoir lu ces tutoriels, je sens que je comprends un peu AngularJS et je veux l'utiliser pour faire quelque chose. Analysons todomvc écrit en AngularJS.

Adresse du site officiel de Todomvc : http://todomvc.com/

Le répertoire du projet est le suivant :

Il y a deux dossiers placés dans bower_components. Le dossier angulaire est utilisé pour stocker le fichier angulaire.js. Le dossier todomvc-common contient les CSS unifiés pour tous les projets Todo (utilisé uniquement pour générer le contenu de gauche, sans rapport avec celui-ci). le projet) et des photos.

Le dossier js est le gros en-tête, qui contient la directive (instruction) du contrôleur (contrôleur) correspondante (service) et app.js.

Le dossier test contient du code à tester et ne sera pas analysé.

index.html est la page de visualisation du projet.

Jetons d'abord un coup d'œil à app.js

Copier le code Le code est le suivant :

/*angulaire global */

/*jshint inutilisé:false */

'utiliser strict';

/**

 * Le module principal de l'application TodoMVC

 *

 * @type {angular.Module}

 */

var todomvc = angulaire.module('todomvc', []);

Il définit un module todomvc

Jetez un autre coup d'œil à todoStorage.js sous services

Copier le code Le code est le suivant :

/*todomvc global */

'utiliser strict';

/**

 * Services qui persistent et récupèrent les TODO de localStorage

 */

todomvc.factory('todoStorage', function() {

// L'identifiant unique du stockage de chaînes todos JSON

var STORAGE_ID = 'todos-angularjs';

Retour {

​​​​ // Récupérez les tâches de localStorage et analysez-les dans un objet JSON

          obtenir : fonction () {

                return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');

},

// Convertit l'objet todos en chaîne JSON et stocke-le dans localStorage

Put : fonction (todos) {

​​​​​​localStorage.setItem(STORAGE_ID, JSON.stringify(todos));

>

};

});

La méthode de service de todoStorage est créée à l'aide de la méthode d'usine. L'essence de cette méthode de service est de renvoyer deux méthodes, get et put, qui utilisent toutes deux les fonctionnalités de JSON2 et HTML5. get prend le contenu des tâches de localStorage et l'analyse en JSON, convertit les tâches en une chaîne JSON et le stocke dans localStorage.

Regardez à nouveau les deux fichiers d'instructions sous les directives.

todoFocus.js

Copier le code Le code est le suivant :

/*todomvc global */

'utiliser strict';

/**

 * Directive qui met le focus sur l'élément auquel elle est appliquée lorsque l'expression à laquelle elle se lie est évaluée à true

 */

todomvc.directive('todoFocus', function todoFocus($timeout) {

Fonction de retour (portée, elem, attrs) {

​​​​ // Ajouter un écouteur pour la valeur de l'attribut todoFocus

scope.$watch(attrs.todoFocus, fonction (newVal) {

                if (newVal) {

                    $timeout(function () {

                      elem[0].focus();

                 }, 0, faux);

            }

        });

};

});

Parmi les paramètres renvoyés à la fonction, elem est le tableau contenant les éléments de l'instruction, et attrs est un objet composé de tous les attributs et noms d'attributs de l'élément.

Deux méthodes AngularJS sont utilisées

$watch(watchExpression, listeningr, objectEquality) enregistre un rappel d'écouteur Chaque fois que watchExpression change, le rappel d'écouteur sera exécuté.

$timeout(fn[, delay][, invoquéApply]) Lorsque la valeur du timeout est atteinte, exécutez la fonction fn.

todoFocus.js crée la directive todoFocus. Lorsqu'un élément a un attribut todoFocus, cette instruction ajoutera un écouteur à la valeur de l'attribut todoFocus de l'élément. Si la valeur de l'attribut todoFocus devient true, $timeout(function () {elem[0].focus(); sera exécuté). }, 0, false); Le délai est de 0 seconde, donc elem[0].focus() sera exécuté immédiatement.

todoEscape.js

Copier le code Le code est le suivant :

/*todomvc global */

'utiliser strict';

/**

 * Directive qui exécute une expression lorsque l'élément auquel elle est appliquée obtient

 * un événement keydown `escape`.

 */

todomvc.directive('todoEscape', function() {

var ESCAPE_KEY = 27;

Fonction de retour (portée, elem, attrs) {

          elem.bind('keydown', fonction (événement) {

Si (event.keyCode === ESCAPE_KEY) {

scope.$apply(attrs.todoEscape);

            }

        });

};

});

todoEscape.js crée la directive todoEscape. Lorsque la touche Échap est enfoncée, l'expression attrs.todoEscape est exécutée.

Regardez l'en-tête, todoCtrl.js dans le dossier des contrôleurs. Ce fichier est un peu long, j'ai donc juste écrit des commentaires.

Copier le code Le code est le suivant :

/*todomvc global, angulaire */
'utiliser strict';
/**
* Le contrôleur principal de l'application. Le contrôleur :
* - récupère et conserve le modèle via le service todoStorage
* - expose le modèle au modèle et fournit des gestionnaires d'événements
*/
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
// 从localStorage中获取all
var todos = $scope.todos = todoStorage.get();

// Enregistrer une nouvelle tâche
$scope.newTodo = '';
// Enregistre la tâche modifiée
$scope.editedTodo = null;
// Exécute la méthode lorsque la valeur de todos change
$scope.$watch('todos', function (newValue, oldValue) {
// Obtenez le nombre de tâches inachevées
           $scope.remainingCount = filterFilter(todos, {completed: false }).length;
// Obtenez le nombre de tâches terminées
           $scope.completedCount = todos.length - $scope.remainingCount;
// Si et seulement si $scope.remainingCount vaut 0, $scope.allChecked est vrai
          $scope.allChecked = !$scope.remainingCount;
// Lorsque la nouvelle valeur de todos n'est pas égale à l'ancienne valeur, stockez todos
dans localStorage If (newValue !== oldValue) { // Cela évite les appels inutiles au stockage local
             todoStorage.put(todos);
>
}, vrai);
Si ($location.path() === '') {
//Si $location.path() est vide, définissez-le sur /
          $location.path('/');
>
$scope.location = $location;
// Exécute la méthode lorsque la valeur de location.path() change
$scope.$watch('location.path()', function (chemin) {
// Obtenir le filtre d'état
// Si le chemin est '/active', le filtre est {completed: false }
// Si le chemin est '/completed', le filtre est {completed: true }
// Sinon, le filtre est nul
           $scope.statusFilter = (chemin === '/active') ?
{ terminé : faux } : (chemin === '/terminé') ?
                      { terminé : vrai } : null;
});
// Ajouter une nouvelle tâche
$scope.addTodo = fonction () {
var newTodo = $scope.newTodo.trim();
Si (!newTodo.length) {
             revenir ;
>
// Ajouter une tâche à todos, l'attribut terminé est par défaut false
         todos.push({
               titre : nouveauTodo,
complété : faux
        });
// Laisser vide
           $scope.newTodo = '';
};
//Modifier une tâche
$scope.editTodo = fonction (à faire) {
           $scope.editedTodo = todo;
                // Clonez la tâche d'origine pour la restaurer à la demande.
                  // Enregistrez la tâche avant de la modifier pour préparer la reprise de la modification
           $scope.originalTodo = angulaire.extend({}, todo);
};
// Modification de la tâche terminée
$scope.doneEditing = fonction (à faire) {
// Laisser vide
          $scope.editedTodo = null;
         todo.title = todo.title.trim();
Si (!todo.title) {
                                                // Si le titre de la tâche est vide, supprimez la tâche
               $scope.removeTodo(todo);
>
};
//Restaurer la tâche avant de la modifier
$scope.revertEditing = fonction (à faire) {
         todos[todos.indexOf(todo)] = $scope.originalTodo;
          $scope.doneEditing($scope.originalTodo);
};
// Supprimer la tâche
$scope.removeTodo = fonction (à faire) {
         todos.splice(todos.indexOf(todo), 1);
};
// Effacer les tâches terminées
$scope.clearCompletedTodos = fonction () {
$scope.todos = todos = todos.filter(function (val) {
               return !val.completed;
        });
};
// Marque le statut de toutes les tâches (vrai ou faux)
$scope.markAll = fonction (terminée) {
         todos.forEach(function (todo) {
              todo.completed = terminé ;
        });
};
});

Enfin, jetez un œil à index.html Analysons ce fichier section par section.

Copier le code Le code est le suivant :

        AngularJS • TodoMVC

                Mark all as complete

                            {{todo.title}}

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

复制代码代码如下 :

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

复制代码代码如下 :

来看添加todo的html，绑定的model为newTodo，submit的方法是todoCtrl.js中的addTodo()，会添加一条todo，点击Enter，默认触发提交Il s'agit d'un exemple de addTodo(). ，添加了一条todo到todos中。

复制代码代码如下 :

再看展示todos的html

复制代码代码如下 :

    Marquer tout comme terminé

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

其中id为toggle-all的checkbox绑定到allChecked model上，点击触发markAll(allChecked),将allChecked的值传入，标记所有的todos。

使用ngRepeat循环产生li标签，todo in todos | filter:statusFilter track by $index，循环todos，用statusFilter过滤，用$index追踪。ngClass绑定了两个class，{completed: todo.completed, édition: todo == editedTodo}，如果todo.completed为true， Classe terminée, et todo==editedTodo, et classe d'édition.classe, bascule, case à cocher, todo.completed. Todo(todo)，editTodo会将todo赋Dans editedTodo, dans le formulaire d'entrée todoFocus, dans le formulaire d'entrée et dans revertEditing(todo), puis dans Enter或者失去焦点就触发doneEditing(todo) ，保存编辑后的todo。class为destroy的button绑定了click事件，点击触发removeTodo(todo)，删除掉该条todo。

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

复制代码代码如下 :