Я недавно смотрел AngularJS, и я кратко изложу это.
Официальный адрес веб -сайта: http://angularjs.org/
Порекомендуйте сначала несколько учебных пособий
1. AngularJs Вводной учебник является относительно простым и является переводом официального учебника.
2. Семь шагов от новичков Angularjs до экспертов также относительно просты, и был создан веб -сайт воспроизведения онлайн -воспроизведения.
3. Учебное пособие по разработке AngularJS довольно полное, но я чувствую, что перевод немного неясен и трудно понять.
Прочитав эти учебники, я почувствовал, что Angularjs также немного знал, поэтому я хотел что -то с этим сделать, поэтому я проанализировал ToDomvc, написанный AngularJS.
TOMODVC Официальный адрес веб -сайта: http://todomvc.com/
Справочник проекта выглядит следующим образом:
В Bower_components есть две папки, среди которых угловая папка используется, чтобы быть такими же, как файл Angular.js. Папка ToDomvc-Common содержит унифицированный CSS/JS всех проектов TODO (просто используется для создания левого контента и не имеет ничего общего с проектом) и картинками.
Папка JS является большим заголовком, а соответствующий контроллер (контроллер)/директива (инструкции)/служба (служба) и App.js помещаются внутри.
Тестовая папка содержит код для тестирования и не анализируется.
index.html - это страница просмотра проекта.
Посмотрим на app.js
Кода -копия выглядит следующим образом:
/ *Global Angular */
/ *jshint неиспользован: ложь */
«Использовать строго»;
/**
* Основной модуль приложения для основного приложения
*
* @type {angular.module}
*/
var toDomvc = angular.module ('toDomvc', []);
Он определяет модуль для
Взгляните на ToDostorage.js под услугами
Кода -копия выглядит следующим образом:
/ *Global ToDomvc */
«Использовать строго»;
/**
* Услуги, которые сохраняются и извлекают Тодоса из LocalStorage
*/
to adomvc.factory ('todostorage', function () {
// TODOS уникальный идентификатор для хранения струн JSON
var storage_id = 'todos-angularjs';
возвращаться {
// Уберите Тодоса из LocalStorage и разрабатывайте его в объект JSON
get: function () {
return json.parse (localstorage.getitem (storage_id) || '[]');
},
// конвертировать объект Todos в строку JSON и хранить его в LocalStorage
положить: function (todos) {
localstorage.setitem (storage_id, json.stringify (todos));
}
};
});
Метод службы ToDostorage создается с использованием заводского метода. Суть этого метода обслуживания состоит в том, чтобы вернуть и поместить два метода. Оба используют функции JSON2 и HTML5. GET берет содержание Todos из LocalStorage и анализирует его в JSON, вставьте конверты Todos в строку JSON и хранит его в LocalStorage.
Давайте посмотрим на указания двух командных файлов ниже.
todofocus.js
Кода -копия выглядит следующим образом:
/ *Global ToDomvc */
«Использовать строго»;
/**
* Директива, которая сосредотачивается на элементе, к которому он применяется, когда выражение, которое он связывается, для оценки к истину
*/
toDomvc.directive ('todofocus', функция todofocus ($ timeout) {
Возвращающаяся функция (Scope, Elem, ATRS) {
// Добавить прослушивание значения свойства Todofocus
Scope. $ WATCH (attrs.todofocus, function (newval) {
if (newval) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
}
});
};
});
В функции возврата параметра Elem представляет собой массив элементов, содержащих инструкцию, а ATRS является объектом, состоящим из всех атрибутов, имен атрибутов и т. Д. Элемента.
Используются два метода AngularJS
$ WATCH (WatchExpression, Слушатель, ОБЕСПЕЧЕНИЕ) Зарегистрируйте обратный вызов слушателя. Всякий раз, когда меняется WatchExpression, будет выполнен обратный вызов слушателя.
$ timeout (fn [, задержка] [, InvokeApply]) Когда достигается значение тайм -аута, функция FN выполняется.
todofocus.js создает директиву Todofocus. Когда элемент имеет свойство Todofocus, директива добавит слушателя к значению свойства Todofocus элемента. Если значение свойства Todofocus изменяется на True, $ timeout (function () {elem [0] .focus ();}, 0, false); Время задержки составляет 0 секунд, поэтому elem [0] .focus () будет выполнено немедленно.
todoscape.js
Кода -копия выглядит следующим образом:
/ *Global ToDomvc */
«Использовать строго»;
/**
* Директива, которая выполняет выражение, когда элемент, к которому он применяется
* Событие `Escape` Keydown.
*/
toDomvc.directive ('todoescape', function () {
var Escape_key = 27;
Возвращающаяся функция (Scope, Elem, ATRS) {
elem.bind ('keydown', function (event) {
if (event.keycode === ascain_key) {
Scope. $ применить (attrs.todoscape);
}
});
};
});
todoscape.js создает директиву Todoescape. Когда клавиша побега нажимается, выражение attrs.todoscape выполняется.
Взгляните на большую голову, toDoctrl.js в папке контроллеров. Этот файл немного длиннее, поэтому я только что написал комментарии.
Кода -копия выглядит следующим образом:
/ *Global ToDomvc, Angular */
«Использовать строго»;
/**
* Основной контроллер для приложения. Контроллер:
* - Получает и сохраняет модель через службу Todostorage
* - Разоблачает модель на шаблон и предоставлена обработчиками событий
*/
toDomvc.controller ('todoctrl', функция todoctrl ($ scope, $ location, todostorage, filterfilter) {
// получить тодо из LocalStorage
var todos = $ scope.todos = todostorage.get ();
// записывать новый тодо
$ scope.newtodo = '';
// Отредактирована Todo
$ scope.editedtodo = null;
// выполнить метод, когда изменение значения TODOS
$ scope. $ watch ('todos', function (newvalue, oldvalue) {
// Получить количество незаконченных Todos
$ scope.remingCount = filterFilter (todos, {завершен: false}). Length;
// Получить количество завершенных Todos
$ scope.completedcount = todos.length - $ scope.remingCount;
// $ scope.allcecked - это правда, если и только тогда, когда $ scope.remainingCount - 0
$ scope.allchecked =! $ scope.remingCount;
// Когда новое значение Todos и старое значение не равны, храните Todos в LocalStorage
if (newvalue! == OldValue) {// Это предотвращает ненужные вызовы в локальное хранилище
todostorage.put (todos);
}
}, истинный);
if ($ location.path () === '') {
// Если $ location.path () пуст, установите на /
$ location.path ('/');
}
$ scope.location = $ location;
// выполнить метод, когда изменение значения местоположения. ()
$ scope. $ watch ('location.path ()', function (path) {
// Получить государственный фильтр
// Если путь - «/Актив», фильтр {завершен: false}
// Если путь - «/завершен», фильтр {завершен: true}
// в противном случае фильтр нулевой
$ scope.statusfilter = (path === '/active')?
{завершен: false}: (path === '/offty')?
{завершен: true}: null;
});
// Добавить новый тодо
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
возвращаться;
}
// Добавить Todo в Todos, завершенное свойство по умолчанию
todos.push ({
Название: Newtodo,
завершено: ложь
});
// Пустой
$ scope.newtodo = '';
};
// редактировать тодо
$ scope.edittodo = function (todo) {
$ scope.editedtodo = todo;
// клонировать оригинальный тодо, чтобы восстановить его по требованию.
// Сохранить TODO перед редактированием и подготовки к восстановлению редактирования
$ scope.originaltodo = angular.extend ({}, todo);
};
// редактировать Todo, чтобы завершить
$ scope.doneediting = function (todo) {
// Пустой
$ scope.editedtodo = null;
todo.title = todo.title.trim ();
if (! todo.title) {
// Если заголовок TODO пуст, удалите TODO
$ scope.removetodo (todo);
}
};
// восстановить Todo перед редактированием
$ scope.RevertEnting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originaltodo;
$ scope.doneediting ($ scope.originaltodo);
};
// Удалить тодо
$ scope.removetodo = function (todo) {
todos.splice (todos.indexof (todo), 1);
};
// Очистить завершены Todos
$ scope.clearcompletedtodos = function () {
$ scope.todos = todos = todos.filter (function (val) {
вернуть! Val.completed;
});
};
// Отметьте все статус Todo (true или false)
$ scope.markall = function (завершено) {
todos.foreach (function (todo) {
todo.completed = завершено;
});
};
});
Наконец, давайте посмотрим на index.html, наш анализ этого файла один за другим.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "en" ng-app = "toDomvc" data-framework = "angularjs">
<голова>
<meta charset = "utf-8">
<meta http-equiv = "x-ua-совместимый" content = "ie = edge">
<title> angularjs • toDomvc </title>
<link rel = "styleSheet" href = "bower_components/toDomvc-common/base.css">
<style> [ng-cloak] {display: none; } </style>
</head>
<тело>
<section id = "todoapp" ng-controller = "todoctrl">
<заголовок идентификатор = "заголовок">
<h1> todos </h1>
<form id = "todo-form" ng-submit = "addtodo ()">
<input id = "new-todo" Placeholder = "Что нужно сделать?" ng-model = "Newtodo" AutoFocus>
</form>
</header>
<section id = "main" ng-show = "todos.length" ng-cloak>
<input id = "toggle-all" type = "fackbox" ng-model = "allchecked" ng-click = "markall (allchecked)">
<метка для = "Toggle-All"> отметьте все как полное </label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos | Filter: STATUSFILTER DRACK от $ index" ng-class = "{withled: todo.completed, редактирование: todo == editedTodo}">
<div>
<input type = "fackbox" ng-model = "todo.completed">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<кнопка ng-click = "removetodo (todo)"> </button>
</div>
<form ng-submit = "Doditing (todo)">
<input ng-trim = "false" ng-model = "todo.title" todo-escape = "возвращение (todo)" ng-blur = "doditing (todo)" todo-focus = "todo == editedTodo">
</form>
</li>
</ul>
</section>
<нижний колонтитул идентификатор = "нижний колонтитул" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{restingCount}} </strong>
<ng-pluralize count = "resingCount" jo = "{One: 'Item Left', другие: 'оставленные'}"> </ng-pluralize>
</span>
<ul id = "Фильтры">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "#/"> All </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/завершено'}" href = "#/завершено"> завершено </a>
</li>
</ul>
<button id = "clear-completred" ng-click = "clearCompletedTodos ()" ng-show = "reflectCount"> clear offty ({{reflectCount}}) </button>
</cooler>
</section>
<идентификатор нижнего колонтитула = "info">
<p> Дважды щелкните, чтобы редактировать Todo </p>
<p> Кредиты:
<a href = "http://twitter.com/cburgdorf"> Christoph Burgdorf </a>,
<a href = "http://ericbidelman.com"> Эрик Бидельман </a>,
<a href = "http://jacobmummmum.com"> Джейкоб Мамм </a> и
<a href = "http://igorminar.com"> Igor Minar </a>
</p>
<p> Часть <a href = "http://todomvc.com"> toDomvc </a> </p>
</cooler>
<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"> </script>
<script src = "JS/Directives/todoescape.js"> </script>
</body>
</html>
Прежде всего, мы представим соответствующий JS внизу, поэтому я мало что скажу об этом.
Кода -копия выглядит следующим образом:
<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"> </script>
<script src = "JS/Directives/todoescape.js"> </script>
Определите стиль [ng-cloak], который содержит атрибут NG-Cloak и не виден.
Кода -копия выглядит следующим образом:
<style> [ng-cloak] {display: none; } </style>
Давайте посмотрим на HTML, чтобы добавить Todo. Связанная модель - Newtodo. Метод отправки - addtodo () в todoctrl.js. Тодо будет добавлен. Нажмите Enter, и событие отправки будет запускается по умолчанию, что запустит метод addTodo () и добавит TODO TODOS.
Кода -копия выглядит следующим образом:
<form id = "todo-form" ng-submit = "addtodo ()">
<input id = "new-todo" Placeholder = "Что нужно сделать?" ng-model = "Newtodo" AutoFocus>
</form>
Посмотрите на HTML -показ Todos
Кода -копия выглядит следующим образом:
<section id = "main" ng-show = "todos.length" ng-cloak>
<input id = "toggle-all" type = "fackbox" ng-model = "allchecked" ng-click = "markall (allchecked)">
<метка для = "Toggle-All"> отметьте все как полное </label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos | Filter: STATUSFILTER DRACK от $ index" ng-class = "{withled: todo.completed, редактирование: todo == editedTodo}">
<div>
<input type = "fackbox" ng-model = "todo.completed">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<кнопка ng-click = "removetodo (todo)"> </button>
</div>
<form ng-submit = "Doditing (todo)">
<input ng-trim = "false" ng-model = "todo.title" todo-escape = "возвращение (todo)" ng-blur = "doditing (todo)" todo-focus = "todo == editedTodo">
</form>
</li>
</ul>
</section>
В разделе используется метод NGSHOW, чтобы определить, отображается ли он на основе длины TODOS. Атрибут NG-Cloak добавляется для предотвращения страниц, которые AngularJS не обрабатываются в начале. Вы можете удалить обновление и попробовать его.
Флажок с идентификатором переключается на все, что связано с моделью AllChecked, нажмите, чтобы запустить Markall (AllChecked), пройти значение AllChecked и отметьте все Todos.
Используйте цикл Ngrepeat, чтобы генерировать теги LI, Todo в Todos | Фильтр: отслеживание StatusFilter от $ index, цикл Todos, фильтр с StatusFilter и Trace с $ Index. Ngclass связывает два класса, {завершено: todo.completed, редактирование: todo == editedTodo}, если todo.completed является истинной, добавьте завершенный класс, и если todo == reditedTodo, добавьте класс редактирования. Класс связан с todo.com, наполненным флажом Toggle. Метка, отображаемая в заголовке TODO, связывает событие дважды щелкнуть. Дважды щелкните, чтобы запустить Edittodo (Todo). Edittodo назначит Todo отредактировано, а затем запустит инструкцию Todofocus в форме ниже. В настоящее время вход в форме может быть виден. Нажмите ESC, чтобы запустить возвращение (TODO). Прежде чем вернуться к редактированию, нажмите Enter или потеряйте фокус, чтобы запустить сделанное (TODO), чтобы сохранить отредактированный TODO. Класс связывает кнопку события Click, чтобы уничтожить, нажмите, чтобы запустить Removetodo (TODO) и удалить TODO.
Наконец, посмотрите на HTML, отображаемая статистикой Todos
Кода -копия выглядит следующим образом:
<нижний колонтитул идентификатор = "нижний колонтитул" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{restingCount}} </strong>
<ng-pluralize count = "resingCount" jo = "{One: 'Item Left', другие: 'оставленные'}"> </ng-pluralize>
</span>
<ul id = "Фильтры">
<li>
<a ng-class = "{selected: location.path () == '/'}" href = "#/"> All </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{selected: location.path () == '/завершено'}" href = "#/завершено"> завершено </a>
</li>
</ul>
<button id = "clear-completred" ng-click = "clearCompletedTodos ()" ng-show = "reflectCount"> clear offty ({{reflectCount}}) </button>
</cooler>
Тег NG-Pluralize реализует элемент отображения, оставленный, когда количество оставшихся категорий составляет 1, в противном случае оставшиеся элементы отображения.
Тег UL с идентификатором является фильтров, выбирается в соответствии с содержанием Location.Path ().
ID добавляет событие Click в кнопку с прозрачной завершением, запуская ClearCompletedTodos (), очищая все завершенные Todos.
Давайте остановимся здесь сегодняшние заметки. Они все личные впечатления. Надеюсь, они вам понравятся.