Eu tenho assistido angularjs há um tempo recentemente e resumirei isso em algum momento.
Endereço oficial do site: http://angularjs.org/
Recomende alguns tutoriais primeiro
1. O tutorial introdutório do AngularJS é relativamente básico e é uma tradução do tutorial oficial.
2. Sete passos dos iniciantes do AngularJS a especialistas também são relativamente básicos, e um site de reprodução de música online foi criado.
3. O tutorial do Guia de Desenvolvimento do AngularJS é bastante abrangente, mas sinto que a tradução é um pouco obscura e difícil de entender.
Depois de ler esses tutoriais, senti que o AngularJS também sabia um pouco, então eu queria fazer algo com ele, então analisei o ToDomvc escrito por AngularJS.
TODOMVC Endereço oficial do site: http://todomvc.com/
O diretório do projeto é o seguinte:
Existem duas pastas em Bower_components, entre as quais a pasta angular é usada para ser a mesma do arquivo angular.js. A pasta ToDomvc-Common contém o CSS/JS unificado de todos os projetos TODO (apenas usado para gerar o conteúdo esquerdo e não tem nada a ver com o projeto) e imagens.
A pasta JS é um cabeçalho grande e o controlador (controlador)/diretiva correspondente (Instruções)/Serviço (Serviço) e App.js são colocados dentro.
A pasta de teste contém o código para teste e não analisa.
Index.html é a página de visualização do projeto.
Vamos dar uma olhada no App.js
A cópia do código é a seguinte:
/ *Global Angular */
/ *jshint não utilizado: false */
'Use rigoroso';
/**
* O principal módulo de aplicativo TODOMVC
*
* @Type {angular.module}
*/
var toDomvc = angular.module ('toDomvc', []);
Ele define um módulo toDomvc
Dê uma olhada no todostorage.js em serviços
A cópia do código é a seguinte:
/ *Global ToDomvc */
'Use rigoroso';
/**
* Serviços que persistem e recuperam Todos do LocalStorage
*/
ToDomvc.Factory ('TODOSTORAGEM', FUNCTION () {
// Todos Identificador exclusivo para armazenamento de cordas JSON
var storage_id = 'Todos-angularjs';
retornar {
// Retire Todos do LocalStorage e analisá -lo em um objeto JSON
get: function () {
retornar json.parse (localStorage.getItem (storage_id) || '[]');
},
// converte o objeto Todos em uma string json e armazenam -o em LocalStorage
Put: function (Todos) {
LocalStorage.SetItem (storage_id, json.stringify (Todos));
}
};
});
O método de serviço de TODOSTORAGEM é criado usando o método de fábrica. A essência deste método de serviço é retornar dois métodos obtidos e colocados. Ambos usam os recursos de JSON2 e HTML5. O Get pega o conteúdo de TODOs do LocalStorage e o analisa em JSON, coloque o TODOS converte em String JSON e o armazena no LocalStorage.
Vamos dar uma olhada nos dois arquivos de comando abaixo das diretivas.
TDOFOFOCUS.JS
A cópia do código é a seguinte:
/ *Global ToDomvc */
'Use rigoroso';
/**
* Diretiva que os lugares se concentram no elemento a que é aplicado quando a expressão que se liga para avaliar a verdadeira
*/
ToDomvc.Directive ('TODOFOCUS', FUNCIONAR TODOFOCUS ($ Timeout) {
Função de retorno (escopo, elem, attrs) {
// Adicione a audição do valor da propriedade TODOFOCUS
escopo. $ watch (atts.todofe focus, function (newval) {
if (newval) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
}
});
};
});
Na função de retorno dos parâmetros, o Elem é uma matriz de elementos que contêm a instrução, e Atts é um objeto composto por todos os atributos, nomes de atributos etc. do elemento.
Dois métodos angularJs são usados
$ Watch (WatchExpression, ouvinte, ObjectEquality) Registre um retorno de chamada do ouvinte. Sempre que a expressão do relógio mudar, o retorno de chamada do ouvinte será executado.
$ timeout (fn [, atraso] [, InvokeApply]) Quando o valor do tempo limite é atingido, a função FN é executada.
TODOFOCUS.JS cria a diretiva TODoFocus. Quando um elemento possui uma propriedade TodOFocus, a diretiva adicionará um ouvinte ao valor da propriedade TodOFocus do elemento. Se o valor da propriedade toDoFocus for alterado para true, $ timeout (function () {elem [0] .focus ();}, 0, false); O tempo de atraso é de 0 segundos, então elem [0] .focus () será executado imediatamente.
TODESCAPE.JS
A cópia do código é a seguinte:
/ *Global ToDomvc */
'Use rigoroso';
/**
* Diretiva que executa uma expressão quando o elemento para o qual é aplicado recebe
* Um evento `Escape` KeyDown.
*/
toDomvc.directive ('TODEScape', function () {
var Escape_Key = 27;
Função de retorno (escopo, elem, attrs) {
elem.bind ('keydown', function (event) {
if (event.keycode === Escape_key) {
escopo. $ Aplicar (attrs.todoScape);
}
});
};
});
TODESCAPE.JS cria a diretiva TODESCAPE. Quando a tecla Escape é pressionada, a expressão de atts.todoescape é executada.
Dê uma olhada na cabeça grande, Todoctrl.js na pasta Controllers. Esse arquivo é um pouco mais longo, então eu apenas escrevi comentários.
A cópia do código é a seguinte:
/ *Global ToDomvc, Angular */
'Use rigoroso';
/**
* O controlador principal do aplicativo. O controlador:
* - Recupera e persiste o modelo através do Serviço de ToDostorsory
* - expõe o modelo ao modelo e fornece manipuladores de eventos
*/
toDomvc.Controller ('Todoctrl', function Todoctrl ($ SCOPE, $ LOCALIZADO, TODOSTORAGEM, FILTERFILTER) {
// pegue Todos do localStorage
var Todos = $ scope.todos = Todostorage.get ();
// grava o novo TODO
$ scope.newtodo = '';
// registro editado TODO
$ scope.editedtodo = null;
// executa o método quando o valor das alterações de Todos
$ scope. $ watch ('Todos', função (newValue, OldValue) {
// Obtenha o número de Todos inacabados
$ scope.remainingCount = filterFilter (Todos, {concluído: false}). Length;
// Obtenha o número de Todos concluídos
$ scope.completedCount = Todos.length - $ scope.remainingCount;
// $ SCOPE.LALCHECKED é verdadeiro se e somente se $ SCOPE.REMENDINGCOUNT for 0
$ scope.AllChecked =! $ Scope.RegainingCount;
// Quando o novo valor de Todos e o valor antigo não são iguais, armazene Todos no localStorage
if (newValue! == OldValue) {// isso impede chamadas desnecessárias para o armazenamento local
Todostorage.put (Todos);
}
}, verdadeiro);
if ($ local.path () === '') {
// se $ location.path () estiver vazio, definido como /
$ local.Path ('/');
}
$ scope.Location = $ Location;
// executa o método quando o valor de localização.Path () muda
$ scope. $ watch ('location.path ()', function (path) {
// Obtenha filtro de estado
// Se o caminho for '/ativo', o filtro é {concluído: false}
// Se o caminho for '/concluído', o filtro é {concluído: true}
// caso contrário, o filtro é nulo
$ scope.statusFilter = (Path === '/Active')?
{Concluído: false}: (Path === '/concluído')?
{concluído: true}: null;
});
// Adicione um novo TODO
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
retornar;
}
// Adicione um TODO a Todos, a propriedade preenchida padrão para falsa
Todos.push ({
Título: Newtodo,
Concluído: Falso
});
// Vazio
$ scope.newtodo = '';
};
// edite um TODO
$ scope.edittodo = função (TODO) {
$ scope.editedTodo = TODO;
// Clone o TODO original para restaurá -lo sob demanda.
// Salvar TODO antes de editar e se preparar para restaurar a edição
$ scope.originaltodo = angular.extend ({}, TODO);
};
// edite TODO para concluir
$ scope.doneediting = function (TODO) {
// Vazio
$ scope.editedtodo = null;
TODO.TITLE = TODO.Title.Trim ();
if (! TODO.TITLE) {
// Se o título de TODO estiver vazio, remova o TODO
$ scope.removetodo (TODO);
}
};
// restaurar TODO antes de editar
$ scope.Revertediting = function (TODO) {
Todos [Todos.indexOF (TODO)] = $ scope.originaltodo;
$ scope.doneediting ($ scope.originaltodo);
};
// Remova o TODO
$ scope.removetodo = function (TODO) {
Todos.splice (Todos.indexOF (TODO), 1);
};
// Clear Todos concluído
$ scope.clearCompletedTodos = function () {
$ scope.todos = Todos = Todos.Filter (function (val) {
retornar! val.completed;
});
};
// Marque todo o status de TODO (verdadeiro ou falso)
$ scope.markall = função (concluída) {
Todos.ForEach (função (TODO) {
TODO.COMPLETED = Concluído;
});
};
});
Por fim, vamos dar uma olhada no index.html, nossa análise deste arquivo um por um.
A cópia do código é a seguinte:
<! doctype html>
<html lang = "en" ng-app = "toDomvc" data-framework = "angularjs">
<head>
<meta charset = "utf-8">
<meta http-equiv = "x-ua compatível com" content = "ie = borda">
<title> angularJS • TODOMVC </ititle>
<link rel = "Stylesheet" href = "bower_components/toDomvc-common/base.css">
<Style> [ng-cloak] {display: Nenhum; } </style>
</head>
<Body>
<seção id = "TODOAPP" NG-CONTROLLER = "TODOCTRL">
<ID do cabeçalho = "cabeçalho">
<H1> Todos </h1>
<form id = "TODO-forma" ng-submit = "addToDo ()">
<input id = "New-Todo" Parholder = "O que precisa ser feito?" ng-model = "newtodo" foco automático>
</morm>
</header>
<seção id = "main" ng-show = "Todos.length" ng-cloak>
<input id = "Toggle-all" type = "Caixa de seleção" ng-model = "Allchecked" ng-click = "Markall (Allchecked)">
<Label para = "Toggle-all"> Marque tudo como completo </belt>
<ul id = "TODO-list">
<li ng-repeat = "TODO em Todos | Filtro: StatusFilter Track por $ index" ng-Class = "{Concluído: TODO.COMPLETED, Edição: TODO == EditedTodo}">
<div>
<input type = "Caixa de seleção" ng-model = "TODO.COMPLETED">
<etiqueta ng-dblClick = "Edittodo (TODO)"> {{TODO.TITLE}} </LABELE>
<botão ng-click = "removetodo (TODO)"> </butut>
</div>
<form ng-submit = "donediting (TODO)">
<input ng-trim = "false" ng-model = "TODO.Title" TODO-ESCAPE = "revertendo (TODO)" ng-bluur = "Donedediting (TODO)" TODO-FOCUST = "TODO == EDITEDTODO">
</morm>
</li>
</ul>
</seção>
<Footer id = "rodapé" ng-show = "Todos.length" ng-cloak>
<span id = "TODO-Count"> <strong> {{restanteCount}} </strong>
<ng-pluralize count = "restantecount" quando = "{um: 'item deixado', outros: 'itens deixados'}"> </ng-pluralize>
</span>
<ul id = "filtros">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "#/"> all </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/Active'}" href = "#/ativo"> ativo </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/completed'}" href = "#/concluído"> concluído </a>
</li>
</ul>
<button id = "limpo" ng-click = "clearCompletedTodos ()" ng-show = "completEdCount"> limpo concluído ({{completCount}}) </butão>
</rodapé>
</seção>
<rodapé id = "info">
<p> Clique duas vezes para editar um 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> e
<a href = "http://igorminar.com"> igor minar </a>
</p>
<p> parte de <a href = "http://todomvc.com"> toDomvc </a> </p>
</rodapé>
<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/diretives/toDoFocus.js"> </script>
<script src = "js/diretives/todoescape.js"> </script>
</body>
</html>
Primeiro de tudo, apresentaremos o JS correspondente na parte inferior, para que eu não diga muito sobre isso.
A cópia do código é a seguinte:
<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/diretives/toDoFocus.js"> </script>
<script src = "js/diretives/todoescape.js"> </script>
Definir estilo [ng-cloak], que contém o atributo ng-cloak e não é visível.
A cópia do código é a seguinte:
<Style> [ng-cloak] {display: Nenhum; } </style>
Vejamos o HTML para adicionar TODO. O modelo vinculado é Newtodo. O método de envio é addToDo () em Todoctrl.js. Um TODO será adicionado. Clique em Enter e o evento de envio será acionado por padrão, que acionará o método addToDo () e adicionará um TODO ao Todos.
A cópia do código é a seguinte:
<form id = "TODO-forma" ng-submit = "addToDo ()">
<input id = "New-Todo" Parholder = "O que precisa ser feito?" ng-model = "newtodo" foco automático>
</morm>
Veja o HTML mostrando Todos
A cópia do código é a seguinte:
<seção id = "main" ng-show = "Todos.length" ng-cloak>
<input id = "Toggle-all" type = "Caixa de seleção" ng-model = "Allchecked" ng-click = "Markall (Allchecked)">
<Label para = "Toggle-all"> Marque tudo como completo </belt>
<ul id = "TODO-list">
<li ng-repeat = "TODO em Todos | Filtro: StatusFilter Track por $ index" ng-Class = "{Concluído: TODO.COMPLETED, Edição: TODO == EditedTodo}">
<div>
<input type = "Caixa de seleção" ng-model = "TODO.COMPLETED">
<etiqueta ng-dblClick = "Edittodo (TODO)"> {{TODO.TITLE}} </LABELE>
<botão ng-click = "removetodo (TODO)"> </butut>
</div>
<form ng-submit = "donediting (TODO)">
<input ng-trim = "false" ng-model = "TODO.Title" TODO-ESCAPE = "revertendo (TODO)" ng-bluur = "Donedediting (TODO)" TODO-FOCUST = "TODO == EDITEDTODO">
</morm>
</li>
</ul>
</seção>
A seção usa o método NGSHOW para determinar se é exibido com base no comprimento de Todos. O atributo NG-Cloak é adicionado para impedir as páginas que o AngularJS não é processado no início. Você pode remover a atualização e experimentá -lo.
A caixa de seleção com ID é alternada-tudo está ligada ao modelo Allached, clique para acionar Markall (Allached), passe o valor de Allached e marque todos os TODOS.
Use o loop nGREPEAT para gerar tags Li, TODO em Todos | Filtro: StatusFilter Track by $ index, loop Todos, filtro com statusfilter e rastreamento com $ index. O ngclass liga duas classes, {concluído: TODO.COMPLETED, Edição: TODO == EditedToDO}, se TODO.completed for verdadeiro, adicione a classe concluída e, se TODO == EditedTodo, adicione a classe de edição. A classe está vinculada a TODO.Compledada para a caixa de seleção de Toggle. A etiqueta exibida no título TODO vincula um evento de clique duas vezes. Clique duas vezes para acionar Edittodo (TODO). A Edittodo atribuirá TODO ao EditedToDo e acionará a instrução TDOFOFOCURA no formulário abaixo. Neste momento, a entrada no formulário pode ser visível. Pressione ESC para acionar revertindo (TODO). Antes de reverter para a edição, pressione Enter ou perca o foco para desencadear (TODO) para salvar o TODO editado. A classe liga o evento de clique para destruir o botão, clique para acionar o removetodo (TODO) e exclua o TODO.
Finalmente, veja o HTML exibido por ToDos Statistics
A cópia do código é a seguinte:
<Footer id = "rodapé" ng-show = "Todos.length" ng-cloak>
<span id = "TODO-Count"> <strong> {{restanteCount}} </strong>
<ng-pluralize count = "restantecount" quando = "{um: 'item deixado', outros: 'itens deixados'}"> </ng-pluralize>
</span>
<ul id = "filtros">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "#/"> all </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/Active'}" href = "#/ativo"> ativo </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/completed'}" href = "#/concluído"> concluído </a>
</li>
</ul>
<button id = "limpo" ng-click = "clearCompletedTodos ()" ng-show = "completEdCount"> limpo concluído ({{completCount}}) </butão>
</rodapé>
A tag ng-pluralizada implementa o item de exibição deixado quando o número de países restantes é 1, caso contrário, os itens de exibição restantes.
A tag UL com o ID IS Filters é selecionada de acordo com o conteúdo do local.Path ().
O ID adiciona um evento de clique no botão preenchido, acionando o clearCompleTedTodos (), limpando todos os Todos concluídos.
Vamos parar por aqui as anotações de hoje. São todas experiências pessoais. Espero que você possa gostar deles.