Je regarde AngularJS depuis un certain temps récemment, et je vais le résumer à un moment donné.
Adresse officielle du site Web: http://angularjs.org/
Recommander d'abord quelques tutoriels
1. Le tutoriel d'introduction d'AngularJS est relativement basique et est une traduction du tutoriel officiel.
2. Sept étapes des novices angularjs aux experts sont également relativement basiques, et un site Web de lecture de musique en ligne a été créé.
3. Le tutoriel du Guide de développement AngularJS est assez complet, mais je pense que la traduction est un peu obscure et difficile à comprendre.
Après avoir lu ces tutoriels, j'ai senti qu'AngularJS savait aussi un peu, donc je voulais en faire quelque chose, alors j'ai analysé le todomvc écrit par AngularJS.
Adresse du site officiel de ToDomvc: http://todomvc.com/
Le répertoire du projet est le suivant:
Il y a deux dossiers dans Bower_Components, parmi lesquels le dossier angulaire est utilisé pour être le même que le fichier angular.js. Le dossier TODOMVC-COMMON contient le CSS / JS unifié de tous les projets TODO (juste utilisé pour générer le contenu de gauche et n'a rien à voir avec le projet) et des images.
Le dossier JS est un grand en-tête, et le contrôleur (contrôleur) / directif correspondant (instructions) / service (service) et app.js sont placés à l'intérieur.
Le dossier de test contient le code pour les tests et n'analyse pas.
index.html est la page de vue du projet.
Jetons un coup d'œil à app.js
La copie de code est la suivante:
/ * Global Angular * /
/ * jshint inutilisé: faux * /
«utiliser strict»;
/ **
* Le module d'application principal ToDomvc
*
* @type {angular.module}
* /
var todomvc = angular.module ('todomvc', []);
Il définit un module todomvc
Jetez un œil à Todostorage.js sous Services
La copie de code est la suivante:
/ * global todomvc * /
«utiliser strict»;
/ **
* Services qui persistent et récupèrent Todos de Localstorage
* /
todomvc.factory ('todostorage', function () {
// Todos Identifiant unique pour le stockage de chaînes JSON
var Storage_id = 'Todos-AngularJS';
retour {
// Sortez Todos de Localstorage et analysez-le dans un objet JSON
get: function () {
return JSON.Parse (localStorage.getItem (Storage_ID) || '[]');
},
// Convertir l'objet Todos en une chaîne JSON et la stocker dans localstorage
put: fonction (todos) {
localStorage.SetItem (Storage_ID, JSON.Stringify (Todos));
}
};
});
La méthode du service Todostorage est créée à l'aide de la méthode d'usine. L'essence de cette méthode de service est de retourner deux méthodes à obtenir et à mettre. Les deux utilisent les fonctionnalités de JSON2 et HTML5. Get prend le contenu de Todos de LocalStorage et l'analyse en JSON, posez les Todos en JSON et le stocke dans localStorage.
Jetons un œil aux deux fichiers de commande ci-dessous des directives.
toofocus.js
La copie de code est la suivante:
/ * global todomvc * /
«utiliser strict»;
/ **
* Directive qui se concentre sur l'élément à laquelle il est appliqué lorsque l'expression qu'elle se lie à l'évaluation à la vraie
* /
toDomvc.Directive ('toofocus', fonction tofofocus ($ timeout) {
Fonction de retour (scope, elem, attrs) {
// ajouter l'écoute à la valeur de la propriété de toofocus
Scope. $ watch (attrs.Todofocus, function (newVal) {
if (newVal) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
}
});
};
});
Dans la fonction de retour des paramètres, Elem est un tableau d'éléments contenant l'instruction, et les attors sont un objet composé de tous les attributs, noms d'attribut, etc. de l'élément.
Deux méthodes angularjs sont utilisées
$ watch (watchExpression, écouteur, objectifalité) Enregistrez un rappel d'auditeur. Chaque fois que le WatchExpression change, le rappel de l'écoute sera exécuté.
$ timeout (fn [, retard] [, invokeApply]) Lorsque la valeur du délai d'attente est atteinte, la fonction fn est exécutée.
Toofocus.js crée la directive Toofocus. Lorsqu'un élément a une propriété de toofocus, la directive ajoutera un auditeur à la valeur de la propriété Toofocus de l'élément. Si la valeur de la propriété TooFocus est changée en true, $ timeout (function () {elem [0] .focus ();}, 0, false); Le temps de retard est de 0 seconde, donc Elem [0] .focus () sera exécuté immédiatement.
tooescape.js
La copie de code est la suivante:
/ * global todomvc * /
«utiliser strict»;
/ **
* Directive qui exécute une expression lorsque l'élément pour lequel il est appliqué obtient
* Un événement Keydown «Escape».
* /
todomvc.Directive ('tooescape', function () {
var Escape_Key = 27;
Fonction de retour (scope, elem, attrs) {
elem.bind ('keydown', fonction (événement) {
if (event.KeyCode === Escape_key) {
Scope. $ Apply (att.TodoOesCape);
}
});
};
});
TooOSCape.js crée la directive TooOSCape. Lorsque la touche d'échappement est enfoncée, l'expression d'Attr.TodooScape est exécutée.
Jetez un œil à la grande tête, Todoctrl.js dans le dossier Controllers. Ce fichier est un peu plus long, donc je viens d'écrire des commentaires.
La copie de code est la suivante:
/ * Global ToDomvc, Angular * /
«utiliser strict»;
/ **
* Le contrôleur principal de l'application. Le contrôleur:
* - récupère et persiste le modèle via le service Todostorage
* - expose le modèle au modèle et fournir des gestionnaires d'événements
* /
todomvc.Controller ('toDoctrl', fonction toDoctrl ($ scope, $ emplacement, todostorage, filterFilter) {
// Obtenez des todos de localstorage
var todos = $ scope.todos = todostorage.get ();
// Enregistrer le nouveau Todo
$ scope.newtodo = '';
// Enregistrer TODO édité
$ scope.editTodo = null;
// Exécuter la méthode lorsque la valeur de Todos change
$ scope. $ watch ('todos', fonction (newValue, oldValue) {
// Obtenez le nombre de todos inachevés
$ scope.reMainingCount = filterFilter (todos, {terminé: false}). Length;
// Obtenez le nombre de todos terminés
$ SCOPE.COMPLETEDCOUNT = TODOS.LENGTH - $ SCOPE.REMINGINGCOUND;
// $ scope.allchecked est vrai si et seulement si $ scope.remainingCount est 0
$ scope.allchecked =! $ Scope.ReMainingCount;
// Lorsque la nouvelle valeur de Todos et l'ancienne valeur ne sont pas égales, stockez Todos dans Localstorage
if (newValue! == OldValue) {// Cela empêche les appels inutiles vers le stockage local
todostorage.put (todos);
}
}, vrai);
if ($ location.path () === '') {
// si $ location.path () est vide, réglé sur /
$ location.path ('/');
}
$ scope.location = $ localisation;
// Exécuter la méthode lorsque la valeur de l'emplacement.path () change
$ scope. $ watch ('location.path ()', fonction (path) {
// Obtenez un filtre d'état
// Si le chemin est '/ actif', le filtre est {terminé: false}
// Si le chemin est '/ terminé', le filtre est {terminé: true}
// sinon, le filtre est nul
$ scope.statusfilter = (path === '/ active')?
{terminé: false}: (path === '/ terminé')?
{terminé: true}: null;
});
// Ajouter un nouveau Todo
$ scope.addtodo = fonction () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
retour;
}
// Ajouter un todo à Todos, la propriété terminée par défaut est false
todos.push ({
Titre: Newtodo,
terminé: faux
});
// Vide
$ scope.newtodo = '';
};
// Modifier un TODO
$ scope.editTodo = fonction (todo) {
$ scope.editTodo = TODO;
// Clone le TODO d'origine pour le restaurer à la demande.
// Enregistrer le TODO avant de modifier et se préparer à restaurer l'édition
$ scope.originaltodo = angular.extend ({}, todo);
};
// Modifier TODO pour terminer
$ scope.doneediting = function (todo) {
// Vide
$ scope.editTodo = null;
todo.title = todo.title.trim ();
if (! todo.title) {
// Si le titre de TODO est vide, supprimez le todo
$ scope.removetodo (TODO);
}
};
// restaurer le TODO avant de modifier
$ scope.ReverteDiting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originaltodo;
$ scope.doneediting ($ scope.originaltodo);
};
// supprimer Todo
$ scope.removetodo = fonction (todo) {
todos.splice (todos.indexof (todo), 1);
};
// Effacer Todos terminé
$ scope.clearcompletedTodos = function () {
$ scope.todos = todos = todos.filter (fonction (val) {
Retour! Val.completed;
});
};
// Marquez tout le statut de TODO (vrai ou faux)
$ scope.markall = fonction (terminé) {
todos.ForEach (fonction (todo) {
todo.completed = terminé;
});
};
});
Enfin, jetons un coup d'œil à index.html, notre analyse de ce fichier un par un.
La copie de code est la suivante:
<! doctype html>
<html lang = "en" ng-app = "todomvc" data-framework = "angularjs">
<adal>
<meta charset = "utf-8">
<meta http-equiv = "x-ua compatible" content = "ie = edge">
<Title> AngularJs • ToDomvc </Title>
<link rel = "Stylesheet" href = "bower_components / todomvc-common / base.css">
<style> [ng-coak] {affichage: aucun; } </ style>
</ head>
<body>
<section id = "todoapp" ng-contrôleur = "toDoctrl">
<Header id = "En-tête">
<h1> todos </h1>
<form id = "ToDo-form" ng-sumit = "addtodo ()">
<entrée id = "new-todo" placeholder = "Qu'est-ce qui doit être fait?" ng-model = "NewTodo" Autofocus>
</ form>
</-header>
<section id = "main" ng-show = "todos.length" ng-coak>
<input id = "toggle-all" type = "checkbox" ng-model = "allchecked" ng-Click = "markall (allchecked)">
<étiquette pour = "toggle-all"> Marquez le tout comme complet </ labe>
<ul id = "ToDo-list">
<li ng-repeat = "todo in todos | filter: statusfilter track by $ index" ng-class = "{complété: todo.compted, édition: todo == editedTodo}">
<div>
<input type = "checkbox" ng-model = "todo.completted">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </ label>
<Button ng-Click = "RemoveTodo (TODO)"> </ Button>
</div>
<form ng-sunumit = "Doediting (todo)">
<entrée ng-trim = "false" ng-model = "todo.title" todo-escape = "reversation (todo)" ng-blur = "Dodicedit (todo)" todo-focus = "todo == editedtodo">
</ form>
</li>
</ul>
</ section>
<footer id = "footer" ng-show = "todos.length" ng-coak>
<span id = "todo-Count"> <strong> {{resoingCount}} </strong>
<ng-pleuralize Count = "resoindingCount" quand = "{One: 'Item Left', Autre: 'Items Left'}"> </ ng-pleuralize>
</span>
<ul id = "filtres">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "# /"> Tous </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/ active'}" href = "# / actif"> actif </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/ terminé'}" href = "# / terminé"> terminé </a>
</li>
</ul>
<Button id = "clear-complété" ng-Click = "clearCompletedTodos ()" ng-show = "terminédCount"> Clear terminée ({{complétedCount}}) </futton>
</fooder>
</ section>
<footer id = "info">
<p> Double-cliquez pour modifier un TODO </p>
<p> Crédits:
<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> et
<a href = "http://igorminar.com"> igor minar </a>
</p>
<p> partie de <a href = "http://todomvc.com"> todomvc </a> </p>
</fooder>
<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 / Controllers / ToDoctrl.js"> </ Script>
<script src = "js / services / todostorage.js"> </ script>
<script src = "js / directives / todofocus.js"> </cript>
<script src = "js / directives / toooescape.js"> </ script>
</docy>
</html>
Tout d'abord, nous présenterons le JS correspondant en bas, donc je ne dirai pas grand-chose à ce sujet.
La copie de code est la suivante:
<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 / Controllers / ToDoctrl.js"> </ Script>
<script src = "js / services / todostorage.js"> </ script>
<script src = "js / directives / todofocus.js"> </cript>
<script src = "js / directives / toooescape.js"> </ script>
Définissez le style [ng-coak], qui contient l'attribut ng-coak et n'est pas visible.
La copie de code est la suivante:
<style> [ng-coak] {affichage: aucun; } </ style>
Regardons le HTML pour ajouter Todo. Le modèle lié est Newtodo. La méthode de soumission est addTodo () dans toDoctrl.js. Un TODO sera ajouté. Cliquez sur Entrer et l'événement de soumission sera déclenché par défaut, qui déclenchera la méthode addTodo () et ajoutera un todo à Todos.
La copie de code est la suivante:
<form id = "ToDo-form" ng-sumit = "addtodo ()">
<entrée id = "new-todo" placeholder = "Qu'est-ce qui doit être fait?" ng-model = "NewTodo" Autofocus>
</ form>
Regardez le HTML montrant Todos
La copie de code est la suivante:
<section id = "main" ng-show = "todos.length" ng-coak>
<input id = "toggle-all" type = "checkbox" ng-model = "allchecked" ng-Click = "markall (allChecked)">
<étiquette pour = "toggle-all"> Marquez le tout comme complet </ labe>
<ul id = "ToDo-list">
<li ng-repeat = "todo in todos | filter: statusfilter track by $ index" ng-class = "{complété: todo.compted, édition: todo == editedTodo}">
<div>
<input type = "checkbox" ng-model = "todo.completted">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </ label>
<Button ng-Click = "RemoveTodo (TODO)"> </ Button>
</div>
<form ng-sunumit = "Doediting (todo)">
<entrée ng-trim = "false" ng-model = "todo.title" todo-escape = "reversation (todo)" ng-blur = "Dodicedit (todo)" todo-focus = "todo == editedtodo">
</ form>
</li>
</ul>
</ section>
La section utilise la méthode Ngshow pour déterminer si elle est affichée en fonction de la longueur de Todos. L'attribut Ng-Coak est ajouté pour empêcher les pages que les angularjs ne sont pas traitées au début. Vous pouvez retirer le rafraîchissement et l'essayer.
La case à cocher avec ID est à bascule-tout est liée au modèle AllChecked, cliquez pour déclencher Markall (AllChecked), passer la valeur de tous leschecés et marquer tous les todos.
Utilisez la boucle NGrepeat pour générer des balises Li, TODO dans Todos | Filtre: StatutFilter Track by $ index, Loop Todos, Filtre avec StatusFilter et Trace avec $ index. NgClass lie deux classes, {terminée: todo.comptedEd, édition: todo == editEdTodo}, si Todo.completed est vrai, ajoutez la classe terminée, et si todo == éditétodo, ajoutez une classe d'édition. La classe est liée à Todo.completed pour la case à cocher Toggle. L'étiquette affichée dans le titre TODO lie un événement en double clic. Double-cliquez pour déclencher Edittodo (TODO). Edittodo affectera TODO à EDITSETTODO, puis déclenchera l'instruction TODOFOCUS dans le formulaire ci-dessous. À l'heure actuelle, l'entrée du formulaire peut être visible. Appuyez sur ESC pour déclencher le respect (TODO). Avant de revenir à l'édition, appuyez sur Entrée ou perdez la focalisation pour déclencher la farce de la faireddise (TODO) pour enregistrer le TODO modifié. La classe lie l'événement Click pour détruire le bouton, cliquez pour déclencher Removetodo (TODO) et supprimer le TODO.
Enfin, regardez le HTML affiché par Todos Statistics
La copie de code est la suivante:
<footer id = "footer" ng-show = "todos.length" ng-coak>
<span id = "todo-Count"> <strong> {{resoingCount}} </strong>
<ng-pleuralize Count = "resoindingCount" quand = "{One: 'Item Left', Autre: 'Items Left'}"> </ ng-pleuralize>
</span>
<ul id = "filtres">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "# /"> Tous </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/ active'}" href = "# / actif"> actif </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/ terminé'}" href = "# / terminé"> terminé </a>
</li>
</ul>
<Button id = "clear-complété" ng-Click = "clearCompletedTodos ()" ng-show = "terminédCount"> Clear terminée ({{complétedCount}}) </futton>
</fooder>
La balise NG-PLURIZATINE implémente l'élément d'affichage laissé lorsque le nombre de comptes de maintien est de 1, sinon les éléments d'affichage laissés.
La balise UL avec ID est des filtres est sélectionnée en fonction du contenu de Location.Path ().
ID ajoute un événement de clic au bouton Clear Completed, déclenchant ClearCompletedTodos (), en effacant tous les todos terminés.
Arrêtons-nous ici les notes d'aujourd'hui. Ce sont toutes des expériences personnelles. J'espère que vous pourrez les aimer.