He estado viendo angularjs por un tiempo recientemente, y lo resumiré en algún momento.
Dirección oficial del sitio web: http://angularjs.org/
Recomendar algunos tutoriales primero
1. El tutorial introductorio de AngularJS es relativamente básico y es una traducción del tutorial oficial.
2. Siete pasos de los novatos de AngularJS a los expertos también son relativamente básicos, y se creó un sitio web de reproducción de música en línea.
3. El tutorial de la Guía de Desarrollo AngularJS es bastante integral, pero creo que la traducción es un poco oscura y difícil de entender.
Después de leer estos tutoriales, sentí que Angularjs también sabía un poco, así que quería hacer algo con él, así que analicé el ToDomVC escrito por AngularJS.
Dirección del sitio web oficial de ToDomVC: http://todomvc.com/
El directorio del proyecto es el siguiente:
Hay dos carpetas en Bower_Components, entre las cuales la carpeta Angular se usa para ser las mismas que el archivo Angular.js. La carpeta ToDomVC-Common contiene el CSS/JS unificado de todos los proyectos de TODO (solo se utiliza para generar el contenido izquierdo y no tiene nada que ver con el proyecto) e imágenes.
La carpeta JS es un encabezado grande, y el controlador correspondiente (controlador)/Directiva (Instrucciones)/Servicio (servicio) y App.js se colocan dentro.
La carpeta de prueba contiene el código para la prueba y no analiza.
index.html es la página de vista del proyecto.
Echemos un vistazo a App.js
La copia del código es la siguiente:
/ *Global Angular */
/ *jshint sin usar: falso */
'Use estricto';
/**
* El principal módulo de aplicación ToDomVC
*
* @Type {angular.module}
*/
var toDomVC = angular.module ('toDomVc', []);
Define un módulo a Domvc
Eche un vistazo a ToDostorage.js bajo Servicios
La copia del código es la siguiente:
/ *Global ToDomVC */
'Use estricto';
/**
* Servicios que persiste y recupera TODOS de LocalStorage
*/
toDomVc.Factory ('toDostorage', function () {
// Identificador único de TODOS para el almacenamiento de cadenas JSON
var storage_id = 'Todos-AngularJS';
devolver {
// Elimina a las Todos de LocalStorage y analizándolo en un objeto JSON
get: functer () {
return json.parse (localstorage.getItem (storage_id) || '[]');
},
// Convierta el objeto TODOS en una cadena JSON y guárdelo en LocalStorage
Put: function (toDos) {
localStorage.SetItem (Storage_id, Json.Stringify (TODOS));
}
};
});
El método de servicio de ToDostorage se crea utilizando el método de fábrica. La esencia de este método de servicio es devolver y poner dos métodos. Ambos usan las características de JSON2 y HTML5. Obtenga el contenido de las TODO de LocalStorage y lo analiza en JSON, coloca los conversos de TODOS en JSON String y lo almacena en LocalStorage.
Echemos un vistazo a los dos archivos de comando a continuación.
todofocus.js
La copia del código es la siguiente:
/ *Global ToDomVC */
'Use estricto';
/**
* Directiva que coloca se centra en el elemento al que se aplica cuando la expresión se une a evaluarse a verdad
*/
toDomVc.Directive ('todofocus', función tOdofocus ($ timeOut) {
Función de retorno (alcance, elem, attrs) {
// Agregar escucha al valor de la propiedad TODOFOCUS
alcance. $ watch (attrs.todofocus, function (newval) {
if (newval) {
$ timeOut (function () {
Elem [0] .focus ();
}, 0, falso);
}
});
};
});
En la función de regreso de parámetros, Elem es una matriz de elementos que contienen la instrucción, y ATTRS es un objeto compuesto por todos los atributos, nombres de atributos, etc. del elemento.
Se utilizan dos métodos AngularJS
$ watch (watchExpression, oyente, objeto -Equivalidad) Registre una devolución de llamada del oyente. Cada vez que cambia WatchExpression, la devolución de llamada del oyente se ejecutará.
$ Tiempo de tiempo (FN [, demora] [, invokeApply]) Cuando se alcanza el valor del tiempo de espera, se ejecuta la función FN.
TODOFOCUS.JS crea la directiva TODOFOCUS. Cuando un elemento tiene una propiedad de TODOFOCUS, la Directiva agregará un oyente al valor de la propiedad del elemento. Si el valor de la propiedad TODOFOCUS se cambia a True, $ TimeOut (function () {elem [0] .focus ();}, 0, falso); El tiempo de retraso es de 0 segundos, por lo que elem [0] .focus () se ejecutará de inmediato.
todocape.js
La copia del código es la siguiente:
/ *Global ToDomVC */
'Use estricto';
/**
* Directiva que ejecuta una expresión cuando se aplica el elemento al que se aplica
* Un evento de llave de `Escape`.
*/
toDomVc.Directive ('TodoCape', function () {
var escape_key = 27;
Función de retorno (alcance, elem, attrs) {
elem.bind ('keydown', function (evento) {
if (event.keycode === Escape_key) {
alcance. $ Aplicar (attrs.todocape);
}
});
};
});
TodoScape.js crea la Directiva de ToDocape. Cuando se presiona la tecla de escape, se ejecuta la expresión de attrs.todoescape.
Eche un vistazo a Big Head, ToDoctrl.js en la carpeta de controladores. Este archivo es un poco más largo, así que acabo de escribir comentarios.
La copia del código es la siguiente:
/ *Global ToDomVC, Angular */
'Use estricto';
/**
* El controlador principal de la aplicación. El controlador:
* - Recupera y persiste el modelo a través del servicio de ToDostorage
* - Expone el modelo a la plantilla y proporciona controladores de eventos
*/
ToDomVc.Controller ('TODOCTRL', function TODocTRL ($ ACEPE, $ ubicación, toDostorage, filterFilter) {
// Obtén a Todos de LocalStorage
var todas = $ scope.todos = toDostorage.get ();
// Grabación nueva
$ scope.newtodo = '';
// Record editado a Do
$ scope.editedTodo = null;
// Ejecutar el método cuando cambia el valor de TODOS
$ alcance. $ watch ('Todos', function (NewValue, OldValue) {
// Obtener el número de Tdos inacabados
$ scope.remeiningCount = filtreFilter (TODOS, {completado: falso}). Longitud;
// Obtener el número de TODOS completados
$ scope.completedCount = Todos.length - $ scope.remeiningcount;
// $ Scope.allChecked es verdadero si y solo si $ scope.ReMeiningCount es 0
$ scope.allchecked =! $ scope.remeiningcount;
// Cuando el nuevo valor de TODOS y el valor anterior no sea igual, guarde las TODOS en LocalStorage
if (newValue! == OldValue) {// Esto evita las llamadas innecesarias al almacenamiento local
toDostorage.put (TODOS);
}
}, verdadero);
if ($ ubicación.path () === '') {
// si $ ubicación.path () está vacío, configurado en /
$ ubicación.path ('/');
}
$ scope.location = $ ubicación;
// Ejecutar el método cuando cambia el valor de ubicación.path ()
$ alcance. $ watch ('ubicación.path ()', function (ruta) {
// Obtener filtro de estado
// Si la ruta es '/activo', el filtro está {completado: falso}
// Si la ruta está '/completado', el filtro está {completado: true}
// de lo contrario, el filtro es nulo
$ scope.statusfilter = (ruta === '/activo')?
{completado: falso}: (ruta === '/completado')?
{completado: true}: null;
});
// Agrega un nuevo TODO
$ scope.addtodo = function () {
var newTodo = $ scope.newtodo.trim ();
if (! newTodo.length) {
devolver;
}
// Agregar un TODO a TODOS, la propiedad completa predeterminada a False
Todos.push ({
Título: Newtodo,
Completado: falso
});
// Vacío
$ scope.newtodo = '';
};
// editar un toDo
$ scope.edittodo = function (toDo) {
$ scope.editedTodo = tODO;
// Clonar el TODO original para restaurarlo a pedido.
// Guardar TODO antes de editar y prepararse para restaurar la edición
$ scope.originaltodo = angular.extend ({}, toDo);
};
// editar TODO para completar
$ scope.doneediting = function (toDo) {
// Vacío
$ scope.editedTodo = null;
tODO.TITLE = TODO.TITLE.TRIM ();
if (! toDo.title) {
// Si el título de TODO está vacío, retire el TODO
$ scope.removetodo (TODO);
}
};
// restaurar TODO antes de editar
$ scope.reverediting = function (toDo) {
TODOS [TODOS.INDEXOF (TODO)] = $ Scope.originalTodo;
$ scope.doneediting ($ scope.originaltodo);
};
// Eliminar TODO
$ scope.removetodo = function (toDo) {
Todos.splice (Todos.Indexof (TODO), 1);
};
// Borrar TODOS completados
$ Scope.ClearCompletedTodos = function () {
$ scope.todos = Todos = Todos.filter (function (val) {
Return! Val.completed;
});
};
// Marque todo el estado de TODO (Verdadero o Falso)
$ scope.markall = function (completado) {
Todos.ForEach (function (TODO) {
TODO.completed = completado;
});
};
});
Finalmente, echemos un vistazo a index.html, nuestro análisis de este archivo uno por uno.
La copia del código es la siguiente:
<! Doctype html>
<html lang = "en" ng-app = "toDomvc" data-framework = "AngularJS">
<Evista>
<meta charset = "utf-8">
<meta http-oquiv = "x-ua-compatible" content = "ie = bord">
<title> AngularJS • ToDomVC </title>
<Link rel = "Stylesheet" href = "Bower_components/toDomVC-Common/Base.css">
<syle> [ng-cloak] {display: none; } </style>
</ablo>
<Body>
<Sección id = "TODOAPP" NG-Controller = "TODOCTRL">
<Header ID = "Header">
<h1> TODOS </h1>
<Form ID = "TODO-FORM" NG-SUBMIT = "ADDTODO ()">
<input id = "new-todo" PlaceHolder = "¿Qué hay que hacer?" ng-model = "newtodo" Autofocus>
</form>
</Header>
<Sección id = "Main" ng-show = "toDos.length" ng-cloak>
<input id = "toggle-all" type = "checkbox" ng-model = "allChecked" ng-click = "markall (allChecked)">
<etiqueta for = "toggle-all"> marque todo como completo </etiqueta>
<ul id = "todo-list">
<li ng-repeat = "tODO en TODOS | Filtro: statusFilter Track by $ index" ng-class = "{completado: tODO.completed, editing: tODO == editedTodo}">
<div>
<input type = "checkbox" ng-model = "toDo.completed">
<Label ng-dblclick = "edittoDo (toDo)"> {{toDo.title}} </label>
<botón ng-click = "removeTodo (toDo)"> </boton>
</div>
<Form Ng-Submit = "DoneEditing (TODO)">
<input ng-trim = "false" ng-model = "toDo.title" toDo -cape = "Revertediting (tODO)" ng-b -blur = "DoneEditing (TODO)" TODO-FOCUS = "TODO == EditedTodo">>>
</form>
</li>
</ul>
</section>
<pie id = "pie" ng-show = "toDos.length" ng-cloak>
<span id = "toDo-Count"> <strong> {{restante -count}} </strong>
<ng-pluralize count = "restante" when = "{one: 'item Left', otros: 'items Left'}"> </ng-pluralize>
</span>
<ul id = "filtros">
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/'}" href = "#/"> all </a>
</li>
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/activo'}" href = "#/activo"> activo </a>
</li>
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/completado'}" href = "#/completado"> completado </a>
</li>
</ul>
<Botón id = "Clear-Completed" ng-click = "clearCompletedTodos ()" ng-show = "completado"> claro completado ({{completado}}) </botte>
</foTer>
</section>
<pie id = "info">
<p> Haga doble clic para editar un TODO </p>
<p> créditos:
<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> y
<a href = "http://igorminar.com"> Igor Minar </a>
</p>
<p> Parte de <a href = "http://todomvc.com"> toDomVC </a> </p>
</foTer>
<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/controlers/toDoctrl.js"> </script>
<script src = "js/services/toDostorage.js"> </script>
<script src = "js/directive/todofocus.js"> </script>
<script src = "js/directive/todocape.js"> </script>
</body>
</html>
En primer lugar, presentaremos el JS correspondiente en la parte inferior, por lo que no diré mucho sobre esto.
La copia del código es la siguiente:
<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/controlers/toDoctrl.js"> </script>
<script src = "js/services/toDostorage.js"> </script>
<script src = "js/directive/todofocus.js"> </script>
<script src = "js/directive/todocape.js"> </script>
Defina el estilo [NG-CLOAK], que contiene el atributo Ng-Cloak y no es visible.
La copia del código es la siguiente:
<syle> [ng-cloak] {display: none; } </style>
Veamos el HTML para agregar TODO. El modelo encuadernado es Newtodo. El método de enviar es addTodo () en toDoctrl.js. Se agregará un moto. Haga clic en ENTER, y el evento de envío se activará de forma predeterminada, que activará el método addTodo () y agregará un TODO a TODOS.
La copia del código es la siguiente:
<Form ID = "TODO-FORM" NG-SUBMIT = "ADDTODO ()">
<input id = "new-todo" PlaceHolder = "¿Qué hay que hacer?" ng-model = "newtodo" Autofocus>
</form>
Mira el HTML que muestra a Todos
La copia del código es la siguiente:
<Sección id = "Main" ng-show = "toDos.length" ng-cloak>
<input id = "toggle-all" type = "checkbox" ng-model = "allChecked" ng-click = "markall (allChecked)">
<etiqueta for = "toggle-all"> marque todo como completo </etiqueta>
<ul id = "todo-list">
<li ng-repeat = "tODO en TODOS | Filtro: statusFilter Track by $ index" ng-class = "{completado: tODO.completed, editing: tODO == editedTodo}">
<div>
<input type = "checkbox" ng-model = "toDo.completed">
<Label ng-dblclick = "edittoDo (toDo)"> {{toDo.title}} </label>
<botón ng-click = "removeTodo (toDo)"> </boton>
</div>
<Form Ng-Submit = "DoneEditing (TODO)">
<input ng-trim = "false" ng-model = "toDo.title" toDo -cape = "Revertediting (tODO)" ng-b -blur = "DoneEditing (TODO)" TODO-FOCUS = "TODO == EditedTodo">>>
</form>
</li>
</ul>
</section>
La sección utiliza el método NGShow para determinar si se muestra en función de la longitud de las TODOS. El atributo NG-CLOAK se agrega para evitar las páginas que los Angularjs no se procesan al principio. Puede eliminar la actualización y probarlo.
La casilla de verificación con ID está unida al modelo de checked, haga clic para activar Markall (AllChecked), pase el valor de AllChecked y marque todos los TODO.
Use el bucle ngrepeat para generar etiquetas LI, TODO en TODOS | Filtro: StatusFilter Track por $ índice, TODOS de bucle, filtro con StatusFilter y traza con $ índice. NgClass vincula dos clases, {completado: TODO.completed, Editing: TODO == EditedTodo}, si TODO.completed es verdadero, agregue la clase completa y si tODO == EditedTodo, agregue la clase de edición. La clase está vinculada a TODO. La etiqueta que se muestra en el título TODO vincula un evento de doble clic. Haga doble clic para activar EditTodo (TODO). Edittodo asignará TODO a EditedTodo, y luego activará la instrucción TODOFOCUS en el formulario a continuación. En este momento, la entrada en el formulario puede ser visible. Presione ESC para Trigger Revertititing (TODO). Antes de volver a editar, presione ENTER o PIER FOCUS para disparar a Wonediting (TODO) para guardar el TODO editado. La clase vincula el evento de clic para destruir el botón, haga clic para activar RemoVetOdo (TODO) y elimine el TODO.
Finalmente, mire el HTML que se muestra por las estadísticas de TODOS
La copia del código es la siguiente:
<pie id = "pie" ng-show = "toDos.length" ng-cloak>
<span id = "toDo-Count"> <strong> {{restante -count}} </strong>
<ng-pluralize count = "restante" when = "{one: 'item Left', otros: 'items Left'}"> </ng-pluralize>
</span>
<ul id = "filtros">
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/'}" href = "#/"> all </a>
</li>
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/activo'}" href = "#/activo"> activo </a>
</li>
<li>
<a ng-class = "{seleccionado: ubicación.path () == '/completado'}" href = "#/completado"> completado </a>
</li>
</ul>
<Botón id = "Clear-Completed" ng-click = "clearCompletedTodos ()" ng-show = "completado"> claro completado ({{completado}}) </botte>
</foTer>
La etiqueta NG-Pluralize implementa el elemento de visualización izquierdo cuando el número de cuentas restantes es 1, de lo contrario los elementos de visualización izquierdos.
La etiqueta UL con ID es filtros se selecciona de acuerdo con el contenido de la ubicación.path ().
ID agrega un evento de clic al botón Comparado Clear, activando ClearCompletedTodos (), bordeando todos los TODO completados.
Detengamos aquí las notas de hoy. Todos son experiencias personales. Espero que te puedan gustar.