new

Символ	Код	Описание
		Неразрывный пробел
	&ensp;	Пробел шириной буквы n
	&emsp;	Широкий пробел шириной буквы m
–	– –	Тире
—	— —	Широкое тире
&	& &	Амперсант
×	× ×	Умножить
÷	÷ ÷	Делить
<	< <	Меньше
>	> >	Больше
−	− −	Минус
≡	&equiv; ≡	Тождественно
☰	☰	Триграмма
✓	✓	Галочка
✔	✔	Галочка
🗸	🗸	Галочка
✖	✖	Крест
✗	✗	Крест
✘	✘	Крест
▲	▲	Треугольник вверх
▼	▼	Треугольник вниз
►	►	Треугольник вправо
◄	◄	Треугольник влево
…	… …	Многоточие
✉	✉	Письмо
↺	↺	Разворот
↻	↻	Разворот
₴	₴	Гривна
☎	☎	Телефон
☏	☏	Телефон
✆	✆	Телефон
✎	✎	Карандаш
✒	✒	Перо
☁	☁	Облако
∧	&and; ∧	and
∨	&or; ∨	or

script type="text/javascript" src="...jquery-версия.js" /script Подключить

jQuery - ($ - синоним) единый об содержащий все ф-ии и методы
(function($){javascript-код})(jQuery) - применяют для избежания конфликта с именем $ других модулей
$(селект,[контекст]) - создание jQuery-обертки хранящий массив из ссылок выбранных об_эл
$("строка тэга",[об_аттриб]) - создание одного нового jQuery-элемента [с установкой аттрибутов, стилей, обработчиков]
Методы обертки возвращают обертку (для продолжения применять методы)
- eq(N) - получить обертку для одного N-го эл
- first() - получить обертку для одного 1-го эл
- last() - получить обертку для одного последнего эл
- add("селектор CSS"/"<эл> [контент] ",[об_эл/"селектор"/$(запрос)]) - получить из текущей обертки новую обертку добавлением других/новых эл
- not(["селектор CSS"/об_эл/массив_эл/ф-я]) - получить обертку удаляя эл удовлетворяющих условиям (ф-я(){this-эл return true-удален})
- filter(["селектор CSS"/об_эл/массив_эл/ф-я]) - получить обертку отбирая эл удовлетворяющих условиям (ф-я(){this-эл return true-включен})
- slice(N-нач,[N-конца]) - получить обертку отбирая эл по индексам от N-нач до конца/(N-конца - 1)
- has(["селектор CSS"/об_эл]) - получить обертку отбирая эл содержащие потомков удовлетворяющих условиям
- children(["селектор CSS"]) - получить обертку из доченних эл которые соотв селектору
- closest(["селектор CSS"]) - получить обертку из эл имеющие единого предка соотв селектору
- contents() - получить обертку из содержимого эл - аналог innerHTML
- next(["селектор CSS"]) - получить обертку из эл - следующего брата текущего набора эл, соотв селектору
- nextAll(["селектор CSS"]) - получить обертку из эл - всех следующих братьев текущего набора эл, соотв селектору
- nextUntil(["селектор CSS"]) - получить обертку из эл - всех следующих братьев текущего набора эл пока не соотв селектору
- prev(["селектор CSS"]) - получить обертку из эл - предыдущего брата текущего набора эл, соотв селектору
- prevAll(["селектор CSS"]) - получить обертку из эл - всех предыдущих братьев текущего набора эл, соотв селектору
- prevUntil(["селектор CSS"]) - получить обертку из эл - всех предыдущих братьев текущего набора эл пока не соотв селектору
- siblings(["селектор CSS"]) - получить обертку из эл - всех предыдущих и следующих братьев текущего набора эл соотв селектору
- offsetParent() - получить обертку из одного корневого родителя 1-го эл
- parent(["селектор CSS"]) - получить обертку из всех родителей текущего набора эл
- parents(["селектор CSS"]) - получить обертку из всех родителей текущего набора эл и все иерархии родителей кроме корневого
- parentsUntil(["селектор CSS"]) - получить обертку из всех родителей текущего набора эл и все иерархии родителей кроме корневого пока не соотв селектору
- find(["селектор CSS"]) - получить обертку из всех выбранных по селектору эл-потомков из текущего набора эл
- end() - откат к предыдущей обертке (до выполнения метода фильтрации)
Методы обертки возвращают не обертку
- [N] - получение N-го по счету об_эл полученной обертки
- .length - количество выбранных об_эл в обертке
- get([N]) - получить один_N-й об_эл/простой_массив_всех об_эл (-N - позиция от конца)
- toArray() - получить простой массив всех эл (аналог get() )
- index(об_эл/селектор) - получить индекс эл в обертке в виде числа
- is(["селектор CSS"]) - получить true если хоть один эл обертки соотв селектору
- map(ф-я) - получить обертку, где в массиве вместо элементов вставляются значения ф-ии (this-эл ф-я(N,об_эл) возвращает любое значение или null-не включается), получить простой массив - .get()
- each(ф-я) - обход всех эл обертки для выполнения ф-ии (this-эл ф-я(N,об_эл) )
- data(нов_имя_св,["знач"]) - сохранение/получение нового св-ва эл-та(эл-т играет роль хранилища д-х любого типа), когда д-х нет - undefined
- removeData(нов_имя_св) - удаление д-х из эл
- attr("атрибут",["значен"/ф-я]) - получить/установить атрибута эл - аналог [get/set]Attribute() ф-я (this-эл ф-я(N_эл,знач_аттр){return нов_знач} )
- attr(об_спис_аттриб) - об_спис_аттриб {имя_аттр1:"знач1",имя_аттр2:"знач2",...,событ1:ф-я1,...}
- removeAttr("атрибут") - удалить атрибут эл, но св-во эл остается
- prop("свойство",[true/false/ф-я]) - получить/установить свойство эл checked, disabled, или selected ф-я (this-эл ф-я(N_эл,знач_свой){return нов_знач} )
- prop(об_спис_свойств) - об_спис_свойства {имя_св1:"знач1",имя_св2:"знач2",...}
- removeProp("свойство") - удалить свойство эл, но св-во эл остается
- addClass("имя_кл"/"спис_кл"/ф-я) - добавление эл дополнительный один/нескольно классов/по ф-ии (this-эл ф-я(N,знач_кл){return дополнзнач_кл} )
- removeClass("имя_кл"/"спис_кл"/ф-я) - удаление у эл один/нескольно классов/по ф-ии (this-эл ф-я(N,знач_кл){return удал_знач_кл} )
- toggleClass("имя_кл"/"спис_кл"/ф-я,[логич-true/false]) - удаление(при присутствии)/добавление(при отсутствии) у эл один/нескольно классов/по ф-ии (this-эл ф-я(N,знач_кл){return удал_знач_кл} ) [может быть логически указано выполнение: true-добавление false-удаление]
- hasClass("имя_кл") - true/false проверка наличия хотябы у одного эл набора обертки класса имя_кл
- css("параметрCSS"[,"значение"/ф-я]) - вычислить/установить строку стиля эл (this-эл ф-я(N,знач){return нов_знач} )
- css(об_парам_CSS) - установить стиль эл с помощью об {парамCSS1:"знач1",парамCSS2:"знач2",...}
- width([N-знач/"знач_размерн"/ф-я]) - получить(вычислить в px для первого)/установить значение ширины в пикс/по размерности(px/em/%) /по ф-ии
- height([N-знач/"знач_размерн"/ф-я]) - получить(вычислить в px для первого)/установить значение высоты в пикс/по размерности(px/em/%) /по ф-ии
- innerHeight() - получить(вычислить в px) значение высоты для первого (от рамки до рамки) в пикс
- innerWidth() - получить(вычислить в px) значение ширины для первого (от рамки до рамки) в пикс
- outerHeight(true/false(ум)) - получить(вычислить в px) значение высоты включая рамку (true - включая margin) для первого в пикс
- outerWidth(true/false(ум)) - получить(вычислить в px) значение ширины включая рамку (true - включая margin) для первого в пикс
- offset([об_коорд/ф-я]) - получить для первого эл об {top:знач_верх,left:знач_лев} с вычиленными значениями в пикс относительно всего документа (this-эл ф-я(N,об_коорд_стар){return об_коорд_нов} )
- position() - получить для первого эл об {top:знач_верх,left:знач_лев} с вычиленными значениями в пикс относительно родительского эл
- scrollLeft([N-знач]) - получить(вычислить в px для первого)/установить(для всех) значение прокрутки эл по горизонтали
- scrollTop([N-знач]) - получить(вычислить в px для первого)/установить(для всех) значение прокрутки эл по вертикали
- val(["значение"/ф-я]) - получить для первого /установить для всех эл обертки значение атрибута value (для эл формы) (this-эл ф-я(N,знач){return нов_знач} )
- val(масс_знач) - отметить все эл обертки (радио,флажки,меню) когда их атрибут value равен одному из значений массива (для эл формы)
Методы изменяют контент элементов
- html(["строка"/ф-я]) - получить(для первого)/установить всем HTML-текст контента эл (аналог - innerHTML) (ф-я(N,HTML-знач){this-эл return нов_знач} )
- text(["строка"/ф-я]) - получить единую строку всех текстовых контентов/установить текст всем эл (при установке аналог - innerHTML) (ф-я(N,HTML-знач){this-эл return нов_знач} )
- append("HTML-строка"/об_эл/$(запрос)/ф-я) - добавление ко всем эл обертки (перенос) дочерний эл (или набор через запятую) после всех имеющихся дочерних, новый/удаляется из источника (ф-я(N,"HTML-строка-эл"){this-эл return "добав_знач"} )
- prepend("HTML-строка"/об_эл/$(запрос)/ф-я) - добавление ко всем эл обертки (перенос) дочерний эл перед всеми имеющихся дочерних, новый/удаляется из источника (ф-я(N,"HTML-знач"){this-эл return "нов_знач"} )
- before("HTML-строка"/об_эл/$(запрос)/ф-я) - добавление ко всем эл обертки (перенос) как соседа перед эл, новый/удаляется из источника (ф-я(){this-эл return "нов_знач"} )
- after("HTML-строка"/об_эл/$(запрос)/ф-я) - добавление ко всем эл обертки (перенос) как соседа после эл, новый/удаляется из источника (ф-я(){this-эл return "нов_знач"} )
- appendTo("селектор"/об_эл) - перенести (скопировать если селект)) все текущие эл обертки как дочение к указаному об_эл/всем_по_селектору в конец имеющихся дочерних
- prependTo("селектор"/об_эл) - перенести (скопировать если селект)) все текущие эл обертки как дочение к указаному об_эл/всем_по_селектору перед имеющимися дочерними
- insertBefore("селектор"/об_эл) - перенести (скопировать если селект) все текущие эл обертки как братья перед указаным(и) об_эл/всем_по_селектору
- insertAfter("селектор"/об_эл) - перенести (скопировать если селект)) все текущие эл обертки как братья после указаного(ых) об_эл/всем_по_селектору
- wrap("тэг/тэг"/об_эл) - выполняет обертывание кажого эл в копию указаного эл (добавление дополнительного родителя)
- wrapAll("тэг/тэг"/об_эл) - получить один эл обертки содержащий как дочерние все эл текущей обертки и родителль указаного эл (обертка в один родитель)
- wrapInner("тэг/тэг"/об_эл) - выполняет обертывание кажого содержимого эл в копию указаного эл (замена родителя для содержимого )
- unwrap([селектор]) - замена эл обертки из содержимым (удаление обертывания)
- remove([селектор]) - получение открепленных от документа всех/по селектору эл обертки
- detach([селектор]) - получение открепленных от документа всех/по селектору эл обертки сохраняя д-е и события
- empty() - получение обертки с удалеными у эл всех дочерних
- clone([true/false(ум)],[true/false(ум)]) - получение обертки с копиями всех эл с потомками, 1true - копировать и обработчики событий, 2true - копировать и обработчики событий дочерних элементов
- replaceWith("HTML-строка"/об_эл/ф-я) - замена у обертки всех выбранных эл на указанный эл (копии если в обертке их много) (ф-я(){this-эл return "нов_знач"} ) возвращает обертку из замещенных эл
- replaceAll("селектор") - замена эл из селектора значениями всех эл обертки (копии если в обертке их много), возвращает те же эл но вставленные, замещенные удаляются
Обработчики событий
- on("тип_событ"/"спис_событ_через_пробел",[селектор][д-е (для св-ва data:)],ф-я) - установка слушателя одноразового события) ф-я(об_событ_jQuery.Event){код this-эл} [об_событ имеет св-во data:"д-е"]
- bind("тип_событ"/"спис_событ_через_пробел",[д-е (для св-ва data:)],ф-я/false) - установка слушателя события (без перехвата) ф-я(об_событ_jQuery.Event,[арг1,арг2,..]){код this-эл} [об_событ имеет св-во data:"д-е"] об_событ_jQuery - для перехода к JavaScript-событию =об_событ_jQuery.orginalEvent, арг1,арг2,..дополнительные аргументы искусственного события, false-отменяет действие по ум
- bind({"тип_событ1":ф-я1,"тип_событ2":ф-я2,...}) - установка слушателей событий (без перехвата) ф-я(об_событ_jQuery.Event){код this-эл} "тип_событ" - может иметь пространство имен в виде суффикса: "тип_событ.имя_событ"
- unbind("тип_событ"/об_событ_jQuery.Event,[ф-я]) - удалить слушателя [только одну указанную ф-ю (не анонимную)], можно применять пространство имен, без аргументов - удаляет всех слушателей эл
- blur/focus/keyup/mousemove/resize/change/focusin(для форм)/load/mouseout/scroll/click/focusout(для форм)/mousedown/ mouseover/select/dblclick/keydown/mouseenter/mouseup/submit/error/keypress/mouseleave/ready/unload(ф-я)/hover - установка ф-ии для события в сокращенной ф-ии
- this.blur,focusin,mousedown,resize,change,focusout,mouseenter,scroll,click,keydown,mouseleave,select,dblclick,keypress,mousemove,submit, error,keyup,mouseout,unload,focus,load,mouseover() - выполнение обработчика, установленные по умолчанию
- live("тип_событ",[д-е (для св-ва data:)],ф-я) - (устаревший метод) сохнанение слушателя события для селектора обертки ф-я(об_событ_Event){код this-эл}
- die("тип_событ",[ф-я]) - (устаревший метод) удалить слушателя live [только одну ф-ю]
- trigger("тип_событ",[д-е (для св-ва data:)]) - выполнение ф-ии слушателя - искусственное событие
- triggerHandler("тип_событ",[д-е (для св-ва data:)]) - выполнение ф-ии слушателя без распространения вверх иерархии и выполненияф-ии по умолчанию - искусственное событие
- hover(ф-я_вх,ф-я_вых)/(ф-я) - установка обработчиков наведения (mouseenter) и выведения (mouseleave) мышки, событ вложенных эл игнорируются
- delegate(селект_дочер,"тип_событ",[д-е (для св-ва data:)],ф-я) - слушатель установлен в дочерний эл найденый по селектору
- undelegate(селект_дочер,"тип_событ"/об_событ_jQuery.Event,[ф-я]) - удалить слушателя [только одну указанную ф-ю (не анонимную)], можно применять пространство имен, без аргументов - удаляет всех слушателей эл
- off("тип_событ"/об_событ_jQuery.Event,селект_дочер,[ф-я]) - удалить слушателя [только одну указанную ф-ю (не анонимную)], можно применять пространство имен, без аргументов - удаляет всех слушателей эл
- Объект события jQuery.Event - похож на об Event но платформо независимый
  - altKey, ctrlKey,metaKey,shiftKey - true при нажатии клавиши
  - originalEvent - переход к событию JavaScript
  - currentTarget - текущий эл обработки
  - delegateTarget - эл обработки
  - target - эл происходящего события
  - data - значение передаваемое в bind()
  - screen[X/Y] - координата курсора относительно экрана
  - page[X/Y] - координата курсора относительно элемента
  - offset[X/Y] - координата курсора относительно страницы
  - relatedTarget - эл границу которого пересек курсор
  - result - последнее значение обработчика
  - timeStamp - значение сист часов в мс
  - type - строка типа события
  - which - код клавиши (для клавы), код кнопки мыши 1-лев,2-ср,3-пр (для мыши)
  - keycode - не однозначен
  - view - ссылка на об window
  - preventDefault() - отмена действий по ум
  - isDefaultPrevented() - true при вызове preventDefault()
  - stopPropagation() - отмена всплытия события (кроме дополнит обр)
  - isPropagationStopped() - true при вызове stopPropagation()
  - stopImmediatePropagation() - отмена всплытия события и дополнит обр
  - isImmediatePropagationStopped() - true при вызове stopImmediatePropagation()
Анимация и эффекты, методы выполняются асинхронно, а анимация выполняется в очереди анимации (по ум - fx)
- hide() - мгновенно скрыть эл (услановка св-ва style.display="none")
- hide(N/"slow/normal/fast",[ф-я]) - скрыть размером и прозр эл за N мс/фиксир_время, в конце выполняется style.display="none" [после выполн. ф-я]
- show() - мгновенно отобразить эл (style.display="block/inline")
- show(N/"slow/normal/fast",[ф-я]) - отобразить размером и прозр эл за N мс/фиксир_время, в начале выполняется style.display="block/inline" [после выполн. ф-я]
- toggle() - установка видимости/скрытности, мгновенно сменяются по очереди
- toggle(N/"slow/normal/fast",[ф-я]) - установка видимости, сменяются за N мс/фиксир_время по очереди [после выполн. ф-я]
- toggle(true/false) - установка видимости: true-оторазить, false-скрыть
- fadeIn(N/"slow/normal(ум)/fast",[ф-я]) - отобразить прозрачностью эл за N мс/фиксир_время, в начале выполняется style.display="block/inline" [после выполн. ф-я]
- fadeOut(N/"slow/normal(ум)/fast",[ф-я]) - скрыть прозрачностью эл за N мс/фиксир_время, в конце выполняется style.display="none" [после выполн. ф-я]
- fadeTo(N/"slow/normal(ум)/fast",(0.-1.),[ф-я]) - изменить прозрачность эл за N мс/фиксир_время, на указаное [после выполн. ф-я]
- slideDown(N/"slow/normal/fast",[ф-я]) - отобразить верт размером эл за N мс/фиксир_время, в начале выполняется style.display="block/inline" [после выполн. ф-я]
- slideUp(N/"slow/normal/fast",[ф-я]) - скрыть верт размером эл за N мс/фиксир_время, в конце выполняется style.display="none" [после выполн. ф-я]
- slideToggle(N/"slow/normal/fast",[ф-я]) - скрыть/отобразить верт размером эл за N мс/фиксир_время с изменением style.display [после выполн. ф-я]
- stop(true(все)/false,true(заверш)/false) - остановка true1-все/текущий эффект, true2-завершить начатый текущий эффект
- $.fx.off=true - отмена всех эффектов - теперь выполняются мгновенно
- animate({парам1:знач1,парам2:знач2,...},[N/"slow/normal(ум)/fast"],[фикс_функ_эфф],[ф-я]) - анимация изменения набора параметров CSS в очереди fx (знач: N, +=N, -=N) (для opacity возможно: hide,show,toggle) ф-я могут пускать новый эффект
- animate({парам1:знач1,парам2:знач2,...},{длительн,фикс_функ_эфф,ф-я_конца,true-очередь fx/false-параллел,ф-я_этапа}) - анимация изменения набора параметров CSS в очереди fx
  - linear - линейный
  - swing - колебательный
- queue("имя_очереди"/"fx"(ум),ф-я/масс_ф-ий) - добавить ф-ю в очередь ф-ий/замена всех ф-ий очереди "имя_очереди" и подключить ко всем эл (ф-я(){this-эл код} )
- queue("имя_очереди"/"fx"(ум)) - получить масс ф-ий из очереди "имя_очереди" подключенных к 1-му эл
- dequeue("имя_очереди"/"fx"(ум)) - выполнение 1-й ф-ии из очереди "имя_очереди" удаляя ее из очереди
- clearQueue("имя_очереди"/fn(ум)) - очистка всей очереди "имя_очереди" без выполнения ф-ий
- delay(N/"slow/fast",["имя_очереди"/fn(ум)]) - установка задержки N мс/фиксир_время при выполнении ф-ий очереди "имя_очереди"
Статические св-ва и ф-ии
- .support - об для проверки особенностей браузера
  - boxModel - true при блочной модели (у IE - false)
  - cssFloat - true при использовании св-ва cssFloat (у IE - false)
  - hrefNormalized - true при обращении к href возвращает значение указаное в HTML(у IE - false)
  - htmlSerialize - true при учитывании таблиц CSS как св-во innerHTML эл (у IE - false)
  - leadingWhitespace - true при сохранении ведущих пробелов после записи в innerHTML (у IE - false)
  - noCloneEvent - true при копировании эл обработчики не копируются (у IE - false)
  - objectAll - true при getElementsByTagName("*") возвращает все вложенные эл (у IE - false)
  - opacity - true при корректном св-ве opacity (у IE - false)
  - scriptEval - true при возможности выполнять script созданных appendChild() или createTextNode() (у IE - false)
  - style - true при возможности получить встроенные стили через атрибут style (у IE - false)
  - tbody - true при отсутствии автоматического добавления эл tbody во время записи в innerHTML (у IE - false)
- .noConflict([true]) - возвращает объект jQuery-библиотеки, отменяет псевдонима - $, использовать - jQuery, при true - отмена и jQuery
- .trim("строка") - получение строки с отсеченными пробелами
- .each(масс/об, ф-я) - выполнение ф-ии для всех эл масс/об в цикле (this-знач_эл ф-я(N/имя_св,знач_эл){код} ), возвр об-конт
- .grep(масс,ф-я,[true/false(ум)]) - выборка эл массива по ф-ии: false(ум) - при ф-ии()==true, true - при ф-ии()==false
- .map(масс, ф-я) - получить массив из значений ф-ии от всех знач эл (this-знач_эл ф-я(знач_эл,N) значен null - не влючается
- .inArray(знач,масс) - поиск: получить позицию эл массива знасение которого совпало с указаным, если нет -1
- .makeArray(об_масс) - получить массив из эл об похожего на массив (у которого цифровые св-ва)
- .unique(масс) - получить массив из уникальных эл масс
- .merge(масс1,масс2) - получить масс1 с добавленными эл масс2 (могут повторяться)
- extend([true/false(ум)],об_результ, об_источ1,об_источ2,...) - получить об(2-й арг) с копированием св-в из источников, true-полное/false-поверхн
- .param(масс_эл/$(оберт_эл)/{об},[true-стар/false(ум)]) - получить строку запроса с преобразованием символов из эл форм или об ("имя_эл_name"="знач_value")/("имя_св"="знач_св")
- .isArray(арг) - true если арг - простой массив
- .isEmptyObject(арг) - true если арг - об без собственных св-в (только в прототипе)
- .isFunction(арг) - true если арг - ф-я
- .isPlainObject(арг) - true если арг - об создан как {...} или new Object(...)
- .isXMLDoc(об_эл) - true если об_эл - эл/документ XML
- .noop() - ф-я-пустышка типа function(){} (исп для пустой подставки в методах)
- .contains(эл_родит,эл_потом) - true если эл_потом является потомком для эл_родит
- .data(эл,имя_св,["значен"]) - установить/получить эл значения нового св-ва как хранилища
- .removeData(эл,имя_св) - удалить у эл св-во как хранилища
- .proxy(ф-я,об,[аргум1,аргум2,...]) - получить ф-ю получающую указанный об как контекст, функция выполняется как метод об
- .proxy(об,"имя_ф",[аргум1,аргум2,...]) - получить ф-ю получающую указанный об как контекст, функция выполняется как метод об
- .parseJSON("строка-JSON") - анализ строки на соответствие формату JSON и возврат результат ее вычисления, алог JSON.parse()
- .globalEval("строка-JSON") - выполнение в глобальном контексте (eval()-выполняется в текущем)
Запросы на сервер и получение ответов
- $(...).load("url-имя_ф-ла",["д-е_запрос"/об{св1:зн1,св2:зн2,...}/масс_об],[ф-я]) - отправка запроса GET/POST(при отправке данных) и загрузка html-строки/файла во все эл обертки методом .html() "url-имя_ф-ла" может содержать: "закодир_запрос"," селектор"(выборка из полученных д-х), ф-я после загрузки ф-я("ответ",переменная_статуса(обычно-"success"),об-XMLHttpRequest){код, this-эл}
- $(...).serialize() - получить готовую строку запроса из всех эл-форм обертки (применяют как д-е для load() )
- $(...).serializeArray() - получить массив об-ов из всех эл-форм обертки об{имя_эл1:знач_эл1,имя_эл2:знач_эл2,...} (применяют как д-е для load() )
- $.get("url-имя_ф-ла",["отправ_д-е_запрос"/об{св1:зн1,св2:зн2,...}/масс_об],[ф-я_успех],["html/text/xml/json/script/jsonp"]) - отправка запроса GET и получение ответа - об-XMLHttpReque ф-я после загрузки ф-я("ответ",перем_статус(обычно-"success"),об-XMLHttpRequest){код, this-эл}, тип текста ответа - для ф-ии, $.get возвращает об_jqXHR имеющий обработчики .done(), .fail(об_jqXHR,об_уст_ajax,текст_ошибки) и .then(), или их устаревшие копии.success(), .error() и .complete()
- $.post("url-имя_ф-ла",["д-е_запрос"/об{св1:зн1,св2:зн2,...}/масс_об],[ф-я],[html/text/xml/json/script/jsonp]) - отправка запроса POST и получение ответа - об-XMLHttpReque ф-я после загрузки ф-я("ответ",статус(обычно-"success"),об-XMLHttpRequest){код, this-эл}, тип текста ответа - для ф-ии
- $.getScript("url-имя_ф-ла",[ф-я]) - запрос GET "url-имя_ф-ла" загружает и выполняет ф-л сценария, возврат об XMLHttpRequest [ф-я выполн после загрузки (ф-я(текст_скрипта,success){код})]
- $.getJSON("url-имя_ф-ла",["д-е_запрос"/об{св1:зн1,св2:зн2,...}/масс_об],[ф-я]) - отправка запроса GET и получение JSON-данных, ответа - об-XMLHttpReque JSON - тип текста ответа - для ф-ии, ф-я после загрузки ф-я("ответ",перем_статус(обычно-"success"),об-XMLHttpRequest){код, this-эл},
- $.ajax(об_запроса) - отправка запроса и получение ответа - об-XMLHttpReque
- $.ajaxSetup(об_запроса) - предварительная установка значений по умолчанию для $.ajax()
- Глобальные события Ajax - методы загружающие обработчики
  - ajaxSend(ф-я(об_соб,об-XMLHttpRequest,об_настр_ajax)) - перед отправкой на сервер, применяется для document
  - ajaxStart(ф-я) - при запуске запроса, применяется для document
  - ajaxSuccess(ф-я(об_соб,об-XMLHttpRequest,об_настр_ajax)) - при получении успешного ответа от сервера, применяется для document
  - ajaxError(ф-я(об_соб,об-XMLHttpRequest,об_настр_ajax,текст_ошибки)) - при получении ответа от сервера с ошибкой, применяется для document
  - ajaxStop(ф-я) - после всех этапов запроса, применяется для document
  - ajaxComplete(ф-я(об_соб,об-XMLHttpRequest,об_настр_ajax)) - при получении любого ответа от сервера, применяется для document

jQueryUI - дополнительный модуль к jQuery расширяющий возможности:эффекты, виджеты, перетаскивание

script type="text/javascript" src="...jquery-ui-версия-тема.js" /script Подключить

effect(тип_эффекта,об_парам,[N/"slow/normal(ум)/fast"],[ф-я]) - анимация изменения параметров CSS в очереди fx
- тип_эффекта
  - blind - появление/исчезновение шторкой (парам - direction и mode)
  - bounce - изменение положения в направлении (парам - direction,distance,mode,times)
  - clip - захлопывание/распахивание (парам - direction,mode)
  - drop - смещение/появление за пределы документа (direction,distance,mode)
  - explode - разбиение/сборка эл на мелкие фрагменты (mode,pieces)
  - fade - появление/исчезновение прозрачностью (mode)
  - fold - захлопывание/распахивание пар сторон (horizFirst,mode,size)
  - highlight - короткое изменением фона/исчезновением (color,mode)
  - puff - появление/исчезновение увеличением и прозрачностью (mode,percent)
  - pulsate - пульсация прозрачностью (mode,times)
  - scale - изменение размеров в % (direction,fade,from,mode,origin,percent,scale)
  - shake - дрожание (direction,distance,duration,mode,times)
  - size - изменение размеров до величины (from,to,origin,scale,restore)
  - slide - заезжание/выезжание на страницу (direction,distance,mode)
  - transfer - перемещение контура эл в контур другого (className,to - место)
- об_парам {парам1:знач1,парам2:знач2,...}(знач: N, +=N, -=N)(для opacity возможно: hide,show,toggle)
  - direction: horizontal/vertical(ум)/both, up/down/left/right - направление
  - mode: show/hide/toggle/effect - появление/исчезновение/фиксир_ф-я
  - distance: N - кол-во пикселей
  - times: N - кол-во раз
  - pieces: N - кол-во фрагментов
  - easing: ф-я - фиксированая ф-я перехода
  - horizFirst: true/false(ум) - первая горизонталь/нет
  - size: N - размер
  - color:цвет -
  - percent: N - кол-во процентов
  - fade: true/false(ум) - при изменении размеров изменяется прозрачность
  - from/to: {N-height, N-width} - об начальные размеры
  - className: имя_класса - имя перемещаемого контура (при отсутствии - ui-effects-transfer)
  - to: "селектор" - место куда перемещается эл
  - origin: [top/middle(ум)/bottom , left/center(ум)/еght] - массив точки исчезновения
  - scale: box/content/both(ум) - цель применения эффекта рамка/контент
  - duration: N - длительность мс
  - restore: true/false(ум) - восстановление значений после эффекта
- ф-я - при завершении эффекта, могут последовательно запускать новый эффект
animate() - расширенные возможности базовой jQuery, кроме CSS:backgroundColor,border[Bottom/Left/Right/Top]Color,color,outlineColor
show(тип_эффекта,об_парам,[N/"slow/normal(ум)/fast"],[ф-я]) - появление эл
hide(тип_эффекта,об_парам,[N/"slow/normal(ум)/fast"],[ф-я]) - скрытие эл
toggle(тип_эффекта,об_парам,[N/"slow/normal(ум)/fast"],[ф-я]) - появление/скрытие эл
addClass("имя_кл",[N/"slow/normal(ум)/fast"],[ф-я_переход],[ф-я]) - добавление класса изменяет CSS с эффектом
removeClass("имя_кл",[N/"slow/normal(ум)/fast"],[ф-я_переход],[ф-я]) - удаление класса изменяет CSS с эффектом
toggleClass("имя_кл",[true/false],[N/"slow/normal(ум)/fast"],[ф-я_переход],[ф-я]) - добавление/удаление класса изменяет CSS с эффектом (принудительное добавление/удаление)
switchClass("имя_кл_доб","имя_кл_удал",[N/"slow/normal(ум)/fast"],[ф-я_переход],[ф-я]) - добавление и удаление классов изменяет CSS с эффектом
- linear -
- aseInOutQuart -
- easeOutCirc -
- swing -
- easeInQuint -
- easeInOutCirc -
- jswing -
- easeOutQuint -
- easeInElastic -
- easeInQuad -
- easeInOutQuint -
- easeOutElastic -
- easeOutQuad -
- easeInSine -
- easeInOutElastic -
- easeInOutQuad -
- easeOutSine -
- easeInBack -
- easeInCubic -
- easeInOutSine -
- easeOutBack -
- easeOutCubic -
- easeInExpo -
- easeInOutBack -
- easeInOutCubic -
- easeOutExpo -
- easeInBounce -
- easeInQuart -
- easeInOutExpo -
- easeOutBounce -
- easeOutQuart -
- easeInCirc -
- easeInOutBounce -
position(об_коорд) -
- my: "гориз вертик" - координаты тек.эл для позиционирования: top,left,bottom,right,center
- at: "гориз вертик" - координаты другого эл для приравнивания: top,left,bottom,right,center
- of: селектор/об-Event - отбор эл для установки/собатие с координатами мыши
- offset: "N-лево N-право" - установка смещения от другого эл
- collision: flip/fit/none - установка правила при выходе за пределы другого эл (переход к противоположному/коррекция в пределах)
- using: ф-я - ручное изменение координат эл ф-я(об{N-лев,N-прав}){код}
draggable(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить способность перетягивания/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- об_парам
  - addClasses: true/false - разрешить/запретить создание класса ui-draggable
  - appendTo: эл/селектор - указалие эл куда будет перетянут эл (ум - родитель)
  - axis: "N-гориз N-вертик" - ограничение движения по осям X,Y (ум - не ограничено)
  - cancel: селектор - указание эл временно не участвующие в данном перетаскивании (ум - ":input,option")
  - connectToSortable: селектор - указание эл содержащий список (добавляют пар-р helper: "clone")
  - containment: "об_эл"/селектор/масс[x1,y1,x2,y2] - ограничение движения в пределах эл / области указаных координат массива
  - cursor: "курсор" - установка указанного стандатного курсора при перетаскивании (ум - "auto")
  - cursorAt: об_коорд - установка пределы координат курсора для захвата {left/right : N-гориз, top/bottom : N-вертик}
  - delay: N - задержка в мс для начала перетаскивания (ум - 0)
  - distance: N - кол-во пкс для начала перетаскивания (ум - 1)
  - drag: ф-я - обработчик события drag
  - grid: [N-гориз N-вертик] - массив установки сетки фиксированых позиций (ум - не ограничено)
  - handle: об_эл/селектор - указание дочернего к текущему эл, при наведении происходит захват
  - helper: "original/clone"/ф-я - определение текущего/копии/по ф-ии эл используемый при перетаскивании
  - ifarmeFix: true/селектор - указание всех/по селектору эл для iframe> запрещает перетаскивание (событие mousemove)
  - opacity: 0.-1. - установка прозрачности об во время перетаскивания (ум - прозр не изм)
  - refreshPositions: true - при необходимости перерасчета позиции
  - revert: true/"invalid"/"valid"/false - эл возвращается на старое место всегда/не на указанном месте/на указаном месте/не возвращается
  - revertDuration: N - мс длительность времени возврата на исходное место (ум - 500)
  - scope: "связь" - устаноска свсязи между эл перетаскивания и приемником
  - scroll: true/false - разрешить/запретить автоматическую прокрутку при перетаскивании
  - scrollSensitivity: N - px расстояние от курсора до границы для начала авто-прокрутки (ум - 20)
  - scrollSpeed: N - скорость авто-прокрутки (ум-20)
  - snap: true/селектор - установка всех/по селектору эл возможности прилипать к границам
  - snapMode: "outer/inner/both(ум)" - разрешение прилипать к внешней/внутренней/к обеим мсороне границы
  - snapTolerance: N - px расстояние притягивания при прилипании (ум - 20)
  - stack: об{z-index:знач, min:знач} - установка значений CSS на время перетаскивания
  - start: ф-я - обработчик события dragstart
  - stop: ф-я - обработчик события dragstop
  - zIndex: N - значение парам CSS - z-index на время перетаскивания
- События при перетаскивании
  - dragstart - ф-я при начале перетаскивания
  - drag - ф-я в процессе перетаскивания (mousemove)
  - dragstop - ф-я при окончании перетаскивания
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - helper: $(эл) - обертка перетаскиваемого эл
    - position: об{top:N, left:N} - позиция эл относительно родителя (при dragstart - неизвестно)
    - offset: об{top:N, left:N} - позиция эл относительно документа (при dragstart - неизвестно)
droppable(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить способность принимать/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- об_парам
  - accept: селектор/ф-я - дополнительный отбор из обертки по селектору/ф-я(об_эл){return true/false} true-отбирает
  - activate: ф-я - обработчик события в начале перетаскивания (dropactivate)
  - activeClass: имя_класса - добавление класса на время перетаскивания в начале
  - addClasses: true/false - - разрешить/запретить создание класса ui-droppable
  - deactivate: ф-я - обработчик события в конце перетаскивания (dropdeactivate)
  - drop: ф-я - обработчик события во время перетаскивания (drop)
  - greedy: true - запрещает распространение события к вложенным эл
  - hoverClass: имя_класс - добавление класса в момент нависания эл над приемником
  - out: ф-я - обработчик события (dropout) эл перетягивается мимо текущего и выходит за его пределы в соответствии с tolerance
  - over: ф-я - обработчик события (dropover) в момент готовнгости в соответствии с tolerance
  - scope: "связь" - устаноска свсязи между эл перетаскивания и приемником
  - tolerance: fit/pointer/touch/intersect(ум) - готовность принять в момент: дад приемником весь эл/курсор/эл прикасается/половина эл
- События при перетаскивании
  - dropactivate - ф-я при начале перетаскивания
  - dropdeactivate - ф-я при окончании перетаскивания
  - dropover - ф-я при готовности приемника принять эл
  - dropout - ф-я при готовом приемнике эл выходит за пределы
  - drop - - ф-я при окончании перетаскивания и эл над приемником
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - helper: $(эл) - обертка вспомогательного перетаскиваемого эл
    - draggable: $(эл) - обертка перетаскиваемого эл
    - position: об{top:N, left:N} - позиция эл относительно родителя (при dragstart - неизвестно)
    - offset: об{top:N, left:N} - позиция эл относительно документа (при dragstart - неизвестно)
sortable(["disable/enable/destroy/cancel/refresh/refreshPositions/serialize/toArray"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить способность сортировать/отмена операции/обновление эл/обновление кэш эл/строка для запроса/ массив id/установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- об_парам
  - activate: ф-я - обработчик события (sortactivate)
  - appendTo: эл/селектор - указалие эл куда будет перетянут эл (ум - родитель)
  - axis:"N-гориз N-вертик" - ограничение движения по осям X,Y (ум - не ограничено)
  - beforeStop: ф-я - обработчик события (sortbeforeStop)
  - cancel: селектор - указание эл временно не участвующие в данном перетаскивании (ум - ":input,option")
  - change: ф-я - обработчик события (sortchange)
  - connectWith: селектор - связь с принмником куда переносятся эл
  - containment: "об_эл"/селектор/масс[x1,y1,x2,y2] - ограничение движения в пределах эл / области указаных координат массива
  - cursor: "курсор" - установка указанного стандатного курсора при перетаскивании (ум - "auto")
  - cursorAt: об_коорд - установка пределы координат курсора для захвата {left/right : N-гориз, top/bottom : N-вертик}
  - deactivate: ф-я - обработчик события (sortdeactivate)
  - delay: N - задержка в мс для начала перетаскивания (ум - 0)
  - distance: N - кол-во пкс для начала перетаскивания (ум - 1)
  - dropOnEmpty: true(ум)/false - перемещение в приемник только если он пустой
  - forceHelperSize: true/false(ум) - каждый эл имеет определенный размер
  - forcePlaceholderSize: true/false(ум) - место для перемещения эл имеет определенный размер
  - grid: [N-гориз N-вертик] - массив установки сетки фиксированых позиций (ум - не ограничено)
  - handle: об_эл/селектор - указание дочернего к текущему эл, при наведении происходит захват
  - helper: "original/clone"/ф-я - определение текущего/копии/по ф-ии эл используемый при перетаскивании
  - items: селектор - отбор эл для упорядочения (ум - "Т> *")
  - opacity: 0.-1. - установка прозрачности об во время перетаскивания (ум - прозр не изм)
  - out: ф-я - обработчик события (sortout)
  - over: ф-я - обработчик события (sortover)
  - placeholder: имя_клас - имя класса которое присваивается месту для переноса эл
  - receive: ф-я - обработчик события (sortreceive)
  - remove: ф-я - обработчик события (sortremove)
  - revert: true/"invalid"/"valid"/false - эл возвращается на старое место всегда/не на указанном месте/на указаном месте/не возвращается
  - scroll: true/false - разрешить/запретить автоматическую прокрутку при перетаскивании
  - scrollSensitivity: N - px расстояние от курсора до границы для начала авто-прокрутки (ум - 20)
  - scrollSpeed: N - скорость авто-прокрутки (ум-20)
  - sort: ф-я - обработчик события (sort)
  - start: ф-я - обработчик события (sortstart)
  - stop: ф-я - обработчик события (sortstop)
  - tolerance: fit/pointer/touch/intersect(ум) - готовность принять в момент: дад приемником весь эл/курсор/эл прикасается/половина эл
  - update: ф-я - обработчик события (sortupdate)
  - zIndex: N - значение парам CSS - z-index на время перетаскивания
- События при перетаскивании
  - sort - ф-я при процессе сортировки
  - sortactivate - ф-я при начале процесса
  - sortbeforeStop - ф-я перед окончание м процесса
  - sortchange - ф-я при изменении положения эл
  - sortdeactivate - ф-я после окончания упорядочения
  - sortout - ф-я при выходе эл за пределы списка
  - sortover - ф-я при входе эл в пределы нового списка
  - sortreceive - ф-я при принятии эл из другого списка
  - sortremove - ф-я при удалении эл из одного списка в другой
  - sortstart - ф-я при начале процесса
  - sortstop - ф-я при окончании процесса
  - sortupdate - ф-я при окончании процесса позиция эл изменилась
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - position: об{top:N, left:N} - позиция эл относительно родителя (при dragstart - неизвестно)
    - offset: об{top:N, left:N} - позиция эл относительно документа (при dragstart - неизвестно)
    - helper: $(эл) - обертка вспомогательного перетаскиваемого эл
    - item: $(эл) - обертка перетаскиваемого эл
    - placeholder: $(эл) - обертка места для перетаскиваемого эл
    - sender: $(эл) - обертка родителя перетаскиваемого эл
resizable(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить способность изменять мышкой размеры эл/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- об_парам
  - alsoResize: селектор/обертка/об_эл - определение эл изменяющие размер одновременно с текущим
  - animate: true/false(ум) - применение для увеличения размера анимации
  - animateDuration: N/"slow/normal(ум)/fast" - длительность анимации
  - animateEasing: ф-я_перехода
  - aspectRatio: true/вещ - сохранить прополции полностью/установить новые: width / height
  - autoHide: true - автоматическое исчезновение ручки для изменения размеров
  - cancel: селектор - дополнительнй отбор эл (ум - ":input,option")
  - containment: селектор/об_эл - установка родительского эл для ограничения
  - delay: N - задержка в мс для начала перетаскивания (ум - 0)
  - distance: N - кол-во пкс для начала перетаскивания (ум - 1)
  - ghost: true/false(ум) - при процессе используется полупрозрачный эл
  - grid: [N-гориз N-вертик] - массив установки сетки фиксированых позиций (ум - не ограничено)
  - handles: "n,ne,e,se,s,sw,w,nw,all"/об{n:селект,ne:..,e:.,se:.,s:.,sw:.,w:.,nw:.} - установка направлений изменения размеров (ум - "e,se,s")
  - helper: "имя_кл" - установить класс для ручки (ум - ui-resizable-helper)
  - maxHeight: N - ЊЂ• высота
  - maxWidth: N - ЊЂ• ширина
  - minHeight: N - Њ€Ќ высота
  - minWidth: N - Њ€Ќ ширина
  - resize: ф-я - обработчик события (resize)
  - start: ф-я - обработчик события (resizestart)
  - stop: ф-я - обработчик события (resizestop)
- События при изменении размеров
  - resizestart - начало изменения размеров
  - resize - процесс
  - resizestop - окончание изменения размеров
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - position: об{top:N, left:N} - позиция эл относительно родителя
    - size: об{width:N, height:N} - размеры эл
    - originalPosition: об{top:N, left:N} - первоначальная позиция эл относительно родителя
    - originalSize: об{width:N, height:N} - первоначальные размеры эл
    - helper: $(эл) - обертка вспомогательного перетаскиваемого эл
selectable(["disable/enable/destroy/refresh"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить/обновить способность выделять мышкой эл/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- об_парам
  - autoRefresh: true(ум)/false -
  - cancel: селектор - дополнительнй отбор эл (ум - ":input,option")
  - delay: N - задержка в мс для начала перетаскивания (ум - 0)
  - distance: N - кол-во пкс для начала перетаскивания (ум - 1)
  - filter: селектор - дополнительный отбор эл для выделения
  - selected: ф-я - обработчик события (selected)
  - selecting: ф-я - обработчик события (selecting)
  - start: ф-я - обработчик события (selectablestart)
  - stop: ф-я - обработчик события (selectablestop)
  - tolerance: fit/touch - для выделения область болжна обхватывать эл полностью/часть эл
  - unselected: ф-я - обработчик события (unselected)
  - unselecting: ф-я - обработчик события (unselecting)
- События при перетаскивании
  - selectablestart - начало выделения
  - selecting - перед моментом выделения (ф-я(об_соб,об{selecting:об_эл} ) )
  - selected - в момент выделения (ф-я(об_соб,об{selected:об_эл} ) )
  - unselecting - перед моментом отмены выделения (ф-я(об_соб,об{unselecting:об_эл} ) )
  - unselected - в момент отмены выделения (ф-я(об_соб,об{unselected:об_эл} ) )
  - selectablestop - окончание выделения
button/buttonset(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)]) - запретить/разрешить/отключить оформления кнопки или радио,флажков/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра
- icons: об{primary:"станд_изобр_лев",secondary:"станд_изобр_прав"} - установка изображений на кнопке справа,слева
- label: "текст" - установка текста на кнопке (для радио и флажнов - в label)
- text: true(ум)/false - разрешение / запрещение отображения текста с изобр
Оформление .ui-button-text - класс текста для изменения типа и размера шрифта
slider(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)/("value",[знач])/("values",индкс/масс_инд,[знач])]) - запретить/разрешить/отключить оформления div как ползунка/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ установка/получение значения с одним полз / получить значение одного / установить знач одного/по массиву ползункам
- об_парам
  - animate: true/false(ум)/"slow,normal,fast"/N - установка/отмена/установка с длительностью анимации
  - change: ф-я - обработчик события (slidechange)
  - max: МАХ значение (ум - 100)
  - min: МИН значение (ум - 0)
  - orientation: horizontal(ум)/vertical - положение ползунка
  - range: true/false(ум)/ - использовать/нет стилизир эл заполнения (для одного/двух)
  - start: ф-я - обработчик события (slidestart)
  - slide: ф-я - обработчик события (slide)
  - step: N - установка шага перемещения (ум - 1)
  - stop: ф-я - обработчик события (slidestop)
  - value: N - установка значения 1-го (ум - Њ€Ќ)
  - values: масс - массив значений для нескольких
- События использовании ползунка
  - slidestart - начало изменения рычажка ползунка
  - slide - процесс изменения (при возврате false - рычажок не двигается)
  - slidechange - изменение рычажка курсором или програмно
  - slidestop - окончание изменения рычажка ползунка
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - handle: об_эл - ссылка на эл a рычажка
    - value: N - значение рычажка
    - values: масс - массив значений рычажков
progressbar(["disable/enable/destroy"/об_парам/("option",имя_парам,значен)/("value",[знач])]) - запретить/разрешить/отключить оформления div как прогресса/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ установка/получение значения прогресса
- change: ф-я - обработчик события (progressbarchange)
- value: N - установка значения 0-100 (ум - 0)
autoProgressbar(["stop/destroy"/об_парам/("value",[знач])]) - остановить/отключить оформления div как авто-прогресса/ установка набора параметров в об / установка/получение значения прогресса
- pulseUrl: "url" - запрос не сервер, возвращающий число 0-100
- pulseData: об - д-е для запроса отправляемые на сервер url
- interval: N - мс интервал времени для проверки позиции прогресса
- change: ф-я - обработчик события (progressbarchange) ф-я()
autocomplete(["disable/enable/destroy/close/widget"/об_парам/("option",имя_парам,значен)/("search",[знач])]) - запретить/разрешить/отключить оформления input/ закрыть список/полкчить текущ виджет/установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ установка/получение значения прогресса
- об_парам
  - change: ф-я - обработчик события (autocompletechange)
  - close: ф-я - обработчик события (autocompleteclose)
  - delay: N - мс длительность задержки перед появлением (ум - 300мс)
  - disabled: true/false - создается не активный список / активный
  - focus: ф-я - обработчик события (autocompletefocus)
  - minLength: N - кол-во символов для начала открытия списка
  - open: ф-я - обработчик события (autocompleteopen)
  - search: ф-я - обработчик события (autocompletesearch)
  - select: ф-я - обработчик события (autocompleteselect)
  - source: "url"/масс_знач/ф-я - получение списка найденных значений, ф-я(об{term:знач},ф-я) возвращает массив из об{label:знач_меню,value:знач_текст}
- События использовании ползунка
  - autocompletechange - изменения значения текста
  - autocompleteclose - закрытие меню
  - autocompletefocus - получение фокуса эл меню (при возврате true - перенос значения в текстовое поле)
  - autocompleteopen - когда д-е прочитаны и готовы открыть меню
  - autocompletesearch - перед активацие поиска
  - autocompleteselect - при выборе значения в меню (при возврате false - значение не переносится в текстовое поле)
datepicker(["disable/enable/destroy/isDiasabled/show/getDate/widget"/об_парам/("option",имя_парам,значен)/ ("dialog",имя_диалог,значен)/("dialog","дата"/об_дата,[ф-я_выбора],об_парам,[N-лев,N-верх]/об_событ)/ ("hide",[N/"slow/normal(ум)/fast"])/("setDate","дата"/об_дата)]) - запретить/разрешить/отключить оформления input,div,span/ проверка активного состояния/открыть вдж/ получить выбранную дату/полкчить об текущ виджет/установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ выбор даты в диалоге/ закрыть вдж
- altField -
- altFormat -
- appendText -
- autoSize -
- beforeShow -
- beforeShowDay -
- buttonImage -
- buttonImageOnly -
- buttonText -
- calculateWeek -
- changeMonth -
- changeYear -
- closeText -
- constrainInput -
- currentText -
- dateFormat -
- dayNames -
- dayNamesMin -
- dayNamesShort -
- defaultDate -
- disabled -
- duration -
- firstDay -
- gotoCurrent -
- hideIfNoPrevNext -
- isRTL -
- maxDate -
- minDate -
- monthNames -
- monthNamesShort -
- navigationAsDateFormat -
- nextText -
- numberOfMonths -
- onChangeMonthYear -
- onClose -
- onSelect -
- prevText -
- selectOtherMonths -
- shortYearCutoff -
- showAnim -
- showButtonPanel -
- showCurrentAtPos -
- showMonthAfterYear -
- showOn -
- showOptions -
- showOtherMonths -
- showWeek -
- stepMonths -
- weekHeader -
- yearRange -
- yearSuffix -
$.datepicker.setDefaults(об_парам) - установка значений даты по умолчанию
$.datepicker.formatDate("формат_даты",об_даты,об_парам) - получить строку с датой
- dayNames: -
- dayNamesShort: -
- monthNames: -
- monthNamesShort: -
$.datepicker.parseDate(format,value,options)
- shortYearCutoff: -
- dayNames: -
- dayNamesShort: -
- monthNames: -
- monthNamesShort: -
$.datepicker.iso8601Week(об_даты) -
tabs([("disable",N-индекс)/("enable",N-индекс)/"destroy"/length/abort/widget"/об_парам/("option",имя_парам,значен)/ ("add","#метка"/url,"имя_вклад",[N-индес])/("remove",index)/("select",index)/("load",index)/("url",index,url)/ ("rotate",N мс,true/false)]) - запретить/разрешить доступ к вкладке/отключить оформление/ кол-во вкладок/ отмена ajax и анимации/ полкчить об текущ виджет/установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ добавить вкладку в N-индес или конец/ удаление N-индес вкладки/перейти на N-индес вкладку/загрузка содержимого N-индес вкладки/ установка нового url для N-индес вклад/ авто-смена вкладок установить/отключить
- об_парам
  - add: -
  - ajaxOptions: -
  - cache: -
  - collapsible: -
  - cookie: -
  - disable: -
  - disabled: -
  - enable: -
  - event: -
  - fx: -
  - idPrefix: -
  - load: -
  - panelTemplate: -
  - remove: -
  - select: -
  - selected: -
  - show: -
  - spinner: -
  - tabTemplate: -
- События использовании ползунка
  - tabsadd
  - tabsdisable
  - tabsenable
  - tabsload
  - tabsremove
  - tabsselect
  - tabsshow
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - index: -
    - tab: -
    - panel: -
- Структура кладок
accordion([("disable/enable/destroy/resize/widget"/об_парам/("option",имя_парам,значен)/("activate",[N-индес])]) - запретить/разрешить доступ к вкладам/отключить оформление/ изменение кол-ва вкладок/получить об текущ виджет/ установка набора параметров в об / получить для 1-го эл/установка для всех эл указаного параметра/ аткрыть N-индес вкладку
- об_парам
  - active: -
  - animated: -
  - autoHeight: -
  - clearStyle: -
  - change: -
  - changestart: -
  - collapsible: -
  - disabled: -
  - event: -
  - fillSpace: -
  - header: -
  - icons: -
  - navigation: -
  - navigationFilter: -
- События использовании ползунка
  - accordionchangestart -
  - accordionchange -
  - ф-я(об_событ_мыши, об_инф) - обработчик
    - options: -
    - oldHeader: -
    - newHeader: -
    - oldContent: -
    - newContent: -
- Структура вкладки - гармошки
dialog -
Использование шаблонов (аналогично реализовано в библиотеке Mustache)
- jQuery.tmpl('html-строка ${св1} ${св2} ..',{св1:зн1,св2:зн2,..}/масс_об) - получение строки/масс_строк с вычисленныти значениями
- $("#ID-шаблона").tmpl(об) - получение новой вычисленной обертки (обертка - шаблон в контенте тэга SCRIPT с аттрибутом type="text/x-jguery-tmpl")
- Содержание html-шаблона
  - ${перем} / ${ф-я(перем)} - вычисление переменной,ф-ии в шаблоне
  - {{if св}} .. {{else}} .. {{/if}} - вычисление условия и подстановка текста
  - {{each об-масс}} .. {{/each}} - цикл повторений текста с перебором всех эл об(св={..})/масс(эл=[..])
    - ${$value} - применяемое значение эл об-масс
    - ${$index} - применяемый индекс эл об-масс

Bootstrap - расширение билиотеки JQuery и классификация отображаемых элементов

script type="text/javascript" src="...bootstrap.js" /script Подключить
link rel="stylesheet" src="...bootstrap.css" /link Подключить
Библиотеку можно подключить целиком (bootstrap.js) или в виде отдельных модулей

Разиение блока на части по горизонтали и вертикали
- div class="container" - блок по размеру которого вычисляется разбивка (на 12 частей)
  - div class="row" - набор горизонтальных блоков для объединения колонок
    - div class="col-XX-N" - блок одной колонки, классов может быть несколько (для каждого размера экрана)
      - XX - размер дисплея для которого указана разбивка на колонки
        xs - (Extra small) ширина меньше 768px
        
        sm - (Small devices) ширина больше 768px и меньше 992px
        
        md - (Medium devices) ширина больше 992px и меньше 1200px
        
        lg - (Large devices) ширина больше 1200px
      - N - количество 1/12 частей от общей ширины из которых вычисляется ширина колонки
    - class="col-XX-offset-N" - добавление для экрана XX слева пустого промежутка размером N частей
    - class="col-XX-N1 col-XX-push-N2" и class="col-XX-N2 col-XX-push-N1" - колонки меняются местами
  - div class="clearfix visible-XX - пустой блок устанавливает класса clearfix только для экрана XX - прекращает обтекание (устанавливают между колонками)
- div class="pull-left" - приклеивание блока влево (CSS=float:left), остальной контент обтекает
- div class="pull-right" - приклеивание блока вправо (CSS=float:right), остальной контент обтекает
- div class="clearfix" - пустой блок для прекращения обтекания
- div class="center-block" - центриравание блока по центру (CSS=display:block,margin-right,left: auto;)
- div class="jumbotron" - блок растягивается по всей ширине, выходя за границы
Скрытие/отображением
- div class="show" - видимый блочный контейнер (CSS=display:block)
- div class="hidden" - скрытый блочный контейнер (CSS=display:none)
- тэг class="sr-only" - тэг видимый только на мониторах (CSS=position:absolute,clip:rect(0,0,0,0))
- div class="visible/hidden-XX" - видимый(CSS=display:block)/скрытый(CSS=display:none) контейнер для экранов указаного размера
  - xs - для экранов меньше 768px
  - sm - для экранов больше 768px и меньше 991px
  - md - для экранов больше 991px и меньше 1200px
  - lg - для экранов больше 1200px
- тэг class="visible/hidden-print" - тэг видимый/скрыт только при печати на принтере
Шрифты для тэгов
- small - серым цветом с относительным уменьшением
- strong - жирный шрифт
- em - курсив
- class="lead" - тонкий но абсолютно увеличенный шрифт
- сlass="text-left/center/right" - выравнивание контента в блоке влево/центр/вправо
- class="text-muted" - серый цвет
- class="text-primary" - голубой цвет
- class="text-success" - зеленый цвет
- class="text-info" - синий цвет
- class="text-warning" - коричневый цвет
- class="text-danger" - красный цвет
- blockquote class="pull-right" - выравнивание вправо
- ul class="list-unstyled" - удаление маркера у списка
- ul class="list-inline" - блоки списка выстроены горизонтыльно
- dl class="dl-horizontal" - пояснение начинается на той же строке
- code - красные буквы и песочный фон текста
- pre - песочный фон блока
Таблицы
- table class="table" - обязательный класс: талица по всей ширине, без вертикальных линий, с выровненными ячейками
- table class="table-striped" - строки чередуются цветами фона
- table class="table-bordered" - отрисовываются все линии
- table class="table-hover" - под курсором подсвечивается фон строки таблицы
- table class="table-condensed" -
- tr/th/td class="active" - подсветка фона песочным цветом
- tr/th/td class="success" - подсветка фона зеленым цветом
- tr/th/td class="warning" - подсветка фона ярко-песочным цветом
- tr/th/td class="danger" - подсветка фона красным цветом
- div class="table-responsive" - создание блока с горизонтальной прокруткой для встраивания таблицы, если она не помещается по ширине
Формы ввода
- form role="form" - контейнер объединяющий элементы
- form class="form-inline" - добавление класса, где div class="form-group" расположены горизонтально (CSS=display:inline-block) с вертикальным центрированием
- form class="form-horizontal" - добавление класса, где div class="form-group" являются контейнерами для разделения LABEL/DIV-блоков по колонкам применяя 1/12 части:col-XX[-offset]-N
- div class="form-group" - контейнер одного элемента и его вспомогательных элементов (для выстраивания по вертикали)
- div class="has-success" - дополнительный класс окрашивает весь элемент в зеленый цвет
- div class="has-warning" - дополнительный класс окрашивает весь элемент в коричневый цвет
- div class="has-error" - дополнительный класс окрашивает весь элемент в красный цвет
- class="form-control" - класс текстовых полей input-текстовых/textarea/select для подсвесивания
- class="input-XX" - дополнительный класс определяет размер шрифта элемента ввода
  - input-lg - увеличенный размер
  - input-sm - уменьшенный размер
- label class="control-label" - добавление окраски в зависимости от валидации
- div class="checkbox" - контейнер для одного блочного checkbox и его label
- div class="radio" - контейнер для одного блочного radio и его label
- div - контейнер для группы inline-элементов checkbox или radio
  - label class="checkbox-inline" - контейнер для одного элемента checkbox или radio и текста label
- p class="form-control-static" - подставление вместо элемента ввода простого текста
- тэг class="help-block" - любой текстовый тэг (и строчные) делается блочным темно-серым цветом как подсказка
Кнопки (a или button или input type="button")
- class="btn" - стандарсный класс для простой кнопки
- установка дополнительного класса для окраски фона
  - class="btn-primary" - фон синего цвета
  - class="btn-success" - фон зеленого цвета
  - class="btn-info" - фон голубого цвета
  - class="btn-warning" - фон желтого цвета
  - class="btn-danger" - фон красного цвета
  - class="btn-link" - фон прозрачного цвета без контура, при нажатии похожа на ссылку (посчеркивание и контур фокуса)
  - class="btn-default" - фон белого цвета
  - class="active" - цвет фона чуть темнее с тенью объема
- установка дополнительного класса для размера кнопки
  - class="btn-lg" - увеличенный размер кнопки и шрифта
  - class="btn-sm" - уменьшенный размер кнопки и шрифта
  - class="btn-xs" - уменьшенный размер кнопки и шрифта
  - class="btn-block" - 100% ширина
изображения
- контур изображения
  - class="img-rounded" - контур с закругленными углами
  - class="img-circle" - - контур круглый
  - class="img-thumbnail" - контур с закругленными углами с белой границей
специальные иконки
button type="button" class="close" с контентом & times; - крест-кнопка для закрытия
span class="caret" без контента - устанавливает стрелку вниз для открытия меню
иконки GLYPHICON
span class="glyphicon glyphicon-имя_иконки" без контента - устанавливает иконку по ее имени

Отключение методов библиотеки

$(document).off('.data-api') - отключение всей библиотеки
$(document).off('.имя_библ.data-api') - отключить одну часть библиотеки по имени

Особые методы библиотеки

$.fn.имя_модуля.Constructor - получение конструктора
$(селектор).data('имя_модуля') - особая сущность модуля
$.fn.имя_модуля.noConflict() - получение пространства имен модуля для избежания конфликта с другими библиотеками (после - возвращают с новым именем $.fn.новое_имя=простр_имен)

Обработка событий модуля

$(селектор).on('show.имя_событ.имя_модуля',ф-я(об_событ)) - выполнение ф-ии события перед указанным событием
$(селектор).on('shown.имя_событ.имя_модуля',ф-я(об_событ)) - выполнение ф-ии события после указанного события

transition.js - модуль програмного выполнения переходов (применяется в модулях Modal,Tab,Alerts,Carousel)

modal.js - создание из DIV-блока модального окна скрываемого через CSS(display:none), открываемого/закрываемого кнопкой (button/a) с аттрибутами data-target/href="#ID-блока" data-toggle="modal"

Иерархия элементов и их классы
- a data-toggle="modal" href="#myModal" - кнопка вызова модального окна из любого места
- div class="modal fade" - главный блок (скрытое модальное окно)
  - div class="modal-dialog" - определение диалогового окна - отцентриновано, имеет фиксированую высоту и ширину
    - div class="modal-content" - блок содержащий информацию в блоках header,body,footer разделенных тонкой линией
      - div class="modal-header" - блок заголовка с первой кнопкой скрытия
        button type="button" class="close" data-dismiss="modal" aria-hidden="true" - кнопка закрытия
        
        h4 class="modal-title" id="myModalLabel" - заголовок
      - div class="modal-body" - блок основного содержимого
      - div class="modal-footer" - блок подвала (для кнопок управления)
        button type="button" class="btn btn-default" data-dismiss="modal" - кнопка закрытия
        
        button .. - остальные кнопки
.modal([об_парам]) - открытие окна без/с параметрами
- backdrop:true(ум)/false - задняя панель темнеет (аналог аттрибута data-backdrop)
- keyboard:true(ум)/false - скрытие окна кнопкой вызова (аналог аттрибута data-keyboard)
- show:true(ум)/false - отображение окна при инициализации (аналог аттрибута data-show)
- remote:true/false(ум) - содержание окна подгружается из ф-ла указанного в атрибуте кнопки-ссылки href (аналог аттрибута data-remote)
.modal('show/hide/toggle') - программное выполнение отображения/скрытия окна
События
- show.bs.modal - перед отображением окна (нажата кнопка или вызван метод)
- shown.bs.modal - сразу после отображения окна
- hide.bs.modal - перед скрытием окна (нажата кнопка или вызван метод)
- hidden.bs.modal - сразу после скрытия окна

dropdown.js - создание выпадающего меню

Иерархия элементов и их классы
- div class="dropdown" - главный блок (окно с выпадающим меню)
  - a data-toggle="dropdown" href/data-target="#" - определение кнопкидля віпадающего меню
  - span class="caret" - класс вставляет в пустой тэг стрелку вниз (добавляют в конце текста кнопки)
  - ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" - контейнер для віпадающих пунктов
    - li - набор выпадающтх пунктов
      - a role="menuitem" tabindex="-1" href="#" - пункт меню для выполнения действия
    - li class="dropdown-header" - текст - заглавие пунктов меню которые не выбираются
    - li class="divider" - горизонтальная черта вместо текста
.dropdown(['toggle']) - программное выполнение отображения/скрытия окна
События
- show.bs.dropdown - перед отображением окна (нажата кнопка или вызван метод)
- shown.bs.dropdown - сразу после отображения окна
- hide.bs.dropdown - перед скрытием окна (нажата кнопка или вызван метод)
- hidden.bs.dropdown - сразу после скрытия окна

scrollspy.js - создание управление прокруткой с помощью кнопок, добавляется обратная связь - при прокрутке нажимаются кнопки

Иерархия элементов и их классы
- div class="ID-навигации" - блок навигации
  - ul class="nav nav-tabs" - список навигационных кнопок
    - li - одна навигационная кнопка
      - a href="#ID-метки" - кнопка перехода к метке
- тэг data-spy="scroll" data-target="#ID-навигации" - главный блок текста для прокручивания, содержит метки
  - тэг id="ID-метки" - метка для прокрутки
.scrollspy('refresh') - программное прокрутка после внесенных изменений DOM (т.к. положение текущего видимого эл может измениться)
События
- activate.bs.scrollspy - при активации нового эл

tab.js - создание списка вкладок

Иерархия элементов и их классы
- ul class="nav nav-tabs" - список навигационных кнопок
  - li - одна навигационная кнопка (предварительная активация class="active", иначе не выбрана)
    - a href="#ID-блока" data-toggle="tab" - кнопка перехода к блоку при выбранной вкладки
- тэг class="tab-content" - блок как контейнер для набора блоков вкладок
  - тэг id="ID-блока" class="tab-pane" - набор блоков вкладок
эл_a.tab('show') - программное нажатие на кнопку
События
- show.bs.tab - перед переключением на выбранную кнопку
- shown.bs.tab - сразу после переключения на выбранную кнопку

tooltip.js - создание текстовой подсказки с направляющим уголком (обычно для кнопок), активируются програмно

Иерархия элементов и их классы
- a data-toggle="tooltip" title="текст" - обязательные аттрибуты
- data-placement="left/top/bottom/right" - место насположения подсказки от элемента, при отсутствии - по ум
эл.tooltip([об_парам]) - подключение нового формата подсказки
- animation:true(ум)/false - появление не мгновенное (аналог аттрибута data-animation)
- html:true/false(ум) - текст с html-форматированием (аналог аттрибута data-html)
- placement:"left/top/bottom/right/auto(ум)"/ф-я - место отображения подсказки (аналог аттрибута data-placement), "auto" можно добавлять в начале для избежания скртия
- selector:"селектор"/false(ум) - подключение другого эл (аналог аттрибута data-selector)
- title:"строка"/ф-я - при отсутствии аттрибута title - вычисляет (аналог аттрибута data-title)
- trigger:"click/hover(ум)/focus/manual" - условие отображения подсказки:клик/курсор/фокус/ (аналог аттрибута data-trigger)
- content:"строка"/ф-я - отображение контента при его отсутствии (аналог аттрибута data-content)
- delay:N/{ show:N1,hide:N2} - задержка отображения,скрытия (аналог аттрибута data-delay)
- container:"имя_тэга"/false(ум) - фильтр по имени тэга внутри которого устанавливаются подсказки (аналог аттрибута data-container)
эл.tooltip("show/hide/toggle/destroy") - подсказку показать/скрыть/изменить/удалить
События
- show.bs.tooltip - перед отображением подсказки
- shown.bs.tooltip - сразу после отображения подсказки
- hide.bs.tooltip - перед скрытием подсказки
- hiden.bs.tooltip - сразу после скрытия подсказки

popover.js - создание большой расширенной текстовой подсказки с направляющим уголком (обычно для кнопок), активируются програмно (такой же tooltip)

Иерархия элементов и их классы
- a data-toggle="popover" title="текст" - обязательные аттрибуты
- data-content="дополнительный текст" - дописываемый текст
эл.popover([об_парам]) - подключение нового формата подсказки
- animation:true(ум)/false - появление не мгновенное (аналог аттрибута data-animation)
- html:true/false(ум) - текст с html-форматированием (аналог аттрибута data-html)
- placement:"left/top/bottom/right/auto(ум)"/ф-я - место отображения подсказки (аналог аттрибута data-placement), "auto" можно добавлять в начале для избежания скртия
- selector:"селектор"/false(ум) - подключение другого эл (аналог аттрибута data-selector)
- title:"строка"/ф-я - при отсутствии аттрибута title - вычисляет (аналог аттрибута data-title)
- trigger:"click(ум)/hover/focus/manual" - условие отображения подсказки:клик/курсор/фокус/ (аналог аттрибута data-trigger)
- content:"строка"/ф-я - отображение контента при его отсутствии (аналог аттрибута data-content)
- delay:N/{ show:N1,hide:N2} - задержка отображения,скрытия (аналог аттрибута data-delay)
- container:"имя_тэга"/false(ум) - фильтр по имени тэга внутри которого устанавливаются подсказки (аналог аттрибута data-container)
эл.popover("show/hide/toggle/destroy") - подсказку показать/скрыть/изменить/удалить
События
- show.bs.popover - перед отображением подсказки
- shown.bs.popover - сразу после отображения подсказки
- hide.bs.popover - перед скрытием подсказки
- hiden.bs.popover - сразу после скрытия подсказки

alert.js - создание одного блока с текстом и кнопкой для его удаления

Иерархия элементов и их классы
- тэг class="alert" - обязательные аттрибуты блока
  class="alert-success" - дополнительный класс блока - добавление зеленого фона
  class="alert-warning" - дополнительный класс блока - желтый фон
  class="fade in" - дополнительный класс блока - добывляет анимационное исчезновение прозрачностью
  - a href="#" class="close" data-dismiss="alert" - первый элемент - кнопка удаления блока в последней колонке
  - остальные элементы - текст сообщения в первой колонке
эл.alert(['close']) - [удаление блока сообщения]
События
- close.bs.alert - перед закрытием сообщения
- closed.bs.alert - сразу после закрытия сообщения

button.js - создание кнопки

Иерархия элементов и их классы
- Одиночные кнопки
  - button type="button" class="btn" - обязательные аттрибуты кнопки
  - class="btn-default" - дополнительный класс кнопки - кнопка с белым фоном
  - class="btn-primary" - дополнительный класс кнопки - основкая кнопка с синим фоном
  - class="btn-danger" - дополнительный класс блока - красный фон
  - data-toggle="button" - дополнительный аттрибут кнопки - фиксация нажатия цветом (цвет темнеет), подобие флажка
  - data-loading-text="Loading..." - дополнительный аттрибут кнопки - текст устанавливаемый при выполнении загрузки
- Группа фиксируемых кнопок объединенных в блок (из флажков)
  - div class="btn-group" data-toggle="buttons" - контейнер для группы кнопок
    - label class="btn" - набор кнопок, контейнер для флажка и теста
      - input type="checkbox" - флажок фиксации кнопки
      - текст - текст на кнопке
- Группа с одной фиксируемой кнопкой объединенных в блок (из радио-кнопок)
  - div class="btn-group" data-toggle="buttons" - контейнер для группы кнопок
    - label class="btn" - набор кнопок, контейнер для флажка и теста
      - input type="radio" name="имя" - радио-кнопки одиночной фиксации с одинаковым именем
      - текст - текст на кнопке
эл.button() - подключение ф-й и обработчиков событий (после программного добавления)
эл.button('toggle') - переключение кнопки если установлен аттрибут data-toggle="button"
эл.button('toggle') - переключение кнопки если установлен аттрибут data-toggle="button"
эл.button('loading') - замена текста кнопки на текст аттрибута data-loading-text="текст" и зпарещает доступ
эл.button('reset') - восстановление первоначального текста кнопки после замены скриптом эл.button('loading')
эл.button('строка') -

collapse.js - создание гармошки

Иерархия элементов и их классы
- Одиночные гармошки
  - button type="button" class="btn" data-toggle="collapse" data-target="#ID-текста" - обязательные аттрибуты кнопки открытия/закрытия
  - div id="demo" class="collapse in" - блок с текстом открываемы й кнопкой
  - class="in" - дополнительный класс блока - открыт при инициализации
- Группа гармошек при открытии закрывает другие
  - div class="panel-group" id="ID-контейнер" - контейнер для группы гармошек
    - div class="panel panel-default" - набор панелей-гармошек
      - div class="panel-heading" - видимый блок, содержит кнопку
        h4 class="panel-title" - оформление видимого блока в виде гаголовка
        a class="accordion-toggle" data-toggle="collapse" data-parent="#ID-контейнер" href="#ID-блока" - кнопка связанная с блоком текста и главным контейнером
      - div id="ID-блока" class="panel-collapse collapse [in]" - внешний блок с ф-ями распахивания [открыт при инициализации], на время процесса открытия/закрытия класс collapse меняется на collapsing
        div class="panel-body" - лок текста
эл.collapse([об_парам]) - подключение ф-й и обработчиков событий (после программного добавления)
- parent:"селектор"/false(ум) - указание объединяющего контейнера (аналог аттрибута data-parent)
- toggle:true(ум)/false - открытие блока текста (аналог аттрибута data-toggle)
эл.collapse('show/hide/toggle') - открытие/закрытие/переключение гормошки
События
- show.bs.collapse - перед открытием гармошки
- shown.bs.collapse - сразу после открытия гармошки
- hide.bs.collapse - перед закрытием гармошки
- hidden.bs.collapse - сразу после закрытия гармошки

carousel.js - создание слайд-шоу с пролистыванием вручную и автоматически

Иерархия элементов и их классы
- div id="ID-контейнер" class="carousel slide" - блок контейнера со слайдами
  - ol class="carousel-indicators" - список индикатора
    - li data-target="#ID-контейнер" data-slide-to="N-номер" class="[active]" - набор индикаторов для каждого слайта, у одного класс active - активирован
  - div class="carousel-inner" - контейнер со слайдами
    - div class="item [active]" - набор блоков содержащих слайды, у одного класс active - активирован
      - img src=".." - изоражение для слайда
      - div class="carousel-caption" - текст накладываемый на изображение
  - a class="left carousel-control" href="#ID-контейнер" data-slide="prev" - кнопка перехода на предыдущий слайд
    - span class="icon-prev" - пустой блок с установленным скриптом стрелки влево
  - a class="right carousel-control" href="#ID-контейнер" data-slide="next" - кнопка перехода на следующий слайд
    - span class="icon-next" - пустой блок с установленным скриптом стрелки вправо
эл.carousel([об_парам]) - подключение ф-й и обработчиков событий (после программного добавления)
- interval:N-число/5000(ум) - указание времени задержки перед запуском автоматического пролистывания (аналог аттрибута data-interval)
- pause:"hover(ум)/.." - указание причины отстановки авто-пролистывания (аналог аттрибута data-pause)
- wrap:true(ум)/false - установка циклической связи первого и последнего слайда (аналог аттрибута data-wrap)
эл.carousel('prev/next') - переход к предыдущему/следующему слайду
эл.carousel(N-число) - переход к N-му слайду
эл.carousel('pause/cycle') - остановка/запуск автоматического пролистывания
События
- slide.bs.carousel - перед перелистыванием слайда
- slid.bs.carousel - сразу после перелистывания слайда

affix.js - создание плавающей навигации, когда навигация и текст в двух колонках

Иерархия элементов и их классы
- class="container" - блок контейнера с колонками
  - div class="col-md-N" - блок колонки с блоком который должен плавать
    - тэг data-spy="affix" class="affix" data-offset-top="N-число" - блок за которым установлено слежение, перемещается если до верхнего края отсталось Npx
  - div class="col-md-N" - блок высокой колонки вдоль которой будет плавать блок слежения
эл.affix([об_парам]) - подключение ф-й и обработчиков событий (после программного добавления)
- offset:N/{top:N1/ф-я,bottom:N2/ф-я}/ф-я - настройка слежения за свойством[и] блока (аналог аттрибута data-offset-top/bottom), но можно установить ф-ю вычисления N

AngularJS - модуль внедряет в HTML функциональность работающую в отдельносм цикле, интерактивную шаблонизацию, средства тестирования (не конфликтует с jQuery, ее подключают первой)

Модули для быстрого создания приложений на AngularJS

lineman - готовое приложение на AngularJS

angular-seed - готовое приложение на AngularJS

Yeoman - генержатор приложения на AngularJS

script type="text/javascript" src="...angular.js" /script Подключить
script type="text/javascript" src="...angular-resource.js" /script Подключить
script type="text/javascript" src="...angular-route.js" /script Подключить
после загрузки скрипта, angular ищет директиву ng-app (если ее нет - для запуска надо выполнить скрипт angular.bootstrap(об_эл) )

angular - единый об содержащий все ф-ии и методы
angular.module("имя_модуля_html",масс_имен_связан_модулей/[],[ф-я_настр(..)]) - создание об_модуля пользователя для внедрения(ТЭГ ng-app="имя_модуля_html"), позволяет добавлять настройки,контроллеры и др., может иметь зависимость(расширение текущего модуля возможностями другого) от других дочерних модулей(тогда службы дочерних модулей доступны друг-другу и родителю, которые можно добавить в аргумент службы), все элементы можно ставить в цепочку и регистрировать не однократно (в случае применения минификации скрипта: ф-ии с зависимостями надо записать массивом - [$служ1,$служ2,..ф-я($служ1,$служ2,..)])
- об_модуля.config(ф-я_настр(..)) - (фаза настройки провайдера) настройка фабрики или служб ф-ей конфигурации (или выполнить ее в module)
- об_модуля.controller("имя_контр_html",['$scope',..,ф-я($scope)]) - установка для модуля ф-ии-контроллера обычно выполняет инициализацию об $scope, где $scope - автоматически создается фабрикой Scope.$new()
- об_модуля.constant("имя_конст",значен) - создание константы модуля
- об_модуля.value("имя_знач",об) - создание в модуле простого об имеющего простое значение
- об_модуля.service("имя_служ",ф-я_констр(..)) - создание службы - объекта-одиночки (имя готовых служб обычно начинается с $), т.е регистрация в модуле ф-ии-конструктора (расширяет контроллер дополнительными функциями:$http,$log,$filter, их имена надо указать первыми в массиве завершив функцией контроллера с аргументами: app.controller('имя',['$сл1','$сл2',..ф-я($сл1,$сл2,..)]), при получении д-х асинхнонными ф-ями небходимо использовать this сохнаненную в переменной)
- об_модуля.factory("имя_служ",ф-я(..)) - создание фабрики, регистрация в модуле любых ф-ий возвращающих об
- об_модуля.provider("имя_служ",ф-я(..)) - создание службы как провайдера (универсальный метод), содержит фабричную ф-ю $get() и другие св-ва, вначале фабрика настраивается (app.config()) а после создается экземпляр
- об_модуля.run(ф-я(..)) - выполнение ф-ии при запуске приложения
- об_модуля.name - получить имя модуля
- об_модуля.requires - получить масс имен модулей загружаемых перед этим мод.
- об_модуля.animation(..) -
- об_модуля.directive("имя_дир",фабр_ф-ия/[перем_зависим1,..,фабр_ф-ия]) - фабричная ф-ия (создает для компилятора об с полями) для внедрения в HTML-эл дополнительных ф-ий (отображение зависимостей в виде массива небходымы для благополучной минификации JS)
  - name:"имя" - имя области видимости
  - restrict:'A/E/C/M' - тип диррективы для встраивания(аттрибут/элемент/класс/комментарий)
  - priority:N - (ум-0 самый низкий) установка приоритета компиляции, когда в эл несколько дирректив
  - terminal:true - запрещение компиляции других дирректив с низким приоритетом до компиляции этой
  - link:ф-я(перем_scope, перем_element, перем_attrs, [перем_ngModelController]) - связывает диррективу с контекстом (добавление ф-ий в контекст)
    - .$viewValue - значение отображаемое в элементе
    - .$modelValue - значение хранимое в модели, может отличаться от $viewValue зависимо от ф-ии $parser()
    - .$parsers - массив ф-ий, последовательно преобразующих значение для передачи его в модель
    - .$setViewValue(значение) - ф-я для передачи значения в модель (из эл)
    - .$render - ф-я для автоматического отображения значения в эл (значение из модели)
    - перем_scope.перем=.. - добавление в область видимости новой переменной
    - перем_scope.имя_функц=.. - добавление в область видимости новой функции
  - template:"html-шаблон" - строка разметки применяемая для диррективы, может использовать диррективу ng-transclude для указания места вставки контента указанного в текущей диррективе
  - templateUrl:"ф-л" - ф-л с разметкой применяемая для диррективы, загружаемый асинхронно
  - replace:true/false - замена(с копированием атрибутов)/нет(шалон добавляется) всего текущего эл на шаблон
  - transclude:false/true/'element' - нет/использует текущее содержимое контента/весь элемент для шаблона,ф-ии компиляции (как в директиве ng-repeat копируется весь эл и содержимое текущ эл), добавляет в свойстве compile 3-й аргумент функцию
  - scope:false(ум)/true/об - использовать родительский контекст/создание нового с наследованием св-в родителя/создание нового контекста не имеющего связи с контекстом родителя
    - имя_пер:"@имя_аттрибута" - привязывает интерполяцией значение "имя_пер" контекста к значению атрибута "имя_аттрибута" элемента (т.е. имя_аттрибута="{{имя_пер}}")
    - имя_пер:"@" - привязывает интерполяцией значение "имя_пер" контекста к значению одноименного атрибута "имя_пер" элемента
    - имя_пер:"=имя_аттрибута" - двустороннее связывание значения "имя_пер" контекста со значением атрибута "имя_аттрибута" элемента
    - имя_пер:"=" - привязывает присвоением значение "имя_пер" контекста к значению одноименного атрибута "имя_пер" элемента
    - имя_функц:"&имя_аттрибута" - привязывает ф-ю "имя_функц" контекста к значению атрибута "имя_аттрибута" элемента
    - имя_функц:"&" - привязывает значение "имя_функц" контекста к значению одноименного атрибута "имя_функц" элемента
  - controller:"имя_контр" / ф-я($scope,..службы..,[$transclude]) - установка готового(но он всем доступен)/нового контроллера (для нового контекста) (может выполнят ф-ии св-ва link, тогда надо внедрять:[служба1,..ф-я(..служба1)]), вместо внедрения контроллера в HTML(ng-controller=..)
    - $scope - контекст текущего элемента
    - $element - обертка jquery эл самой директивы
    - $attrs - об с аттрибутами эл: {имя_атр1:знач1,..}
    - $transclude - доступом к ф-ии включения содержимого с уже добавленным контекстом, для получения об_эл=$transclude()
  - controllerAs:'имя' - псевдоним имени контроллера, чтобы обращаться с более удобным именем
  - require:"[префикс]имя_контроллера/массив_имен_контроллеров" - применение для передачи контроллера/массив_контроллеров другой диррективы (например ngModel) этого эл для передачи в 4-й аргумент ф-ии link (например об ngModuleController)
    - ? - не обязательное присутствие контроллера(например ?имя_диррективы, тогда при отсутствии диррективы 4-й эл получит null)
    - ^ - получение контроллера из родительских эл с указанным именем директивы
  - compile:ф-я(element,attributes,[перем_transcludeFn]) - ф-я компиляции преобразует текущий эл (element - об_эл_jquery) , [перем_transcludeFn - с доступом к ф-ии включения содержимого, для получения об_эл=перем_transcludeFn(об_контекст)]
- об_модуля.directive("имя_дир",ф-ия(){return ф-я(перем_scope, перем_element, перем_attrs){..}} - Короткий вариант диррективы, возвращает ф-ию связывания, остальные значения - по умолчанию
  - перем_scope - об_контекста
  - перем_element - обертка элемента
  - перем_attrs - об_аттрибутов: {имя_атр1:знач1,..}
- об_модуля.component("имя_дир", об_директив ) - компонент как упрощенная форма директивы, заменяет директиву-элемент на шаблон
- об_модуля.filter("имя_фильтр",фабр_ф-я(){return ф-ия(об,[арг1,арг2,..]){..return знач_ответ}}) - фабрика фильтра получает об [с аргументами], возвращает после обработки знач_ответ
angular.module("имя_модуля") - повторное получение об_модуля для обращения к уже созданному модулю
angular.copy(истчник[, назначение]) - получение копии источника/об [и установка его в назначении]
angular.bind(об_конт, ф-ия1, аргументы) - создание ф-ии для выполнения ф-ии1 в об_конт с аргументами
angular.bootstrap(об_эл[, "имя_модул"/масс_модулей]) - запуск модуля в эл вместо диррективы ng-app, применяют при асинхронной загрузке приложения
.element(об_эл/$N/"HTML-строка элемента") - подключ_эл/подключ_эл_по№_контекста/создание jquery_lite-обертки об_эл
- addClass() -
- after() -
- append() -
- attr() -
- bind("имя_событ",ф-я) - обработчик события эл
- unbind("имя_событ",ф-я) - удаление обработчика события для эл
- children() - Does not support selectors
- clone() -
- contents() -
- css() -
- data() -
- eq() -
- find() - Limited to lookups by tag name
- hasClass() -
- html() -
- next() - Does not support selectors
- parent() - Does not support selectors
- prepend() -
- prop() -
- ready() -
- remove() -
- removeAttr() -
- removeClass() -
- removeData() -
- replaceWith() -
- text() -
- toggleClass() -
- triggerHandler() - Doesn't pass native event objects to handlers.
- val() -
- wrap() -
- .controller("имя_контр") - получить контроллер для эл
- .injector() - получить инжектор эл или его родителя
- .scope() - получить обл.видимости для эл или его родителя (если у эл его нет)
- .inheritedData() - похож на data()
.equals(об1/знач,об2/знач) - t/f определить эквивалентность двух об/знач
.extend(об1, об2) - добавление в об1 всех св-в из об2
.forEach(об/масс,ф-ия(key,value)[, ОВ]) - выпол.ф-ии [внутри ОВ] для всех эл об/масс
.fromJson("JSON-строка") - (де-сериализация) получить об из JSON-строки
.toJson(об[, pretty]) - (сериализация) получить JSON-строку из об
.identity() - получить первый аргумент ф-ии (запускается в ф-ии)
.injector("имя_модуль"/масс_имен_модулей) - получить ф-ию-ижектор ($injectop) для получения доступа к об служб
Ф-ии проверки типа
- .isArray(знач) - t/f проверка значения - масс
- .isDate(знач) - t/f проверка значения - дата
- .isDefined(знач) - t/f проверка значения - определено (не undefinit)
- .isUndefined(знач) - t/f проверка значения - не определено (undefinit)
- .isElement(знач) - t/f проверка значения - об_эл/jquery-обертка
- .isFunction(знач) - t/f проверка значения - ф-ия
- .isNumber(знач) - t/f проверка значения - число
- .isObject(знач) - t/f проверка значения - об (аналог typeof)
- .isString(знач) - t/f проверка значения - строка
.noop() - пустая ф-ия типа function(){}
.lowercase("стока") - получить строку в нижнем регистре
.uppercase("стока") - получить строку в верхнем регистре
.version - об с информацией о версии NG
- .full - Строка полной версии, такая как "0.9.18"
- .major - Номер старшей версии, такой как "0"
- .minor - Номер младшей версии, такой как "9"
- .dot - Номер исправления, такой как "18"
- .codeName - строка кодового имя релиза, такое как "jiggling-armfat"
.mock - Пространство имен для 'angular-mocks.js' который содержит инструменты для тестирования связанного кода
$rootScope - корневой родительский контекст (создается диррективой ng-app)
Scope() - класс создания об контекста $scope и содержит методы обработки цикла, событий, отображения
$scope - контекст, содержит методы обработки цикла, событий, отображения
- .$parent - родительский контекст (непосредственно по иерархии)
- .$new([true]) - принудительное создание дечерней обл.видимости (ОВ) [изолируется - не наследует состояние родителя]
- .$destroy() - удаление ОВ и ее дочерние ОВ
- .$emit('имя_событ') - генерация события контексту вверх по иерархии (к родителю)
- .$broadcast('имя_событ') - генерация события контексту вниз по иерархии (к дочернему)
- .$on('имя_событ',ф-я) - установка обработчика события, где ф-я - function(об_событ,[арг1,арг2,..]){}
- Восходящие NG-событие(от родителя к дочерним)
  - '$includeContentRequested' - при запросе на загрузку контента (ng-include, ng-view)
  - '$includeContentLoaded' - при загрузке контента (ng-include)
  - '$viewContentLoaded' - при загрузке контента (ng-view)
- Нисходящее NG-событие (от дечернего к родителю)
  - '$locationChangeStart' -
  - '$locationChangeSuccess' - при изменении oldUrl на newUrl запускается от $rootScope: function(event, newUrl, oldUrl){}
  - '$routeUpdate' - при повторном исп. маршр.(reloadOnSearch==true)
  - '$routeChangeStart' - перед изменением маршрута
    - об_событ.current - об_настр текущего маршрута
    - об_событ.next - об_настр будущего м-та
  - '$routeChangeSuccess' - получены все зависимости для изменения м-та
    - об_событ.current - об_настр текущего маршрута
    - об_событ.previous - об_настр предыдущего маршрута
    - об_событ.angularEvent - синтезированый об события
  - '$routeChangeError' - был отвергнут любой разрешенный маршрут
    - об_событ.current - об_настр текущего маршрута
    - об_событ.previous - об_настр предыдущего маршрута
    - об_событ.rejection
  - '$destroy' - перед удалением ОВ и его дочерних ОВ
- .$watch("выраж"/ф-я (возвращаемый результат), ф-ия_обраб([newValue, oldValue]), true(сравнение всех св-в об)/false(ум)) - регистрация наблюдателя на каждом цикле с обработчиком при изменении выраж, возвращает ф-ю запускаемую для удаления этого наблюдателя
- .$watchCollection("массив"/"объект"/ф-я (возвращаемый результат), ф-ия_обраб([newValue, oldValue]) ) - регистрация наблюдателя на каждом цикле с обработчиком при изменении массива/св-в объекта, возвращает ф-ю запускаемую для удаления этого наблюдателя
- .$digest() - принудительный вызов наблюдателей watcher (список установленных $watch()) текущего и дочерних контекстов и обработка очереди событий $evalAsync (применяют для тестов)
- .$evalAsync(ф-я) - установка в очередь выполнения ф-ю, аналог $timeout(ф-я,0)
- .$id - св-во, уникальный номер ОВ (применяют для отладки)
- .$apply(ф-я()) - запуск ф-ии для изменений в контексте и принудительная проверка $watch() всех контекстов и обработка их событий $digest()
  1. нажатие на гиперссылку, Назад/Вперед браузера
  2. ответы запросов сети $http,$resource
  3. вызов обработчиков событий всех дирректив
  4. таймеры $timeout или setTimeout
$element - об_эл текущего элемента (внедряется в контроллер диррективы)
$window - ссылка на window браузера
$document - обертка для document
$attrs - обертка об с аттрибутами (внедряется в контроллер диррективы)
- .$set("имя_атр","знач") - установка аттрибута
- .$observe("имя_атр",ф-я(перем_знач)) - установка слушателя изменения значения аттрибута при интерполяции аттрибута (аналог $watch())
контекст.$eval() - обертка для ф-ии javascript - eval()
$provide - служба регистрации рецептов создания объектов, после регистрации объектов их можно внедрять через службу $injector (внедрение блоков в блоке .config() )
- .decorator("имя_фабрика",ф-я($delegate){}) - декоратор дополняет сущеструющую фабрику новыми свойствами с помощью $delegate()
- .value() - тотже режультат module().value() но в блоке config()
- .factory() - тотже режультат module().factory() но в блоке config()
$compileProvider.directive() - тотже режультат module().directive() но в блоке config()
$filterProvider.register() - тотже режультат module().filter() но в блоке config()
$injector - служба содержит зависимости текущего об с другими службами, создает $rootScope
- .get("имя_служ") - получение созданного службой об, а если не создан - создает об службы
- .invoke(ф-я) - выполнение ф-ии, если ф-я должна получить зависимости относящиеся к $injector
$httpProvider - провайдер (применяется тольно в .config() )
$httpBackend - для имитации в тестах низкоуровневый сервис работы с XMLHttpRequest исправляет несовместимости бр-ов, использована в $http или $resouce (может быть применена в текстах для подмены на var-переменную)
- .expect('метод','url-адрес',[об-данных],[об-загол] ) - имитация ожидаемого запрса методом GET/POST/DELETE/PUT/..
- .expectXXX('url-адрес',[об-данных],[об-загол]) - имитация ожидаемого запрса GET/POST/DELETE/PUT/JSONP..
- .when('метод','url-адрес',[об-данных],[об-загол] ) - имитация ожидаемого запрса методом GET/POST/DELETE/PUT/..
- .whenXXX('url-адрес') - имитация ожидаемого запрса GET/POST/DELETE/PUT/..
- .respond([код-ответ],ответ,[об-заголовок]) - имитация ожидаемого ответа: 200,ответ
- .respond(ф-я) - имитация ожидаемого ответа в функции:return 200,ответ,[об-заголовок]
- .flush() - запуск имитации запроса (whenXXX) и ответа (respond)
- .verifyNoOutstandingExpectation() - проверка на выполнение всех запросов и ответов
- .verifyNoOutstandingRequest() - проверка что запросы и ответы выполнены только ожидаемые
- .resetExpectations() - очистка всех установленных ожиданий
$http(об_настр) - служба как универсальная ф-я связи с сервером в виде ф-ии, выполняющая запросы XHR и JSONP
- method: - метод запроса (применяют для ф-ии $http()):GET/POST/DELETE/PUT/
- url: - адрес запроса (применяют для ф-ии $http())
- params:об - параметры добавляемые в строку запроса как ?имя=знач&..
- headers: - дополнительные заголовки запроса
- data:"стр_д-х"/об_д-х - передаваемые данные, (об_д-х автоматически преобразуются в JSON, кроме св-в начинающиеся с $, обойти это можно применив JSON.stringify)
- timeout:N - мс длительность ожидания отсвета
- cache:true/имя_ячейки - управление кэшированием запроса (первый ответ сохраняется в памяти и второй запрос не получаем из памяти)
- transformRequest:ф-я() - ф-я обработки данных перед запросом
- transformResponse:ф-я() - ф-я обработки полученных данных после запроса
- withCredentials: -
- apiKey:'ключ' - добавление ключа при jsonp-запросе
$http. - служба связи с сервером, выполняющая запросы XHR и JSONP (безопасность:при получении от сервера XSRF-TOKEN=код, в запросы будет добавляться заголовок X-XSRF-TOKEN:код)
- .get('URL'[,об_настр]) - простой запрос GET
- .head('URL'[,об_настр]) - простой запрос HEAD
- .post('URL',об_данных[,об_настр]) - простой запрос POST с передачей д-х (преоразование в JSON, но пропускаются св-ва об "$..")
- .put ('URL',об_данных[,об_настр]) - запрос PUT с передачей д-х (предусматривает два запроса 1-OPTIONS, 2-PUT)
- .delete('URL'[,об_настр]) - запрос DELETE (предусматривает два запроса 1-OPTIONS, 2-DELETE)
- .jsonp('URL ?callback=JSON_CALLBACK'[,об_перед_д-х]) - GET-запрос позволяет делать запросы на другие сервера, выполняет GET-запрос (автоматически создает скрипт), где "JSON_CALLBACK" заменяется "angular.callbacks._????" для приема д-х в виде строки ф-ии "angular.callbacks._????(д-е)"
- .success(ф-я(data, N-status, ф-я(headers_отв), об_настр)) - при удачной связи (код 200-299)
- .error(ф-я(data, N-status, ф-я(headers_отв), об_настр)) - при возникновении ошибок (код 300 и выше)
- .then(ф-я_success(об_ответ), [ф-я_error(об_ответ)]) - можно регистрировать ф-ии в формате службы $q
- содержание об_ответ
  - data - об полученных д-х после ф-ии де-сериализации
  - status - N-число - код ответа 200-299 успех, 300-500 неудача
  - statusText - строка ответа с описанием кода ответа
  - headers - ф-ия выдающая значен заголовка: headers("имя_зогол")
  - config - об настроек создания запроса
$resource - специализированная служба асинхронного запроса на сервер, через RESTful (необходимо подключить скрипт angular-resource.js и добавить зависимость модуля от ngResource), получения об или масс_об
- $resource('шаблон url',[об_д-х_перем],[об_действий]) - фабрика для создания об_ресурса, выполняющего запросы на сервер
  - шаблон url - строка ареса, может содержать: "\\:N"-номер порта(двоеточие надо экранировать), ":имя_перем"-переменную из об_д-х_перем
  - об_д-х_перем - об для подстановки в шаблон по умолчанию: имя_перем, а остальные как ?имя=знач&.., значение "@имя_перем" - воспринимается не как строка, а вычисляемое из переменных
  - об_действий - об для создания дополнительных методов (св-во - имя нового метода) содержат об: {имя_метод1:об_парам,..}, с параметрами
    - method:"метод" - указание метода, например PUT
    - params:об - подставляемые параметры
    - isArray:true/false - тип возвращаемого ответа массив_об/один_об
    - url:'..' -
    - transformRequest:ф-ия(об_д-х,об_header) - преобразование д-х запроса
    - transformResponse:ф-ия(об_д-х,об_header,N-статус) - преобразование д-х ответа
    - headers:об - добавление заголовков
    - headers:об - добавление заголовков
- Стандартные методы конструктора об_запроса (асинхронные)
  - .query([об_д-х_перем],[ф-я_удач(д-е),ф-я_ошиб()]) - запуск запроса через $http.get() для получения JSON-массива эл_д-х, может асихронно возвращать ответ
  - .get(об_д-х_перем,ф-я_удач(),ф-я_ошиб()) - запуск запроса через $http.get() для получения одного JSON-эл_д-х, может асихронно возвращать ответ
  - .save(об_перем,об_д-х,ф-я_удач(),ф-я_ошиб()) - запуск запроса через $http.post() с передачей об_д-х в теле запроса POST/PUT
  - .delete/.remove(об_д-х_перем,ф-я_удач(),ф-я_ошиб()) - запуск запроса через $http.delete()
- Методы одного об созданного фабрикой (об=new Фабр() ), возвращающей $resource()
  - об.$save() - запуск запроса через $http.post() с передачей об_д-х в теле запроса POST/PUT
  - об.$delete() - запуск запроса через $http.delete()
  - .query(об_парам,ф-я_удач(),ф-я_ошиб()) - запуск запроса через $http.get() для получения массива эл_д-х
  - .get(об_парам,ф-я_удач(),ф-я_ошиб()) - запуск запроса через $http.get() для получения одного эл_д-х
$q - служба для выполнения асинхронных ф-ий в синхнонном режиме - создание отложенных заданий
- .defer() - создание об отложенного задания (для выполнения в будущем)
  - .promise - св-во хранит об_promise результата выполнения отложенного задания
    - .then(ф-я_success(об_ответ), [ф-я_error(об_ответ)], [ф-я_notify(об_ответ)]) - установка обработчиков успеха [и ошибки] (если then() вызывать нескольно подряд, все ф-ии будут выполняться по очереди), возврат тоже об_promise
    - .then(..) - ..
    - .finally(ф-ия()) - промежуточный запуск ф-ии перед выполнением асинхронных ф-ий далее
    - .catch(ф-ия()) - запуск ф-ии ошибки, аналог .then(null,ф-я(..))
  - .resolve(об_ответ) - запуск в об_promise ф-ии успешного завершения - ф-я_success со значением об_ответ
  - .reject(об_ответ) - запуск в об_promise ф-ии неудачного завершения - отвергает promise (тоже $q.reject)
  - .notify(об_ответ) - запуск в об_promise ф-ии
- .reject(об_ответ) - запуск ф-ии неудачного завершения - создает отвергнутый promise (применяют для перехода в неудачный результат следующего then() )
- .resolve(об_ответ) - запуск ф-ии удачного завершения - создает отвергнутый promise (применяют для перехода в неудачный результат следующего then() )
- .all(масс_promise) - формирует одного общего promise из массива разных promise, если хоть один имеет неудачу - результат неудачный
- .race(масс_promise) - формирует одного общего promise из массива разных promise, если хоть один имеет неудачу - результат неудачный
- .when(синхр_значение/promise) - формирует аналогию promise из значения синхронной ф-ии, применяют для вставки в $q.all([..])
- $q(ф-ия(перрем_успех,перем_отказ){перем_успех(данные_успех);перем_отказ(данные_отказ)}) - короткая запись возвращает promise
$timeout(ф-я[, N-задерж][, true(ум)/false- отмена вызова apply()]) - обертка для window.setTimeout, предпочтительнее т.к. обновляет DOM с помощью $apply()
$timeout.flush - переход к следующему циклу, запускает $timeout при отсутствии задержки
$timeout.cancel(promise) - отмена вып. ф-ии возвр t если задача не выполн
$filter("имя_фильтра")(об,[арг1,арг2,..]) - служба (для внедрения ф-ии фильтра в любой модуль или применение в других фильтрах) поиска зарегистрированого фильтра и применения вне html [с аргументами]
имя_фильтраFilter(об,[арг1,арг2,..]) - служба, все зарегистрированные фильтры имеют синоним службы $filter("имя_фильтр") без поиска с окончанием Filter
использование в адресной строке пути после # не перегружает страницу, в HTML5 можно добиться того же и не применять # (но тогда сервер должен принимать пути: /static - передача стат. ф-лов, /databases - управление данными, другие - передача начальной страницы )
$locationProvider - служба настройки восприятия адресов
- .html5Mode(true/false(ум)) - логика применения путей после знака # или режим html5 - без
- .hashPrefix("строка префикса") - (ум-"#") установка префикса для не HTML5
$location - служба привязана к адресной строке браузера (применяет window.location), но не перегружает страницу (перегружает только-$window.location.href)
- .absUrl() - получить абсолютный URL (с именем сайта) но с закодироваными сегментами
- .protocol() - получить строку протокола: 'http:'/'ftp:'/..
- .host() - получить хост (хост:порт/путь..?..)
- .port() - получить N-число порта
- .url(["URL"]) - установить относительный (возвр-$location)/определить весь адрес без имени сайта
- .path(["/путь"]) - установить путь(возвр-$location)/определить строку пути до ? (применяют для отслеживания изменения пути в $scope.$watch() )
- .search() - получить об из сроки поиска (передаваемые данные)
- .search('срок_поиск'/об_д-х_поиска , 'значение'/null) - установка строки поиска/удаление
- .hash([значен]) - установить/определить хэш URL (..#хэш)
- .replace() - запрос на замену текущего URL (с записью в историю) на измененный URL (страница не меняется), изменения произойдут после $digest
$anchorScrollProvider.disableAutoScrolling() - отключение авто-переходов браузера по кэшу (путь#кэш)
$anchorScroll() - ручной переход к эл (следит за значением $location.hash()), когда выключен автоматический переход $anchorScrollProvider.disableAutoScrolling()
Работа с маршрутами требует подключения скрипта angular-route.js и добавить зависимость модуль ngRoute
$routeProvider - провайдер для установки маршрутов в методе настройки (.config()) и загрузку шаблона для директивы ng-view
- when("путь1",об_настр1) - назначение для пути - путь к ф-лу (их много)
- .otherwise(об_настрN) - при неизвестном пути (по умолчанию), он один (обычно перенаправляют)
- содержание об_настр
  - templateUrl:"путь_ф-ла" - соотверствие для пути ф-ла шаблона
  - template:"html-шаблон" - соотверствие для пути строки шаблона (вместо templateUrl)
  - redirectTo:"путь" - перезапуск пути заново по умолчанию (ни один путь не совпал)
  - controller:"имя_контр" - установка по маршруту собственного контроллера для шаблона, создающий новый нонтекст
  - resolve:{имя1:ф-я1,имя2:ф-я2,..} - вычисление всех функций с асинхронными зависимостями (ф-я(асинхр_завис1,..){..return знач}), после их успешных выполнений (при ошибке - маршрут не отображается, а адрес остается) будет отображен маршрут (значения прем могут быть преданы в контроллер для внедрения как зависимости)
  - reloadOnSearch:true/false - перезагрузка страницы при не найденного пути
  - пользов_св-во1:знач1 - добавление пользовательских св-в (можно сохранить ссылку на шаблон и подключить в ng-include как $route.current.пользов_св-во1)
- принятие динамического пути
  - /аа/бб/:имя_перем - принятие пути с присвоением имя_перем=значен в $routeParams
  - /аа/бб/*имя_перем - принятие пути с присвоением имя_перем=значен в $routeParams или /аа/бб/
- передача динамического пути в ng-href
  - /аа/бб?имя=значен - передача значения из HTML как св-ва :"..бб?имя={{значен}}.."
  - /аа/бб/значен - передача значения из HTML как часть пути :"..бб/{{значен}}.."
- варианты создания ссылок для пути маршрутизации
  - a href="путь"../a - гипер ссылка (для режима html5 аттрибут target определяет ссылку на внешний ресурс)
  - ТЭГ/a ng-click="ф-я()"../ТЭГ - обработчик клика любого тэга (тэг a при отсутствии href переходить не будет), где $scope.ф-я(){.. $location.path("путь")..}
  - a ng-href="путь с вставкой {{перем}}"../a - гипер ссылка с динамическим путем
$routeParams - служба является об со всеми перем из маршрута: /:имя_перем или ?имя_перем=знач
$route - сервис маршрутизации для получения д-х о маршруте (требует подключения скрипта angular-route.js и добавить зависимость модуль ngRoute)
- .current.params - синоним $routeParams ($route.current.params.имя_перем - переменные запроса)
- .current.пользов_св-во1 - получение значения св-ва пользователя сохраненного в об переданном $routeProvider
ui-router - модуль системы работы с вложенными маршрутами (есть версии для angular_1.x, angular_2+, React)
$cacheFactory - служба для хранения в памяти , чтобы не загружать шаблоны повторно, они сохраняются в памяти (для безопасности неоходимо удалять шаблоны имеющие доступ к конфид.инф.), это об хранит ключ-"путь\ф-л_шаблон", значен-текст шаблона
- .create("имя",[об_настр]) - создание в памяти именной ячейки, возвращает об_кэша
- об_кэша.info() - возврвщает имя, размер, об_настр
- об_кэша.put("ключ","значение") - запись информации в кэш
- об_кэша.get("ключ") - получить значение из кэша по ключу
- об_кэша.remove("ключ") - удалить значение из кэша по ключу
- об_кэша.removeAll() - удалить все значения из кэша
- об_кэша.destroy() - удалить кэш
$templateCache - кэш хранит HTML-шаблоны, чтобы не загружать шаблоны повторно, они сохраняются в памяти (для безопасности неоходимо удалять шаблоны имеющие доступ к конфид.инф.), это об хранит ключ-"путь\ф-л_шаблон", значен-текст шаблона
- .put("путь\ф-л_шалон","текст шаблона") - предварительная запись нового шаблона в кэш без применения тега script (для непосредственной записи в шаблон надо экранировать кавычки:\' или \")
script type="text/ng-template" id="путь/ф-л_шаблона"текст шаблон/script - начальная загрузка шаблона как дочерний в основном шаблоне (где подключен модуль ng-app), шаблон сохраняется в $templateCache, применяют как вызов templateUrl:путь/ф-л_шаблона
$sanitize('html-строка') - служба-функция возвращает преобразование HTML-разметки применяемое в диррективе ng-bind-html (требуется загрузка angular-sanitize.js и внедрения модуля ngSanitize)
$compile("html-строка"/обертка_эл) - служба (применяемая в диррективах и в тестировании дирректив) для компиляции html-строки c привязками к контексту, получает ф-ю для связывания с об контекста - имя_ф-ии(scope)
1. имя_ф-ии(об_контекста) - получение об_эл с подставленными значениями переменных контекста
2. имя_ф-ии(об_контекста,ф-я(об_эл_копия){использовать об_эл_копия}) - получение об_эл и использовение клонов (как в директиве ng-repeat)
$transclude - служба-функция включения оригинального контента в шаблон создаваемый диррективой, $transclude() - возвращает внедряемый об_эл (внедряется в контроллер диррективы)
$interpolateProvider - провайдер настройки интерполятора (нотации в HTML начала и конца:{{выражение}} )
- .startSymbol("символы") - символы начала выражения
- .endSymbol("символы") - символы завершения выражения
$interpolate("html-строка с {{перем}}") - служба (применяется в диррективах и выражениях интерполяции) интерполяции принимает строку с наличием "{{перем}}", возвращает ф-ю(контекст) принимающая контекст и возвращающая строку с значениями из контекста
Интернационализация1
- $locale - служба содержит константы форматов и названий для отображения даты, времени, чисел, валюты (ngLocale - модуль зависимости, необходимо подключение скрипта "/i18n/angular-locale-язык-страна.js", ум- 'en-us')
  - .id - получить строку с кодировкой подключенной локали в виде: "язык_страна"
  - .DATETIME_FORMATS - об содержит массивы слов используемых в форматах даты и времени фильтра date
    - .DAY / .SHORTDAY - массив строк дней недели/сокр
    - .MON / SHORTMONTH / STANDALONEMONTH - массив строк месяцев/сокр
    - .WEEKENDRANGE - массив индексов выходных дней (5,6)
    - .fullDate/longDate/medium/mediumDate/mediumTime/short/shortDate/shortTime - форматы дат и времени, применяемых в фильтрах date:имя_формат
  - .NUMBER_FORMATS - об константы символов используемых в форматах чисел и валют (фильтры: number, currency)
    - CURRENCY_SYM - строка с сокращенным словом/знаком местной валюты (мы-"грн", США-"$")
    - DECIMAL_SEP - знак отделения дробной части (мы-",", США-".")
    - GROUP_SEP - знак отделения трех цифр (мы-пробел, США-",")
    - PATTERNS - два об с константами для форматирования чисел, валюты
- Варианты подстановки переведенных текстов
  1. создание фильтра с массивом разных переводов - только для малого количества фраз, т.к. падает производительность
  2. создание диррективы с массивом разных переводов - сложно применять для аттрибутов тэгов
  3. создание набора файлов шаблонов с разными переводами
- Подготовка шаблонов с помощью grunt.js
  1. Передача на сервер информации о локали
    - часть пути в запросе - указание в строке запроса пути локали: "..\ru-ru\.." или "..\en-us\.."
    - наличие заголовка запроса Accept-Language - при обработке запроса надо проверять заголовок
  2. Настройка в динамическом шаблоне подключения локали script src="../angular-locale_<%=перем_локаль%>.js"/script
  3. Настройка в динамическом шаблоне тэга BASE для доступа к ресурсам base href="/<%=перем_локаль%>/"/base, тогда для общих ресурсов надо указать абсолютный путь
  4. Переключение на новую локаль -
Интернационализация2 (создание своего словаря)
- $translate - служба содержит константы форматов и названий для отображения даты, времени, чисел, валюты (pascalprecht.translate - модуль зависимости, необходимо подключение скрипта "angular-translate.js")
- $translateProvide.translations('язык',{ключ1:'значение1',..}) - составление словаря на разных языках
- $translateProvide.preferredLanguage('язык') - первоначальный язык
- $translate.uses('язык') - переключение языка
- {{ 'ключ' | translate }} - отображение
$parse - служба для связывания эл ввода с моделью (применен в модуле ngModel)
- $parse(об_диррект_эл)(контекст) - ф-я чтения из контекста (для передачи в эл: el.text())
- $parse(об_диррект_эл).assign(контекст, значение) - ф-я записи в контекст (при событии "input" и получения значения из элемента el.val())
$sce - служба для защиты контента от внедрения опасного кода
- getTrusted(тип,'строка') / getTrusted[тип]('строка') -
- parseAs(тип,'строка') / parseAs[тип]('строка') -
- trustAs(тип,'строка') / trustAs[тип]('строка') -
- Константы типов
  - $sce.HTML
  - $sce.CSS
  - $sce.URL
  - $sce.RESOURCE_URL
  - $sce.JS
$exceptionHandler - служба выдачи сообщения об ошибках на консоль
$controller(имя_контроллера,{$scope:об_контекст}) - получение модели указанного контроллера для тестирования (об_контекст - новый контекст $rootScope.$new() или дочерний )
$event - служба-событие переданное в ф-ю-обработчик событий
- .clientX, .clientY - координаты клика относительно страницы
- .type - имя события
Внедрение в HTML ng-дирректив (имена из контекста применяют без $scope)
- Варианты внедрения дирректив
  - директва/директва - как элемент HTML
  - тэг директва="значен"/тэг - как аттрибут у любого тэга
  - тэг class="директва : значен"/тэг - как значение класса
  - !-- directive: директва значен -- - как комментарий
- способы именования дирректив в аттрибутах "ngИмя":
  - ng-имя, ng:имя, ng_имя - дефис/двоиточие/подчеркивание
  - x-ng-имя, x-ng:имя, x-ng_имя) - предварение имени x- и дефис/двоиточие/подчеркивание
  - data-ng-имя, data-ng:имя, data-ng_имя - для прохождения валидности предварение имени data- и дефис/двоиточие/подчеркивание
- ТЭГ ng-app - внедрение в контейнер общей функциональности модуля angular, внутри создается корневой angular-контекст $rootScope (для IE8 добавляют id="ng-app")
- ТЭГ ng-app="имя_модуля" - внедрение в эл функциональности angular-модуля пользователя "имя_модуля", внутри создается корневой angular-контекст $rootScope
- ТЭГ ng-init="JS-инициализация" - дирректива инициализации в angular-контексте пременных со значением (но загромождает HTML-код)
- ТЭГ ng-controller="имя_контроллера [as псевдоним _контроллера]" - дирректива запуска angular-контроллера (как класс, где вместо this - $scope) для создания нового контекста(модели) и инициализации: переменные, методы, новый контекст в дочернем эл становится дочерним контекстом с наследованием от родителя [применение псевдонима контроллера]
- ТЭГ ng-repeat="имя_перем/(пер_свой,пер_знач) in имя_массива/имя_об [:фильтр]" - дирректива циклического повторения текущего эл с созданием новых контекстов и создание в нем имя_перем со значением эл массива, цикл постоянно обновляется, содержимое в тэге тоже повторяется, при описании массива с фильтром его можно присвоить переменной
  - $index - N индекс эл.массива/счетчик свойств об (можно применить $index%2 для чередования класса)
  - $first - true/false признак первого эл.масс
  - $middle - true/false признак эл.масс не первого и не последнего
  - $last - true/false признак последнего эл.масс
  - $even - true/false признак четного эл.масс
  - $odd - true/false признак не четного эл.масс
- ТЭГ_1 ng-repeat-start="имя_перем/(пер_свой,пер_знач) in имя_массива/имя_об" / end - дирректива циклического повторения начиная с текущего эл с созданием новых контекстов и создание в нем имя_перем со значением эл массива, цикл постоянно обновляется, на итерации повторяется набор тэгов от -start до -end
  ТЭГ_N ng-repeat-end - дирректива завершения циклического повторения
- ТЭГ ng-cloak - (желательный к применению) скрытие элемента на период до запуска Angular и установки всех динамических значений (с помощью CSS - display:none), после аттриут удаляется
- ТЭГ ng-show="лог.выраж" - выполнение выраж контекста, при возврате true эл отображаетя, добавляет новый контекст, иначе эл скрывается (css - display:none)
- ТЭГ ng-hide="лог.выраж" - выполнение выраж контекста, при возврате true эл скрывается (css - display:none)
- ТЭГ ng-switch="выраж" - выполнение выраж контекста для последующего сравнения
  - ТЭГ ng-switch-when="значение1" - сравнение значения с вычесленным значением, при соответствии - вставляется в DOM (таких блоков несколько), иначе не вставляется
  - ТЭГ ng-switch-default - вставляется в DOM при не соответствии ни одного значения
- ТЭГ ng-if="лог.выраж" - выполнение выраж контекста, при возврате true эл вставляется в DOM
- ТЭГ ng-include="JS_выраж_строки_файл" / " 'html-файл' " / "лог.выраж&&'html-файл1' || 'html-файл2' " / "id_шаблона" - вычисление строки с именем html-файлоа для загрузки его в содержание контента, добавляет новый контекст
- app.config(function($sceDelegateProvider){$sceDelegateProvider.resourceUrlWhitelist([путь1,...] ) } ) - добавление пути из другого сервера для разрешения доступа
- ng-include src="выраж_строки_файл / id_шаблона" - заменяется весь тэг, работает так же как directive()
- ТЭГ ng-view - подставление в контент значения от маршрутизатора $routeProvider, такая дирректива должна быть одна
- ng-view/ng-view - подставление в контент значения от маршрутизатора $routeProvider, такая дирректива должна быть одна
- ТЭГ ng-class="{'имя_класса':лог.выраж,..}" - выполнение выраж контекста, при возврате true добавляется класс
- ТЭГ ng-class-even/odd="'имя_класса'" - (для списков) установка класса для четных/нечетных итерраций
- form ng-submit="NG ф-я" - выполнение выраж/ф-я() контекста при клике на любой кнопке/Enter_на_поле (обычно выполняют запрос, помещают только одну кнопку/поле)
- ТЭГ ng-click="NG ф-я" - выполнение выраж/ф-я(..,[$event]) контекста при клике на кнопке мыши
- ТЭГ ng-dbl-click="NG ф-я" - выраж/ф-я(..,[$event]) контекста при кликании мышкой
- ТЭГ ng-mousedown="NG ф-я" - выраж/ф-я(..,[$event]) контекста при нажатии кнопки мыши
- ТЭГ ng-mouseup="NG ф-я" - выраж/ф-я(..,[$event]) контекста при отпускании нажатой кнопки мыши
- ТЭГ ng-mouseenter="NG ф-я" - выраж/ф-я(..,[$event]) контекста при прикосновении курсором мышки к эл
- ТЭГ ng-mouseleave="NG ф-я" - выраж/ф-я(..,[$event]) контекста при отсоединении мышки от эл
- ТЭГ ng-mousemove="NG ф-я" - выраж/ф-я(..,[$event]) контекста при движении курсора мышки внутри эл
- ТЭГ ng-mouseover="NG ф-я" - выраж/ф-я(..,[$event]) контекста при курсор мышки над эл
- ТЭГ ng-keydown="NG ф-я" - выраж/ф-я(..,[$event]) контекста при нажатии любой кнопки
- ТЭГ ng-keyup="NG ф-я" - выраж/ф-я(..,[$event]) контекста при отпускании нажатой кнопки
- ТЭГ ng-keypress="NG ф-я" - выраж/ф-я(..,[$event]) контекста при нажатии и отпускании любой кнопки
- ТЭГ ng-change="NG ф-я" - выраж/ф-я(..,[$event]) контекста при изменении модели, запускается вместе с ng-model
- ТЭГ ng-focus="NG ф-я" - выраж/ф-я(..,[$event]) контекста при получении фокуса
- ТЭГ ng-blur="NG ф-я" - выраж/ф-я(..,[$event]) контекста при потере фокуса
- ТЭГ ng-paste="NG ф-я" - выраж/ф-я(..,[$event]) контекста при вставке
- ТЭГ ng-cut="NG ф-я" - выраж/ф-я(..,[$event]) контекста при вырезании
- ТЭГ ng-copy="NG ф-я" - выраж/ф-я(..,[$event]) контекста при копировании
- a ng-href="путь с вставкой {{перем}}"../a - гипер ссылка с динамическим путем
- a ng-href="выражение"../a - гипер ссылка с вычисляемым путем
- ТЭГ ng-attr-имя_аттр="{{выражение}}"/ТЭГ - внедрение интерполяции {{}} в значении аттрибута
- ТЭГ ng-bind="выражение[|фильтры]"/ТЭГ - (желательный к применению) эквивалент привязки {{}}, но занимает весь эл, более эфективный
- ТЭГ ng-bind-html-unsafe="выражение"/ТЭГ - эквивалент привязки {{}}, без экранирования уголков - создает тэг
- ТЭГ ng-bind-html="выражение"/ТЭГ - эквивалент привязки {{}}, без экранирования уголков - создает тэг (необходимо подключить скрипт angular-sanitize.js и в модуль добавить службу "ngSanitize")
- {{выражение[ | фильтр1:аргумент | фильтр2:аргумент ..]}} - привязка к точке HTML-документа выражения из angular-контекста, отображает значение (по аналогии шаблонизатора), уголки в строках переменных преобразуются в набор символов [с применением фильтров] (но количество текста текущего тэга минимизируют для экономии памяти)
- фильтры - выполняются при любом изменении страницы
  - для строки
    - uppercase - текст в верхнем регистре
    - lowercase - текст в нижнем регистре
    - limitTo:N-число/'N-число' - выделение N первых (при -N - последних) строки
    - linky - адреса внутри текста преобразует в HTML-ссылки a href='ссылка'ссылка/a (необходимо подключить скрипт angular-sanitize.js и в модуль добавить службу "ngSanitize")
  - для чисел
    - currency[:"символы"] - формат числа с 2-я цифрами после запятой со знаком локальной валюты [с указанием символов валюты(ум-$)]
    - number:N-число - число с N цифрами после запятой (ум-2)
  - для даты (для значений об_Date(JS)/число (мс)/"число"(мс)/"строка_даты")
    - 'yyyy' - 4 цифры для вывода года (например, 1 => 0001, 2010 => 2010)
    - 'yy' - 2 последние цифры года (00-99). (пример, 2001 => 01, 2010 => 10)
    - 'y' - 1 число для вывода года (например, 1 => 1, 199 => 199)
    - 'MMMM' - месяц в длинном формате (January-December)
    - 'MMM' - месяц в трехбуквенном формате (Jan-Dec)
    - 'MM' - месяц цифрами, с ведущим нулем (01-12)
    - 'M' - месяц цифрами, без ведущего нуля (1-12)
    - 'dd' - день в месяце, с ведущим нулем (01-31)
    - 'd' - день в месяце, без ведущего нуля (1-31)
    - 'EEEE' - День недели в длинном формате,(Sunday-Saturday)
    - 'EEE' - День недели в коротком формате, (Sun-Sat)
    - 'HH' - Час, с ведущим нулем (00-23)
    - 'H' - Час без ведущего нуля (0-23)
    - 'hh' - Час, с ведущим нулем в 12-ти часовом формате (01-12)
    - 'h' - Час без ведущего нуля в 12-ти часовом формате (1-12)
    - 'mm' - Минуты с ведущим нулем (00-59)
    - 'm' - Минуты без ведущего нуля(0-59)
    - 'ss' - Секунды с ведущим нулем (00-59)
    - 's' - Секунды без ведущего нуля (0-59)
    - 'a' - Указатель am/pm для 12-ти часового формата.
    - 'Z' - 4 цифры (плюс знак), представляющие сдвиг временной зоны (часовой пояс) (-1200+1200)
    - 'medium' - эквивалент 'MMM d, y h:mm:ss a' для локализации en_US (пример, Sep 3, 2010 12:05:08 pm)
    - 'short' - эквивалент 'M/d/yy h:mm a' для локализации en_US (пример, 9/3/10 12:05 pm)
    - 'fullDate' - эквивалент 'EEEE, MMMM d,y' для локализации en_US (пример, Friday, September 3, 2010)
    - 'longDate' - эквивалент 'MMMM d, y' для локализации en_US (пример, September 3, 2010)
    - 'mediumDate' - (ум)эквивалент 'MMM d, y' для локализации en_US (пример, Sep 3, 2010)
    - 'shortDate' - эквивалент 'M/d/yy' для локализации en_US (пример, 9/3/10)
    - 'mediumTime' - эквивалент 'h:mm:ss a' для локализации en_US (пример, 12:05:08 pm)
    - 'shortTime' - эквивалент 'h:mm a' для локализации en_US (пример 12:05 pm)
  - для массивов (для ng-repeat), перем=(имя_масс:фильтр) - создание переменной с отфильтроваными эл
    - limitTo:N-число/'N-число' - выбор N первых (при -N - последних) эл масс
    - json - ({{}}-по ум) текстовое отображение значения об, масс
    - filter:значение_фильтр - отображение эл масс если значение == значение1
      - '[!]подстрока' - подстрока [не] входит в эл.масс/знач.св.об.эл.масс
      - {имя_св1:'подстрока1'/значен1,..} - отбор об.эл.масс имеющих св-ва содержащие подстроки/целое значение(если не строка)
      - {$:'подстрока1'..} - ($ - обозначает любое свойство) отбор об.эл.масс по подстроке для любого св-ва
      - имя_ф-я - отбор при возврате true, где ф-я(перем) контекста плучает эл
    - orderBy:знач_сорт - сортировка значений массива объектов
      - [-]'имя_св-ва'[:лог_обрат_сорт] - сортирвка по св-ву элемета-об [true/false(ум) - по возрастанию/убыванию]
      - ф-я(пер_эл1,пер_эл2) - возврат результат сравнения
      - имя_масс - масс ф-ий сортировки (следующая ф-ия для приравненых эл)
- ng-form name="имя_формы".../ng-form / ТЭГ ng-form="имя_формы" - эл формы который можно вкладывать друг в друга для проверки валидности (можно применять внутри ng-repeat), автоматически подключает контроллер ngFormController (name="имя" - в контекст добавляет об "имя" для проверки валидации)
- ТЭГ ng-model="имя_перем" - дирректива двусторонней привязки (при изменении ввода - обновление переменной контекста и весь DOM) INPUT/TEXTAREA/SELECT, (обычно откл пров браузера - form novalidate), автоматически подключает контроллер ngModelController выполняющий проверки валидности и изменение классов (name="имя" - в об "имя_формы" добавляет об "имя" для проверки валидации)
  - input type="text" или textarea - допускает любой текст
  - input type="url" - вносит изменения в модель если ввод соответствует рег.выр. url
  - input type="email" - вносит изменения в модель если ввод соответствует рег.выр. email
  - input type="number" - вносит изменения в модель если ввод соответствует рег.выр. number
  - input type="checkbox" - логическое значение в модели true/false
  - input type="radio" - набор кнопок объединяются при одинаковой переменной модели разном аттрибуте value
  - select - открывающийся список из эл option/сгенегированые ng-option
  - input type="hidden" - применяют только для обычных запросов на сервер
  - ng-pristine / ng-dirty - не затронуто вводом / изменено
  - ng-valid / ng-invalid - введенное значение допустимо/не допустимо
  - ng-empty/ng-not-empty - значение отсутствует/присутствует
  - ng-(valid/invalid)-проверка - отображение допустимости для каждой проверки
  - ng-touched/ng-untouched - пользователь прикасался/не прикасался
  - $name - строка имя эл/формы
  - $parsers - (для эл) массив ф-ий (вида ф-я(val){..return val}) выполняемых по очереди при изменении в поле ввода
  - $formatters - (для эл) массив ф-ий (вида ф-я(val){..return val}) выполняемых по очереди при изменении модели
  - $setValidity - (для эл) массив ф-ий (вида ф-я(val){..return val}) выполняемых по очереди при изменении модели
  - $viewValue / $modelValue - (для эл) значение переданое в элемент/модель
  - $touched / $untouched - (для эл) логич.значение
  - $valid / $invalid - логич.значение
  - $pristine / $dirty - логич.значение
  - $viewChangeListeners - (для эл)
  - $options - (для эл)
  - $asyncValidators / $validators - (для эл)
  - $submitted - (для формы)
  - $error - об со св-ми всех не пройденных допустимостей
  - "имя_эл" - (для формы) весь об проверок эл
  - ng-list[="разделит"] - для текстового поля передает в модель массив из строки с разделителем (ум - ,)
  - required - при пустом поле - не проходит валидность, отсутствует в модели
  - ng-required="лог.значение" - вычисление возможности проверки на отсутствие д-х
  - ng-minlength=N - при длине строки меньше N - не проходит валидность, отсутствует в модели
  - ng-maxlength=N - при длине строки больше N - не проходит валидность, отсутствует в модели
  - ng-pattern="рег.выраж" - при не соответствии рег выр - не проходит валидность, отсутствует в модели
  - ng-true-value="строка1" ng-false-value="строка1" - (для checkbox) установка строчных значений модели вместо логических
  - value=значен - (для radio,option) установка разных значений в модели
  - ng-selected="выражение" - (для option)выполняемое выражение/ф-я при выборе эл меню
  - ng-option=".." - (для select) генерация пунктов меню из массива состоящего из об, выбирая одно из свойств
    - "перем_об.свойство for перем_об in масс_об" - пунктом меню будет св-во каждого об из массива
    - "ф-я(перем_об) for перем_об in масс_об" - пунктом меню будет вычисляться из каждого об из массива
    - "перем_об.свойство as ф-я(перем_об) for перем_об in масс_об" - пунктом меню будет св-во каждого об отобранных из массива по фильтру ф-ии(перем_об) возвращающих true
    - "перем_об.свойство/ф-я(перем_об) group by перем_об.свойство for перем_об in масс_об" - пунктом меню будет св-во/ф-я каждого об из отсортированного массива по св-ву об
    - "перем_ключ/перем_знач for (перем_ключ,перем_знач) in об" - пунктом меню будет значение каждого св-ва об
  - multiple - добавление множественного выбора
  - ng-multiple="лог.выраж" - высичление разрешения множественного выбора
  - ng-disabled="лог.выраж" - выполнение выраж контекста, при возврате true эл ввода отключается
Анимация
- script type="text/javascript" src="...angular-animate.js" - подключение библиотеки для добавления дополнительных классов во время анимации
  - ngRepeat - enter, leave, move
  - ngView - enter, leave
  - ngInclude - enter, leave
  - ngSwitch - enter, leave
  - ngIf - enter, leave
  - ngClass / class= - add, remove
  - ngShow - add, remove
  - ngHide - add, remove
Мобильные устройства
- script type="text/javascript" src="...angular-touch.js" - подключение библиотеки для добавления дополнительных сервисов
  - ТЭГ ng-swipe-right='выражение' - выполнение выражения при сдвиге вправо
  - ТЭГ ng-swipe-left='выражение' - выполнение выражения при сдвиге влево
  - start - начало касания, передает начальные координаты {x:N,y:N}, далее его перехватывает событие mousedown или touchstart
  - move - движение с касанием, передает дельту движения {x:N,y:N}, далее его перехватывает событие mousemove или touchmove
  - end - остановка движения и отрыв пальца, передает дельту движения {x:N,y:N}, далее его перехватывает событие mouseup или touchend
  - cancel - завершение, далее его перехватывает событие touchcancel
- script type="text/javascript" src="...angular-gestures.js" - подключение библиотеки для добавления дополнительных сервисов мультикасанием, перетягивание, щипок, наклон экрана
Тестирование
- script type="text/javascript" src="...angular-mocks.js" /script - подключение библиотеки только для тестирования

Angular 2+ / TypeScript - фреймверк для создания приложений (подобен AngularJS 1.x)

@angular/cli - ускоренная разработка Typescript-приложения

npm install -g @angular/cli - сохранение модуля для генерации приложения
ng new имя_прил - создание папки имя_прил с Typescript-приложением с паками и файлами, при создании предлагается выбрать css-препроцессор: sass, less, stilus, пользовательский
cd имя_прил - переход в папку приложения
ng help - просмотр помощи
ng serve [ключи] - запуск приложения доступного по адресу http://localhost:4200
- --open - автоматическое открытие приложения в баузере
- --host 0.0.0.0 - изменение адреса
- --port N - изменение порта
ng g[enerate] component имя_комп [ключи] - создание компонента: создает папку имя_комп в /src/app с файлами *.ts, *.html, *.css, *.spec.ts, необходимо внедрить компонент имя_комп указанного в *.ts св-ве декоратора selector
- --inline-styles - ключ определяет таблицу стилей не в файле, а встроенную
ng g[enerate] component имя_модуль/имя_комп - создание компонента добавленный в модуль: создает папку имя_комп в /src/app с файлами *.ts, *.html, *.css
ng g[enerate] directive имя_дирек - создание диррективы: создает в /src/app с файл *.ts, *.spec.ts, добавляет функционал аттрибутом
ng g[enerate] pipe имя_комп - создание фильтра: создает папку имя_комп в /src/app с файлами *.ts, *.html, *.css
ng g[enerate] service имя_серв - создание сервиса (единый объект передающий свои свойства и методы другим классам): создает файл /src/app с файлами *.ts
- --module=app - автоматическая установка зависимости от сервиса в основной модуль
ng g[enerate] class имя_кл - создание класса: создает папку имя_кл в /src/app с файлами *.ts
ng g[enerate] guard имя_guard - создание защитника url: создает имя_guard файлы *.ts, *.spec.ts, предусмотрен выбор функцый canActive, canLoad,
ng g[enerate] interceptor имя_intc - создание перехватчика сообщений типа Observable: создает имя_intc файлов *.ts, *.spec.ts
ng g[enerate] interface имя_intrf - создание интерфейса: создает папку имя_intrf в /src/app с файлами *.ts
ng g[enerate] enum имя_комп - создание перечисления: создает файл имя_комп.ts
ng g[enerate] module имя_модуль - создание модуля: создает папку имя_комп в /src/app с файлами *.ts, *.html, *.css
- --module=app - автоматическая установка в основном модуле зависимости в св-ве imports
- --flat - отказ от создания собственной папки
- --routing - добавление Routing-модуля с дополнительными путями маршрутизации
style.css - основная таблица стилей, можно подключить bootstrap: @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Организация приложения вручную
- Установка модулей фреймверка
  - модули фреймверка Angular 2
    - npm install @angular/core --save - основной модуль Angular содержит общие диррективы и компоненты
      - Component - декоратор компонента
      - Input - декоратор входного свойства класса, значение которого будет получено через входящий атрибут родительского шаблона
      - Pipe - декоратор класса для создания фильтра
      - PipeTransform - интерфейс создания фильтра
      - Directive - декоратор класса для создания собственных дирректив
      - OnInit -
      - Host - декоратор аргумента метода для поиска зависимости в родительском компоненте
      - Optional - декоратор аргумента метода при неудачном поиске зависимости не создает исключение, а возвращает null
      - provide - функция для переименования зависимости: provide(псевдоним,{useClass:зависимость}/{useFactory:ф-я возвращ зависимость})
      - Injectable - декоратор класса становится способный получать зависимости
      - HostBinding - декоратор свойства диррективы, если св-во true - добавляет указанный класс
      - HostListener - декоратор метода директивы создает из метода слушателя события
      - Output - декоратор свойства класса, значение которого будет передаваться родителю с помощью события EventEmitter как выходное св-во
      - EventEmitter - класс, создает объекты типа EventEmitter<тип д-х> умеющий создавать события, имеет методы emit(д-е)-отправка события в выходное св-во родительского шаблона,subscribe()
      - ViewEncapsulation - об со значениями (.Emulated, .Native, .None) способов внедрения CSS-стилей компонента, для установки в encapsulation
      - enableProdMode - функция включает промышленный режим (нет сообщениц на консоль)
      - ComponentRef -
      - ElementRef - сервис как ссылка на текущий компонент, тек.элемент для диррективы (передается в конструктор el:ElementRef, el.nativeElement - об_эл)
      - ViewChild - декоратор для св-ва имеющего тип компонента
      - ViewContainerRef - тип
    - npm install @angular/common --save - содержит все диррективы, службы и фильтры и их классы
      - APP_BASE_HREF - базовый путь только приложения но не HTML, аналогично тэгу base href="путь": bootstrap(имя_комп,[provide(APP_BASE_HREF,{useValue:'путь'})])
      - LocationStrategy - возможность изменить способ выбора маршрутов: bootstrap(имя_комп,[provide(LocationStrategy,{useClass:значение})])
      - Location - сервис управления адресами и историей (.back()- установка предыдущего адреса из истории)
      - PathLocationStrategy - (ум) значение выбора путей маршрутизатора HTML5
      - HashLocationStrategy - значение выбора путей маршрутизатора с хэшэм: #
      - Control - класс для создания контроля за эл ввода
      - Validators - об содержит набор ф-ий валидации для создания контроля
      - NgControlGroup - класс для создания объединяющих контролей за эл ввода
      - ControlGroup -
      - FormBuilder - для внедрения в компонент через providers, добавляется в constructor
      - HttpClientModule - модуль включается как зависимость для импорта сервиса HttpClient(@angular/common/http)
      - HttpClient - сервис http-запросов (@angular/common/http)
      - HttpHeaders - класс для создания об заголовка в запросах (@angular/common/http)
      - HttpParams - класс для создания об добавляющего данные в строке адреса запроса (@angular/common/http)
    - npm install @angular/forms --save - содержит код для
      - FormsModule - модуль для двойных связываний поля ввода ngModel, импортируют в главный модуль
      - ReactiveFormsModule - модуль для двойных связываний поля ввода ngModel, импортируют в главный модуль
      - FormControl - класс для создания объекта валидации (new FormControl() )
      - FormGroup - класс для создания единого объекта валидации объединяя все поля (перем=new FormGroup({имя1:[нач_знач,new FormControl()],.. }) )
      - FormArray - класс для создания единого массима валидации объединяя все FormGroup
      - Validators - функция валидации,
      - FormBuilder - создатель FormGroup, после внедрения в конструкторе FormBuilder.group({..}), FormBuilder.array([..])
    - npm install @angular/compiler --save - содержит код для компиляции HTML-шаблонов
    - npm install @angular/platform-browser --save - содержит код для привязки к DOM
      - enableDebugTools - функция добавляет инструменты отладки в браузере
      - Title - позволяет изменять заголовок страницы вэб-браузера, внедряют в providers
      - AnimationBuilder - класс для программного внедрения анимации
      - import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - модуль для анимации
    - npm install @angular/platform-browser-dynamic --save - содержит код для загрузки приложений
      - bootstrap - функция создания об корневого компонента
    - npm install @angular/animations --save - содержит функции для анимации
      - trigger -
      - state -
      - style -
      - animate -
      - transition -
    - npm install @angular/http --save - содержит код для связи с сервером, загружается с библиотекой RxJS
      - Http - об для создания потока http-ответов, применяют как зависимость в компоненте
      - Request - об для создания http-запроса
      - RequestOptions - об для создания настроек перед созданием Request-запроса
      - RequestMethod - об со значениями методов http-запроса(.Get, .Post, ...)
      - Response - класс http-ответа
      - HTTP_PROVIDERS - псевдоним массива всех зависимостей для внедрения
    - npm install angular-in-memory-web-api --save - содержит код для имитации сервера с БД (для тестирования) получая запросы и возвращая ответы
      - Http - об
    - npm install @angular/router --save - содержит код для маршрутизации
      - RouterModule - основнрй модуль, распознает ссылки routerLink
      - Routes - тип массива с объектами описывающими маршрут
      - ActivatedRoute - сервис содержит информацию о выбранном маршруте (параметры)
      - Router - об для программного перехода по маршрутам
    - npm install @angular/router-deprecated --save - содержит код для маршрутизации старой версии
      - ROUTER_PROVIDERS - псевдоним массива всех зависимостей для внедрения
      - ROUTER_DRIVERS - псевдоним массива всех зависимостей для внедрения (RouterOutlet, RouterLink)
      - RouteConfig - декоратор главного компонента для настройки маршрутизатора
      - CanActivate,CanDeactivate - декораторы для обработки событий маршрутизатора
      - OnActivate,OnDeactivate - интерфейс для обработки событий маршрутизатора
  - Сторонние модули необходимые для работы приложения
    - npm install es6-shim --save - код для реализации EsmaScript6
    - npm install zone.js --save - контроль изменеий в модулях
    - npm install reflect-metadata --save - поддержка декораторов
    - npm install rxjs --save - библиотека ReactiveX для поддержки асинхронных технологий
      - import 'rxjs/Rx'; - загрузка всей библиотеки
      - import {Observable} from 'rxjs/Observable'; - загрузка одного метода и добавляется в Observable
      - import 'rxjs/add/operator/map'; - загрузка одного метода и добавляется в Observable
      - import { catchError, map, tap } from 'rxjs/operators'; - загрузка методов
      - import { of } from 'rxjs/observable/of'; - функция преобразования значения в тип Observable
      - import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; - загрузка методов
      - import { Subject } from 'rxjs/Subject'; - загрузка методов
      - import { Subscription } from 'rxjs/Subscription'; - загрузка методов
      - import 'rxjs/add/operator/toPromise'; - загрузка класса Primise, метода .toPromise(), превращает ответ запроса в Primise
    - npm install bootstrap --save - таблица стилей
    - npm install -g typescript - компилятор
      tsc --init --experimentalDecorators --emitDecoratorMetedata --target ES5 --module system --moduleResolution node - будет создан файл tsconfig.json
```
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
	"outDir": "built",
	"rootDir": "."
    "sourceMap": false
  },
  "exclude": [  // перечень пропускаемых папок/файлов при компиляции
  "node_modules",
  "typing/main.d.ts",
  "typing/main"
  ]
}
```
    - npm install -g typings - типизирование typescript
    - typings install es6-shim --ambient --save - создает файл typings.json, typings/main.d.ts, typings/browser.d.ts
  - Система автоматической компоновки модулей, необходим только один
    - npm install -g systemjs - позволяет загружать список модулей для приложения
      - (function(){ var pathMapping = { '@angular': 'node_modules/@angular', 'rxjs': 'node_modules/rxjs' }; var packages = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', 'rxjs', 'built' ]; var packagesConfig = {}; packages.forEach(function(packageName){ packagesConfig[packageName] = { main: 'index.js', defaultExtension: 'js' }; }); System.config({ map: pathMapping, packages: packagesConfig }); } )();
    - npm install -g webpack - 2-й вариант, позволяет загружать список модулей для приложения
  - package.json - файл для автоматической загрузки всех нужных модулей с помощью npm (запуск - npm install)
- Компиляция TypeScript (имя.ts) в JavaScript ES5 (имя.js)
  - tsc [--watch] - запускается в папке с файлом имя.ts, создает имя.js в папке указаной в свойстве outDir файла tsconfig.json (ум - built), [--watch постоянно следить за файлами и перекомпилировать]
- Содержание главного HTML-контейнера
  - загрузка скриптов тэгом script
    - node_modules/es6-shim/es6-shim.min.js
    - node_modules/zone.js/dist/zone.js
    - node_modules/reflect-metadata/Reflect.js
    - node_modules/systemjs/dist/system.js
    - node_modules/rxjs/bundles/Rx.js
    - system.config.js
  - Скрипт
    - SystemJS.import('имя_ф-ла.js') - асинхронная загрузка скрипта приложения с помощью модуля System.js
    - SystemJS.import('имя_ф-ла.js').then(function(прем_об){..}) - асинхронная загрузка скрипта и после успеха передача в прем_об экспортируемый об
    - SystemJS.config(об) - настройка загрузчика
      - baseUrl:'путь' - установка пути по умолчанию
      - map:{имя1:'путь'/'файл',...} - установка псевдонимов путей или полного url, применяемых при загрузках
      - meta:...
      - bundles:{имя1:['файл1',...],...} - установка псевдонимов для вариантов загрузки (загружается только один), сохраненных в массивах
      - depCache:{файл_1:['файл1',...],...} - установка массива связанных файлов для загрузки (при загрузке одного ф-ла подгружаются еще массив файлов)
      - packages:{'путь'/'файл':об_настройки,...} - установка для каждого пути/файла собственной настройки
      - packageConfigPath:['путь'/'файл',...] - установка пути/имя_файла для npm-загрузки типа package.json (можно применять * для подстановки любого имени папки/файла)
      - plaginFirst:true/false(ум) - позвляет дописывать к имени файла (через !) файл плагина загрузки вначале/вконце
      - paths:{имя1:'путь1',...} - установка псевдонимов путей, применяемых при загрузках
      - transpiler:тип
      - warnings:true/false(ум) - направление сообщения на консоль
- Локальный сервер
  - npm install lite-server --save - установка локального сервера
  - lite-server - запуск локального сервера
Класс модулей (файл app.module.ts), если в приложении несколько модулей, то главный импортирует через import:
- @NgModule(об) - декоратор основного модуля
  - declarations:массив_классов - массив всех классов компонентов (Component), дирректив (Directive), фильтров (Pipe)
  - imports:массив_классов - массив классов модулей для загрузки (например: BrowserModule, AppRoutingModule, FormsModule)
  - exports:массив_классов - массив классов компонентов для внешнего применения (можно использовать в других модулях)
  - providers:[ИмяService, {provide:'псевдоним', useClass:ИмяService}] - массив классов сервисов, которые будут применять в компонентах (1- внедрение сервиса, 2- внедрение второго экземпляра сервиса с псевдонимом)
  - bootstrap:массив_классов - массив из одного основного класса компонента для запуска приложения (для главного модуля - AppComponent)
- class ИмяModule {} - класс создающий основной модуль, может быть пустым
- Типы модулей по функциональному назначению
  - Angular модули - Библиотеки уже разработанные для Angular-приложений
  - Feature - вмещает логику с данными
  - Core - хранят глобальные зависимости, может подключаться в каждый модуль
  - Shared - содержат компоненты и модели, зависимости
  - Routing - управляет страницами
Класс компонента (файлы: имя.component.[*.ts, *.html, *.css, *.spec.ts])
- @Component(об) - декорирование компонента привязывает соответствие DOM-эл и шаблон (import {Component} from @angular/core)
  - selector:'селектор' - селектор для привязки
  - directives:масс_компонент - добавление фунциональности компонента к шаблону, кроме текущего компонента
  - template:'шаблон' - шаблон angular внедряемый в HTML
  - templateUrl:'имя_ф.html' - шаблон angular внедряемый в HTML из файла (обычно с именем компонента)
  - encapsulation:ViewEncapsulation.Emulated(ум)/.Native/.None - способ внедрения CSS-стилей: ограничено компонентом/встраивание в компонент/не ограничено
  - inputs:масс_свойств - массив имен входных свойств родителя, чтобы у родителя не применять @input
  - outputs:масс_свойств - массив имен выходных свойств текущего компонента , чтобы у родителя не применять @output
  - styles:массив_строк - массив строк CSS-правил, которые внедряются в заголовок, или в шаблон добавить элемент style с правилами
  - styleUrls:массив_строк - массив строк файлов CSS-правил, которые внедряются в заголовок, файлы *.scss, *.less, *.styl будут преобразованны препроцессором в *.css
  - pipes:масс_класс_фильтр - массив классов с фильтрами, подлючаемыми к компоненту
  - providers:масс_зависм - добавление в компонент и его дочерние об зависимостей
  - viewProviders:масс_зависм - добавление только в компонент об зависимостей
  - animations:масс_об_анимации - программирование анимации
- class ИмяКомпонComponent [extends РодитКласс]{..} - класс применяемый в компоненте
  - типы переменных
    - boolean - логический
    - number - числовой
    - string - строковый
    - тип[] / Array<тип> - массив их элементов указанного типа
    - [тип1,тип2,..] - кортеж (tuple), похож на массив из элементов разных типов в усановленном порядке
    - enum имя_типа {имя1,имя2,..} - перечисление, похож на об со значениями 0,1,2,..: =имя_типа.имя (если указать имя=N, имя+1==N+1)
    - any - любой тип как в javascript
    - null, undefined - не обявленный
    - void - без типа
    - тип1|тип2|.. - объединение (union), позволяет присваивать значения указаных типов
    - type имя_типа=тип - псевдоним типа
    - <тип>имя_перем / имя_перем as тип - приведение к указанному типу, когда переменная any/union
    - ([имя:тип,..])=>тип - тип функции с указанными типами аргументов и значения
    - interface имя_типа [extends имя_типа1]{[readonly] имя1:тип1,..} - тип определяющий имена и типы свойств и методов, применяют как тип об или реализации класса через implements [readonly - значение при создании изменить нельзя, аналог у переменных const]
  - [public/private/protected] имя_свойства[ = значение]; - создание свойства
    - public - создание свойства/метода доступного в шаблоне и при в других компонентах (если текущий передан)
    - protected - создание свойства/метода доступного только в методах или вычислениях свойств текущего класса
    - private - создание свойства/метода доступного только в методах или вычислениях свойств текущего класса
  - @Input() / @Input(['псевдоним']) имя_свойства:тип - декоратор "входного" свойства для получеия значения из родительского класса через шаблон [в родительском шаблоне обрашение к псевдониму]: в родителе - текущ.Комп [свойство/псевдоним] = "значение"
  - @Output() / @Output(['псевдоним']) имя_свойства_об_событ:EventEmitter<тип_данных> - декоратор "выходного" свойства , генерирующего событие [в родительском шаблоне обрашение к псевдониму]: в родителе - текущ.Комп (свойство/псевдоним) = "метод($event)"
  - @ViewChild() / @ViewChild('псевдоним') имя_перем:ElementRef - получение об html-элемента (имя_перем.nativeElement) отображенного в шаблоне текущеего компонента для полусения доступа к его свойсвам: в текущем комп. - элем #псевдоним
  - @ViewChild(Класс_комп) имя:Класс_комп - получение в текущем классе об подчиненного компонента для полусения его puclic-свойсв/методов: в текущем комп. - подчин.Комп
  - @ViewChildren(Класс_комп) имя_масс:QueryList<Класс_комп> - получение массива об подчиненных компонентов: в текущем комп. - подчин.Компподчин.Комп
  - constructor([public/private/protected][имя:тип,..]){..} - конструктор выполняемый при создании об и получения зависимых сервисов, где используются this.имя_перем (в это время собственных методов нет), их может быть несколько для разных типов аргументов, super(вход_арг) - выполнение ввода аргумента в конструкторе родительского (наследованого) класса, входяшие аргументы: зависимости
  - constructor(public имя?:тип,..){..} - аргумента может не быть
  - constructor([rivate перем1:ИмяService, @Inject('псевдоним') rivate перем2:ИмяService, ,..){..} - внедрение 2-х сервисов одного типа (т.к сервис - класс типа Singleton)
  - имя_метода([имя:тип,..]): тип/void {..} - метод об, где используются this.имя_перем, доступна внутри об как this.имя_функц()
  - имя_метода([имя?:тип,..]) - возможность отсутствия аргумента
  - имя_метода([имя:тип=знач,..]) - при отсутствии аргумента будет использовано значение по умолчанию
  - имя_метода([..,...имя:тип[]]) - последний аргумент является массив получающий значения из одиночных аргументов
  - get имя_метода() - метод выдающий значение (для закрытой перем) как переменная (=имя_метода)
  - set имя_метода(имя:тип) - метод получающий значение (для закрытой перем) как переменная (имя_функц=)
  - static имя_метода(..) - статический метод класса, запуск Имя_класса.имя_метода()
  - Методы жизненного цикла
    - ngOnInit(){} - ф-ия выполняется сразу после создания компонента со всеми св-ми и методами (интерфейс OnInit - class имя implements OnInit{...} )
    - ngOnChanges(перем: SimpleChanges){} - ф-ия выполняется при изменении входных св-в компонента (в первый раз - до ngOnInit), получает об: {имя_св:{previousValue:знач1,currentValue:знач2},..}, (интерфейс OnChanges)
    - ngDoCheck(){} - ф-ия выполняется при каких-то изменениях, которые класс не может обнаружить (после ngOnInit, ngOnChanges), (интерфейс DoCheck)
    - ngAfterContentInit(){} - ф-ия выполняется после подключения шаблона (один раз после первого ngDoCheck), (интерфейс AfterContentInit)
    - ngAfterContentChecked(){} - ф-ия выполняется после подключения шаблона и проверки изменений (каждый раз после ngDoCheck), (интерфейс AfterContentChecked)
    - ngAfterViewInit(){} - ф-ия выполняется после вычисления шаблона и его потомков (один раз после первого ngAfterContentChecked), (интерфейс AfterViewInit)
    - ngAfterViewChecked(){} - ф-ия выполняется после проверки шаблона и его потомков (каждый раз после ngAfterContentChecked), (интерфейс AfterViewChecked)
    - ngOnDestroy(){} - ф-ия выполняется перед разрушением об, (интерфейс OnDestroy)
Класс диррективы (файлы: имя.directive.[*.ts, *.spec.ts]), похож на компоненты, но нет шаблона
- @Directive(об) - декорирование класса создающего собственные диррективы
  - selector:'селектор' - селектор подключающий диррективу ('имя_тэга', '.имя_класса', '[аттриб=знач]', not(селектор), перчисление через запятую селекторов для подключения только одного)
  - inputs:масс_свойств - массив имен входных свойств
  - outputs:масс_свойств - массив имен выходных свойств
  - host:об - объект со связями с эл может добавлять: события с методами, свойства/аттрибуты со значениями
  - providers: масс_сервисов -
- class ИмяDirective {..} - класс создающий диррективу (похож на компонент но без template)
  - @HostBinding('class.имя_класса') имя_свойства:boolean - декоратор свойства при имя_свойства равном true, добавляет подчиненному элементу класс имя_класса и можно програмно управлять этим свойством: в текущем Комп заменяет - элемент [class.имя_класса] = "true"
  - @HostBinding('style.имя_стиля') имя_свойства = "значен" - декоратор свойства добавляет подчиненному элементу стиль со значением и можно програмно управлять этим свойством: в текущем Комп заменяет - элемент [style.имя_стиля] = "значен"
  - @HostListener('имя_событ',['$event']) имя_метода([e]){..} - декоратор метода создает слушателя события с текущим обработчиком у подчиненного элкмента/компонента: в текущем Комп заменяет - элемент (имя_событ) = "имя_метода($event)"
  - @Input()/@Input('псевдоним')/@Input('имя_директивы') имя_свойства:тип - декоратор входного свойства (для 'имя_директивы' - сама директива является свойством и ей передается знаение): в шаблоне - Комп/элемент [свойство/псевдоним] = "значение"
  - @Output()/@Output('псевдоним')/@Output('имя_директивы') имя_свойства:EventEmitter<тип_данных> - декоратор выходного свойства: в шаблоне - Комп/элемент (свойство/псевдоним) = "метод($event)"
  - constructor(private имя1:ElementRef, private имя2:Renderer2){..} - конструктор получает 2 аргумента: 1-ссылка на текущий компонент/элемент, 2-объект методов управления элементом
  - Структурные диррективы преобразуют структуру компонента/элемента: *имя_дир
    - при подключении - пере-подключается к тэгу ng-template в который оборачивает текущий компонент/элемент, который скрывает все содержимое:
      ng-template имя_дерек
      текущ.Комп/элем/ текущ.Комп/элем
      /ng-template
    - constructor(private имя1:TemplateRef<тип > , private имя2:ViewContainerRef){..} - конструктор получает 2 аргумента: 1-ссылка на template-элемент, 2-объект ссылка на место разметки кторый может отрисовать или удалить
  - Методы жизненного цикла
    - ngOnInit(){} - ф-ия выполняется сразу после создания компонента со всеми св-ми и методами (интерфейс OnInit)
    - ngOnChanges(перем: SimpleChanges){} - ф-ия выполняется при изменении входных св-в компонента (в первый раз - до ngOnInit), получает об: {имя_св:{previousValue:знач1,currentValue:знач2},..}, (интерфейс OnChanges)
    - ngDoCheck(){} - ф-ия выполняется при каких-то изменениях, которые класс не может обнаружить (после ngOnInit, ngOnChanges), (интерфейс DoCheck)
    - ngOnDestroy(){} - ф-ия выполняется перед разрушением об, (интерфейс OnDestroy)
  - Встроенные директивы
    - *ngIf
      - [*]ngIf="лог_знач" - устанавливает в DOM клон элемента при true, отсутствует при false [* - в DOM весь элемент заключает в тэг template]
      - *ngIf="лог_знач; else имя_элем_template" - устанавливает в DOM клон элемента при true, при false отображается дополнительный элемент template #имя_элем_template
    - *ngFor
      - [*]ngFor="let перем1 of масс; let перем2=index; let перем3=last" - циклическое повторение массива, используя нумерацию index, лог.значение последней итерации last
      - [*]ngFor="let перем1 of (масс | фильтр)" - циклическое повторение массива, предварительно применив фильтр к массиву
      - [*]ngFor="let перем1 of масс; trackBy: ф-я" - циклическое повторение массива и одновременно выполнение ф-ии(пер_index, пер_знач)
    - ngSwitch / *ngSwitchCase / *ngSwitchDefault
      - [ngSwitch]="выражение" - тэг-контейнер в котором вычисляется выражение
        тэг/комп *ngSwitchCase ="значение1" - тэг-потомок в котором сравнивается значение, при совпадении контент из template вставляется в тэг ngSwitch
        тэг/комп *ngSwitchDefault - тэг-потомок для случая не совпадения ни одного значения, при котором контент из template вставляется в тэг ngSwitch
    - ngStyle
      - [ngStyle]="{имя_стиль:выражение, ..}" - передача об с CSS-стилями
      - [style.имя_стиль]="выражение" - установка стиля
      - [style.имя_стиль.рамерность]="число" - установка числового стиля
    - ngClass
      - [ngClass]="{{строка_классы/массив_классы/об}}" - создание классов из строки с классами через побел/массив имен классов/об {имя_кл:лог.выр,..} (true - добавить)
      - [class.имя_класс]="лог_знач" - добавление класса или нет
    - ngNonBindable
      - [ngNonBindable] - отключает интерполяцию внутри элемента: {{текст}} отображает обе фигурные скобки
    - *ngTemplateOutlet
      - *ngTemplateOutlet="имя_элем_template" - перенос отображения всего содержимого тэга ng-template #имя_элем_template
Класс фильтров (файлы: имя.directive.[*.ts, *.spec.ts])
- @Pipe(об) - декорирование класса создающего фильтр
  - name:'псевдоним' - имя фильтра применяемый в выражении интерполяции
  - pure:true(ум)/false - для простого класса унаследованого PipeTransform - true, false - для сложного класса унаследованого от другого класса
- class ИмяКомпонPipe implements PipeTransform {..} - класс создающий фильтр
  1. transform(вх_знач/вх_масс, ...args:any[]){.. return вых_знач} - обязательный метод выполняющий функцию над значением/массивом
- Програмное использование фильтра внутри класса компонента
  - import {КлассPipe} - импорт класса фильтра
  - @Component({
    providers:[КлассPipe]
    }) - подключение фильтра как зависимость
  - constructor(private имяPipe:КлассPipe) {}
  - this.имяPipe.transform(вх_знач, арг1, арг2, ..) - применение функции фильтра возвращает новое значение
- Встроенные фильтры - функция преоблазование отображения: {{выражение | фильтр1:арг1:арг2 | фильтр2:арг1:арг2 | ..}}
  - date[:'формат'] - отображение даты в формате, принимая об даты или число милисек, форматы: longDate,shortDate,fullDate, применение 'MM.dd.yy hh HH:mm'
  - uppercase - текст в верхнем регистре
  - lowercase - текст в нижнем регистре
  - replace:рег_выраж:строка - замена в тексте подвыражений
  - number[:'мин_цел.мин_дроб-макс_дроб'] - отображение числа в формате интернационализации, по ум :1.0-3
  - percent[:'мин_цел.мин_дроб-макс_дроб'] - отображение числа поцентов в формате
  - currency[:'код_валют'][:лог_код_валют][:'мин_цел.мин_дроб-макс_дроб'] - отображение суммы валют, указывая кода валют (USD,EUR,..), отображать значок (true) или код валют (false), формат числа
  - slice:индекс_нач[:индекс_кон] - выделение части элеменков, подходит для массивов и строк
  - json - отобрадение об в виде строки формата json
  - il8nPlural:об - сравнение числа со значениями в об и замена строками {'=знач1':'стр1',..,'other':'#стрN'(#-подстановка самого числа)}
  - il8nSelect:об - сравнение строки со значениями в об и замена строками {'знач1':'стр1',..,'other':'стрN'}
  - orderBy:'имя_св1,имя_св2,..' - сортировка массива из об по свойствам: имя_св1, равные по имя_св2
  - filter:'подстрока'/{имя_св:'подстрока'} - выборка массива строк по подстроке / массива об по подстроке свойства
  - async - отображение значения только после завершения обработки, а не по мере получения
Класс сервисов (файлы имя.service.[*.ts, *.spec.ts] )
- @Injectable(об) - обязательный декоратор сервиса
  - provideIn: 'root'/ provideIn: AppModule - внедрение глобально (аналогично в AppModule - providers:[ ИмяService ] )
  - provideIn:OtherModule - внедрение в указанный модуль
- class ИмяService {..} - класс типа Singleton создающий сервис
  - constructor(){}
    - constructor(public перем:тип){..} - конструктор получает значения
    - constructor(@Optional() public перем:ДругойService){..} - конструктор получает значениe другого сервиса, который может еще не существовать
  - метод() {} - методы выполнения логики
- Внедрение сервисов в непосредственно только в компонент
  - В компоненте @Component({providers:[ИмяService] })
    constructor(private перем:ИмяService) - создание объекта сервиса непосредственно в компонент, но тогда он доступен только тут
- Внедрение сервисов в компонент через модуль
  - В модуле @NgModule({..,prviders:[ИмяService]}) - подключение зависимости в модуле (создание единственного экземпляра класса сервиса)
    В компоненте constructor(private перем:ИмяService) - подключение объекта сервиса
  - В модуле @NgModule({..,prviders:[ИмяService, {provide:'плевдоним', useClass:ИмяService} ] } ) - подключение двух одинаковых зависимостей в модуле (создание единственного экземпляра класса сервиса)
    В компоненте constructor(private перем1:ИмяService, @Inject('плевдоним') private перем2:ИмяService ) - подключение двух объектов одного сервиса
  - В модуле @NgModule({..,prviders:[ИмяService, {provide:'плевдоним', useExisting:ИмяService} ] } ) - подключение одну зависимость в модуле под разными именами
    В компоненте constructor(private перем1:ИмяService, @Inject('плевдоним') private перем2:ИмяService ) - подключение одного объекта сервиса с разными именами
  - В модуле ИмяFacroty() { return new ИмяService()} - создание фабрики - функция, которая возвращает созданный абъект
    @NgModule({..,prviders:[{provide:ИмяService, useFactory:ИмяFacroty} ] } ) - подключение фабрики создающей экземпляр
    
    В компоненте constructor(private перем1:ИмяService, @Inject('плевдоним') private перем2:ИмяService ) - подключение одного объекта сервиса с разными именами
  - В модуле ИмяFacroty(аргумент:тип) { return new ИмяService()} - создание фабрики - функция, которая возвращает созданный абъект
    @NgModule({.., prviders: [{provide:'имя_перем', useValue:значение}, {provide:ИмяService, useFactory:ИмяFacroty, deps:['имя_перем']} ] } ) - подключение фабрики создающей экземпляр и глобальной переменной переданной в фабрику как аргумент
  - В модуле имя_перем = new InjectionToken<тип>('описание') - создание переменной для значения
    ИмяFacroty(аргумент:тип) { return new ИмяService} - создание фабрики
    @NgModule({.., prviders: [{provide:имя_перем, useValue:значение}, {provide:ИмяService, useFactory:ИмяFacroty, deps:['имя_перем']} ] } ) - подключение фабрики создающей экземпляр и глобальной переменной переданной в фабрику как аргумент
Routing-модуль (управляет отображаемыми страницами)
- Маршрутизация1
  - @RouteConfig(масс_об) - декоратор для главного компонента, после @Component
    - path:'путь' - простой путь маршрута
    - path:'путь...' - путь маршрута с многоточием вконце - значит в компоненте будет дочерний маршрутизатор со своим RouterConfig, продолжающий определение машрутов, в шаблоне имеет свой тэг router-outlet
    - path:'путь/:имя_арам1/:имя_арам2' - путь маршрута с параметрами
    - name:'Имя_маршрута' - имя маршрута совпадает с именем компонента
    - component:компонент - подключаемого компонента
    - useAsDefault:true - указание маршрута по умолчанию
    - redirectTo:['имя_маршр'] - получив указанный путь происходит переход на новый маршрут по его имени
    - loader:ф-я_promise - ф-я возвращает об promise загрузки компонента в асинхроном режиме
  - Програмный запуск маршрута
    - constructor(..,private router:Router) - внедрение зависимостей в компонент
    - this.router.navigate(['имя_маршрута'],об_д-х) - вызов маршрута в виде массива имен маршрутов, при неоходимости передаются д-е
    - this.router.navigate(['имя_маршрута',об_параметров],об_д-х) - вызов маршрута в виде массива имен маршрутов с параметрами, при неоходимости передаются д-е
    - this.router.navigateByUrl('путь') - изменение пути с целью изменить маршрут
  - Вычисление параметров
    - constructor(..,routeParams:RouteParams) - внедрение в компонент об для работы с параметрами
    - routeParams.get('имя_парам') - получение значения параметра
  - Шаблон
    - a [RouterLink]="['Имя_маршрута']"имя кнопки /a - создание кнопки для перехода к маршруту
    - a [RouterLink]="['Имя_маршрута',об_параметров]"имя кнопки /a - создание кнопки для перехода к маршруту с паметрами
    - router-outlet/router-outlet - стандартная дирректива для загрузки выбранного по маршруту компонента с его шаблоном
  - События маршрумизатора как декоратора или как метода компонента
    - @CanActivate(ф-я(нов_маршр,стар_маршр):boolean{..return лог_знач / Promise<лог_знач>}) - событие перед переходом по новому маршруту, но переходит только при возврате true
    - class имя implements OnActive,CanDeactive,OnDeactive{
      routerOnActive(нов_маршр,стар_маршр):void{..} - обработчик события после выбора маршрута
      routerCanDeactive(нов_маршр,стар_маршр):boolean{..return лог_знач / Promise<лог_знач>} - обработчик события после выбора маршрута, но переходит только при возврате true
      routerOnDeactive(нов_маршр,стар_маршр):void{..} - обработчик события после выбора маршрута
      routerCanReuse(нов_маршр,стар_маршр):boolean{..return лог_знач / Promise<лог_знач>} - обработчик события при выборе того же маршрута, при true - событие OnReuse, при false - событие OnActivate
      routerOnDeactive(нов_маршр,стар_маршр):void{..} - обработчик события после выбора того же маршрута и CanReuse вернул true
    - @
    - @
- Маршрутизация2
  - import { RouterModule, Routes } from '@angular/router'; - загрузка
  - import { Компонент } from 'класс_компонента'; - загрузка всех нужных компонентов
  - @NgModule(об) - декоратор модуля маршрутизации
    - exports: [ RouterModule ] - вся настройка модуля будет работать при импорте его в другой модуль
    - imports: [ RouterModule.forRoot(массив_маршрутов) ] - сохранение маршрутов
      - path:'путь'/'**' - установка пути маршрута (** - любой не совпавший), параметры ./:перем..
      - component:Компонент - установка компонента отображаемого в теге router-outlet
      - redirectTo:'путь2' - при получении текущего пути path, перезапуск другого пути
      - pathMatch:'режим' - установка режима совпадения пути:'full' - полное совпадение со слешами
      - data:об -
      - children:массив_маршрутов1 - дополнительный набор маршрутов продолжает путь
  - export class ИмяМодульМаршр{} - класс маршрутизации, он пустой
  - router-outlet/router-outlet - внедрение в шаблон основного компонента
  - a routerLink="путь"Имя_ссылки/a - создание ссылки для маршрута с применением аттрибута routerLink
  - a [routerLink]="['строка',перем,..]"Имя_ссылки/a - путь может состоять из массива строк
  - a .. routerLinkActive="active" - при выборе маршрута добавляется в ссылку класса active
  - a .. [routerLinkActivateOptions]="{exact:true}" - при выборе дочернего маршрута активируется только одна ссылка без родительской
  - ActivatedRoute - сервис с информацией о выбранном маршруте после перехода в текущий компонент (import { ActivatedRoute } from '@angular/router';)
    constructor(route:ActivatedRoute)
    - this.route.snapshot.params['имя_парам']; - получение параметра из URL маршрута как из статического объекта, но страница может не обновится при програмном изменении параметра
    - this.route.snapshot.queryParams['имя_парам']; - получение параметра из URL get-запроса (?парам1=знач1&..)
    - this.route.params.subscibe(params => {this.перем = params.имя_парам}); - асинхронное получение параметра из URL маршрута по подписке
    - this.route.snapshot.paramMap.get('имя_парам'); - получение параметра из URL маршрута
  - Router - сервис для программного перехода по маршрутам (import { Router } from '@angular/router';)
    constructor(router:Router)
    - this.router.navigate(['часть1','часть2','часть3',..]); - запуск маршрута соединив массив в строку (массив преобразуется в строку 'часть1/часть2/часть3')
    - this.router.navigateByUrl('/путь_целиком') - весь путь одной строкой
enableProdMode() - переключение в промышленный режим, отсутствуют сообщения в консоль
@Output(['псевд']) перем = new EventEmitter<тип_д-х>(); - создание об события
- перем.emit(д-е); - генерация события
- (перем/псевд)="ф-ия($event)"; - получение события с данными в переменной $event в родительском шаблоне
bootstrap(ИмяКомпонComponent [, масс_поставщ_зависим]) - создание экземпляра корневого объекта из класса (import {bootstrap} from @angular/platform-browser-dynamic)
Интерфейс структура типа/об, применяемая для определения переменной, функции, шаблон для класса
- interface имя_типа [extends имя_типа1]{[readonly] имя1:тип1,..} - тип определяющий имена и типы свойств и методов, применяют как тип об или реализации класса через implements [readonly - значение при создании изменить нельзя, аналог у переменных const]
Декораторы - добавляют в класс/свойство/метод/парметр данные находится непосредственно над целью декорирования
- Декоратор класса
  - function имя_декор(target:Function):void{добавление свойств и метдов к target} - функция добавляющая свойства и методы в класс
    @имя_декор - декоратор класса это функция привязана к конструктору класса и добавляющая свойства и методы в класс
    class имя_класс{..} - класс следует сразу за декоратором
  - function имя_декор(перем_аргум):Function{return function(target:Function):void{добавление свойств и метдов к target}} - функция добавляющая настраиваемые свойства и методы в класс
    @имя_декор(аргум) - декоратор класса добавляющий свойства и методы, которые зависят от входящих аргументов
    class имя_класс{..} - класс следует сразу за декоратором
- Декоратор свойства
  - function имя_декор(target:Object,key:string){изменение свойства} - функция изменения свойства класса, где target - прототип класса, key - имя свойства, this - об
    @имя_декор - декоратор свойства это функция привязана к свойству класса
    имя_свойства - определение свойства в классе следует сразу за декоратором
  - function имя_декор(перем_аргум):Function{return function(target:Object,key:string){изменение свойства}} - функция изменения свойства класса в зависимости от аргумента, где target - прототип класса, key - имя свойства, this - об
    @имя_декор(аргум) - декоратор свойства это функция привязана к свойству класса, которые зависят от входящих аргументов
    имя_свойства - определение свойства в классе следует сразу за декоратором
- Декоратор метода
  - function имя_декор(target:Object,key:string,descriptor:any){изменение метода} - функция изменения метода класса, где target - класс, key - имя метода, descriptor - дескриптор метода(где descriptor.value - ссылка на метод), this - об
    @имя_декор - декоратор метода это функция привязана к методу класса
    имя_метода(..){..} - определение метода в классе следует сразу за декоратором
  - function имя_декор(перем_аргум):Function{return function(target:Object,key:string){изменение свойства}} - функция изменения свойства класса в зависимости от аргумента, где target - прототип класса, key - имя свойства, this - об
    @имя_декор(аргум) - декоратор свойства это функция привязана к свойству класса, которые зависят от входящих аргументов
    имя_свойства - определение свойства в классе следует сразу за декоратором
- Декоратор параметров функции
  - function имя_декор(target:Function,key:string,index:number){изменение метода} - функция изменения метода класса, где target - функция (для конструктора-ссылка на прототип класса, для метода-ссылка на метод), key - имя метода (для конструктора - undefined), descriptor - дескриптор метода(где descriptor.value - ссылка на метод), this - об
    @имя_декор - декоратор параметра это функция привязана к параметру функции/методу
    аргумент - определение аргумента функции следует через пробел сразу за декоратором
Модули
- module имя_модуль{..} - создание внутреннего модуля с собственной областью видимостью
- имя_ф-ла.ts - создание внешнего модуля "имя_ф-ла" с собственной областью видимостью
- export определение - экспорт внутри модуля, возможность использования вне модуля
- import перем=имя_модуль.имя - импорт в переменную объекта из внутреннего модуля
- import перем=require('имя_ф-ла') - импорт в переменную объекта из внешнего модуля в стиле CommonJS
Асинхронная работа
- Функция
  - ф-я_ответ() - ф-ия для запуска
  - асинхр_ф-я(ф-я_callback){setTimeout(ф-я_callback(),N)} - создание асинхронной ф-ии
  - асинхр_ф-я(ф-я_ответ()) - запуск ф-ии через асинхронную ф-ию
- Применение об Promise
  - ф-я_ответ()
  - асинхр_ф-я(){ var pr=new Promise(ф-я(ф-я_callback,ф-я_ответ2){setTimeout(ф-я_callback(),N)} return pr}
  - асинхр_ф-я().then(ф-я_ответ())
- Реактивное программирование библиотеки RxJS - работа с потоком событий и подписчиками событий
  - Rx.Observable
    - import { Observable } from 'rxjs/Observable'; - тип Promise
    - import { of } from 'rxjs/observable/of'; - ф-ия для преобразования в тип Promise
  - асинхр_ф-я(..):Observable<тип_ответ> {.. return of(ответ)}) - создание асинхронной ф-ии
- Реактивное программирование библиотеки RxJS - работа с потоком событий и подписчиками событий
  - Rx.Observable
    - .fromEvent(DOM-эл,'событие') - создание наблюдения за потоком 'события' сгенерированных в DOM-эл и передает в цепочку
    - .map(ф-я(e){..return .. }) - преобразование потока событий/значений в поток вычесленных значений
    - .filter(ф-я(e){..return .. }) - фильтрация потока событий/значений
    - .subscribe(ф-я(e){..}) - конечная обработка потока событий/значений
  - поток_ответ=new Observable(ф-я(перем_набл){}) - создание наблюдателя за потоком и встроенного наблюдателя
    перем_набл.next(об) - добавление в поток нового объекта д-х
- http-запросы на сервер
  - Ручная настройка запроса Http,RequestOptions,RequestOption,Response, полезна придобавлении в запрос дополнительных заголовков
    - пер_загол=new Headers() - создание заголовка для запроса
      - пер_загол.append('имя','значение') - добавление заголовка
    - пер_настр=new RequestOptions(об_настр) - создание настроек для запроса
      - method:метод - метод запроса (значение об RequestMethod: Get,Post,Put...)
      - url:'адрес запроса' - url-адрес
      - headers:пер_загол
    - перем_запрос=new Request(пер_настр/об_настр) - подготовка запроса
    - поток_ответ:Observable=http.request(перем_запрос) - получение ответа
  - Сокращенные http-запросы
    - поток_ответ:Observable=http.get('адрес запроса') - get-запрос и получение ответа
    - поток_ответ:Observable=http.post('адрес запроса',строк_д-е,[об_заголов]) - post-запрос и получение ответа
    - поток_ответ:Observable=http.post('адрес запроса',строк_д-е,[об_заголов]) - post-запрос и получение ответа
    - поток_ответ:Observable=http.put('адрес запроса',[об_заголов]) - delete-запрос и получение ответа
    - .pipe(catchError(..)) - передача потока ответа обработчику ошибки
    - .map(ф-я(e){..return .. }) - преобразование потока событий/значений в поток вычесленных значений
    - .filter(ф-я(e){..return .. }) - фильтрация потока событий/значений
    - .subscribe(ф-я_удач(e){..},ф-я_ошиб(e){..}) - конечная обработка потока событий/значений
    - .catch(ф-я(r:Response){..}) - выполнение ф-ии в случае ошибки
  - Свойства объекта ответа - пер_об:Response
    - пер_об.json() - преобразование ответ(json-текст) в об, при невозможности преобразовать - ошибка
    - пер_об.text() - преобразование ответ в текст
    - пер_об.status - код ответа сервера (не 2хх - ошибка)
    - пер_об.statusText - текст ошибки ответа (при ошибке)
    - пер_об.bytesLoaded - количество байтов уже загружено
    - пер_об.totalBytes - общее количество байтов информации
    - пер_об.headers - объект с заголовками
    - пер_об.type - статус ответа: basic/cors/default/error/opaque
Anguar2 - Шаблон в виде файла *.html
- ТЭГ/ТЭГ - элемент HTML
- Комп/Комп - компонент приложения
- ТЭГ/ТЭГ - компонент приложения
- ng-content/ng-content - место внедрения в шаблоне оригинального содержимого
- {{выражение|фильтр}} - вычисление выражения и отображерие
- {{объект?.свойство}} / {{объект&&объект.свойство}} - выражение не создает ошибки при отсутствии об
- {{объект!.свойство}} - выражение не создает ошибки при отсутствии об
- (событие)="выражение/ф-ия()/ф-ия($event)/ф-ия(перем)" / on-событие=".." - обработчик событий, с передачей об_события, с передачей значения
  - click - клик мышкой
  - input - ввод значения в текстовое поле
  - ngModelChange - изменение в элементе
  - keyup - отпускание любой нажатой клавиши
  - keyup.enter - отпускание нажатой клавиши "Enter"
  - blur - потеря фокуса
- аттриб="значение" - значение аттрибута
- bind-аттриб="выражение" - значение аттрибута
- аттриб="{{'значение'/перем}}" - интерполяция значения аттрибута
- [свойство_элем]="перем"/"'значение'" - входное свойство, применяется функция для записи в свойство элемента/класса компонента, необходим декоратор свойства в классе @Input() свойство_элем или с псевдонимом @Input('псевдоним') свойство_элем
- [свойство_элем]="лог_перем" - добавление входное свойство если лог_перем==true
- [attr.имя_аттрибута]="значение" - установка значения аттрибута
- (сообщение/событие)="ф-я()" - выходное свойство, при возникновении события внутри эл/компонента запускает ф-ю сохраненную в текущем ел/компоненте, где $event - переданные д-е, событие- переменная типа EventEmitter и запущена браузером или програмно this.событие.emit('')
- #имя / ref-имя - аттрибут создает ссылку на об_эл/компонент для использования во всем шаблоне как имя.свойство
- [*]ngIf="лог_знач" - устанавливает в DOM клон элемента при true, отсутствует при false [* - в DOM весь элемент заключает в тэг template]
- [*]ngFor="let перем1 of масс; let перем2=index; let перем3=last" - циклическое повторение массива, используя нумерацию index, лог.значение последней итерации last
- [*]ngFor="let перем1 of (масс | фильтр)" - циклическое повторение массива, предварительно применив фильтр к массиву
- [*]ngFor="let перем1 of масс; trackBy: ф-я" - циклическое повторение массива и одновременно выполнение ф-ии(пер_index, пер_знач)
- [ngStyle]="об" - передача об с CSS-стилями
- [style.имя_стиль]="выражение" - установка стиля
- [style.имя_стиль.рамерность]="число" - установка числового стиля
- [ngClass]="{{строка_классы/массив_классы/об}}" - создание классов из строки с классами через побел/массив имен классов/об со свойствами имен классов и значениями - логич.выражение(true - добавить)
- [class.имя_класс]="лог_знач" - добавление класса или нет
- [ngSwitch]="выражение" - тэг-контейнер в котором вычисляется выражение
  тэг/комп ngSwitchWhen / ngSwitchCase ="значение1" - тэг-потомок в котором сравнивается значение, при совпадении контент из template вставляется в тэг ngSwitch
  тэг/комп ngSwitchDefault - тэг-потомок для случая не совпадения ни одного значения, при котором контент из template вставляется в тэг ngSwitch
- form - любаям форма содержит дирренктиву ngForm, добавляет ко всем эл классы валидации
- form ngNoForm - отказ от подключения диррективы ngForm
- form [ngFormModel]="имя_модели_формы" - подключения диррективы ngFormModel, содержит валидацию всей формы
- form (ngSubmit)="ф-я()" - выполнение ф-ии при нажатии Submit
- [(ngModel)]="имя_перем" / bindon-ngModel="имя_перем" - двустороннее связывание значения со св-м компонента и добавление контроля значений
  - untouched/touched - создает класс: ng-untouched / ng-touched
  - pristine/dirty - создает класс: ng-pristine / ng-dirty
  - valid/invalid - создает класс: ng-valid / ng-invalid
  - класс ng-pending
- form #имя_форм="ngForm" - переменная имя_форм будет содержать состояние этого эл из ngForm
- тэг #имя_эл="ngModel" - переменная имя_эл будет содержать состояние этого эл из ngForm
- required - проверка не пустого значения, программный аналог =new Control(нач_знач,Validators.required)
- minlength="N" - ограничение длины значения, программный аналог =new Control(нач_знач,Validators.minLength(N))
- maxlength="N" - ограничение длины значения, программный аналог =new Control(нач_знач,Validators.mexLength(N))
- pattern="рег_выр" - проверка соответвия рег.выражению, программный аналог =new Control(нач_знач,Validators.pattern('рег_выраж'))
- =new Control(нач_знач,Validators.compose(масс_ф-ий_валидации)) - объединение ф-ий валидации
- =new Control(нач_знач,Validators.composeAsync(масс_Promiseф-ий_валидации)) - объединение ф-ий валидации преобразованных в Promise
- ngControl="имя" - добавление проверки в ngForm под указанным именем без применения ngModel
- ngControlGroup="имя_группы" - объединение проверок эл с аттрибутом ngControl в ngForm под указанным именем
- =FormBuilder.group({имя1:ф-я_Control,...}) - объединение контрольных ф-й
- =FormBuilder.control(нач_знач,ф-я_валидац) аналог =new Control(нач_знач,ф-я_валидац) - создание переменной с контроллером значения
- =FormBuilder.group({имя1:[нач_знач,ф-я_Control],...}) - сокращенный вариант объединение контрольных ф-й
- Validators.ф-я - ф-я получает об Control и возвращает null при успехе или {имя_ошиб:true}
  - Validators.required - проверка не пустого значения поля
  - Validators.email - проверка макета email
  - Validators.min(N) - проверка минимального значения
  - Validators.max(N) - проверка максимального значения
  - Validators.minLength(N) - проверка минимальной длины значения
  - Validators.maxLength(N) - проверка максимальной длины значения
  - Validators.pattern(RegExp) - проверка макета значения
  - Validators.compose(масс_валидаторов) - создание одного из массива валидаторов
Анимация
- Анимация CSS с помощью кадров
  - @keyframes имя_кадров{0%{стили_CSS}...100%{стили_CSS}} - создание кадров
  - селектор{animation:имя_кадров Ns infinite} - оживление анимации по кадрам
- Анимация появления/исчезания при NgSwitch,NgFor,NgIf
  - class="ng-animate" - класс, автоматически будет добавлять временные классы ng-enter,ng-enter-active,ng-leave,ng-leave-active вначале и конце анимации
  - Настройка анимации в стилях
    - .ng-animate{transition:all Ns ф-ия_движения} - все изменения стилей будут плавными
    - .ng-enter{силь_CSS_начало} - стиль эл в начале появления
    - .ng-enter-active{силь_CSS_конец} - стиль эл в конце появления
    - .ng-leave{силь_CSS_начало} - стиль эл в начале исчезновения
    - .ng-leave-active{силь_CSS_конец} - стиль эл в конце исчезновения
- Анимация внедренная програмно 1
  - constructor(ab:AnimationBuilder){..} - внедрение фабрики анимации класса AnimationBuilder
  - перем_аним=ab.css() - создание об анимации стилей типа CssAnimationBuilder для внедрения, применяются программные цепочки
  - перем_аним.setDuration(N) - установка длительности анимации
  - перем_аним.setDelay(N) - установка задержки перед анимацией
  - перем_аним.setFromStyles(об_стилей_CSS) - установка стилей начала анимации
  - перем_аним.setToStyles(об_стилей_CSS) - установка стилей конца анимации
  - перем_аним.setStyles(from:об_стилей_CSS,to:об_стилей_CSS) - установка стилей начала и конца анимации (сокращенная версия)
  - перем_аним.addClass('имя_класса') - добавление класса, который остается после анимации
  - перем_аним.removeClass('имя_класса') - удаление класса
  - перем_аним.addAnimationClass('имя_класса') - добавление временного класса, удаляемого после анимации
  - аним:Animation = перем_аним.start(эл_DOM) - внедрение анимации в эл (предпочитают elementRef.nativeElement, чем document.getElementById() / document.querySelector()), возвращает об типа Animation
  - аним.onComlete(ф-я(){}) - обработчик при завершении анимации, можно запустить новую анимацию
  - аним.applyStyles(об_стилей_CSS) - установка стилей текущего эл
  - аним.addClasses(масс_класс) - добавление классов указанных в массиве
  - аним.removeClasses(масс_класс) - удаление классов указанных в массиве
- Анимация внедренная програмно 2 (@Component({animations:масс_об,..}) )
  - trigger('имя_аним',[state('имя1',style(об_стил1)),state('имя2',style(об_стил2)),transition('имя1=>имя2',animate('Nms функц')),transition('имя2=>имя1',animate('Nms функц'))]) - создание одного об анимации стилей с двумя состояниями
  - trigger('имя_аним',[state('имя1',style(об_стил1)),transition('void=>*',[style(..),animate('Nms функц')]),transition('*=>void',[animate('Nms функц',style(..))])]) - создание одного об анимации стилей с одним состоянием наличие/нет, где * - любое, void - отсутствие
  - trigger('имя_аним',[state('имя1',style(об_стил0)),transition('void=>*',animate('Nms функц',keyframes([style(об_стил1,offset:0),..]) )),transition('*=>void',animate('Nms функц',keyframes([style(об_стил1,offset:0),..]) ))]) - создание одного об анимации стилей с многими состояниями в блоке keyframes объединяют несколько style, offset:0.-1. часть длительности
  - trigger('имя_аним',[state('имя1',style(об_стил0)),transition('void=>*',group([animate('Nms функц',style(об_стил1)),..] )),transition('*=>void',group([animate('Nms функц',style(об_стил1) ),..]))]) - создание одного об анимации стилей с двумя состояниями в блоке group объединяют несколько анимаций animate
  - [@имя_аним]="св-во" - в шаблоне об_аним получает значение имя1 или имя2 через св-во класса
  - (@имя_аним.srart / @имя_аним.done)="ф-ия([$event])" - выполнение ф-ии в нечале или конце анимации
Тестирование unit testing с применением karma, jasmine
- ng test [--code-coverage] - запуск всех тестов *.spec.ts [с отображением покрытия кода тестами ./coverage/приложение/index.html]
- конструкции для теста
  - describe('имя теста', () => {...}) - объединение тестов в блок (xdescribe - отключение этого теста, fdescribe - отключение всех кроме этого теста)
  - it('имя теста', () => {...}) - объединение тестов (xit - отключение этого теста, fit - отключение всех кроме этого теста)
  - beforeEach(() => {...}) - запуск функционала перед каждым it-тестом
  - afterEach(() => {...}) - запуск функционала после каждого it-теста
  - beforeAll(() => {...}) - запуск функционала перед всеми it-тестами
  - afterAll(() => {...}) - запуск функционала после всех it-тестов
- Тестирование 1 (простой, применяют для сервисов)
  1. beforeEach(() => {об = new Класс()}) - создание экземпляра
  2. it('..', () => {expect(об).toBeTruthy()}) - проверка на создание экземпляра
  3. it('..', () => {об.метод(); expect(об.свойство).toEqual(значение)}) - проверка метод экземпляра инициализирует свойство значением
  4. it('..', () => {expect(об.метод(..)).toEqual(значение)}) - проверка метод экземпляра возвращает значение
- Тестирование 2 (с зависимостями)
  1. beforeEach(() => {об = new Класс()}) - создание экземпляра
  2. beforeEach(() => {об_сервис = {метод(){..}..}) - создание не настоящего сервиса с нужными свойствами и методами
  3. it('..', () => {expect(об).toBeTruthy()}) - проверка на создание экземпляра
  4. it('..', () => {об.метод(); expect(об.свойство).toEqual(значение)}) - проверка что метод экземпляра инициализирует свойство значением
  5. it('..', () => {expect(об.метод(..)).toEqual(значение)}) - проверка что метод экземпляра возвращает значение
- Тестирование 3 (с зависимостями и проверка вызова сервисов)
  1. beforeEach(() => {об = new Класс()}) - создание экземпляра
  2. beforeEach(() => {об_сервис = {метод_с:jasmine.createSpy('имя_метод_с') .and.returnValue(значение)..}) - создание не настоящего сервиса с нужными свойствами и методами и отслеживанием вызова
  3. it('..', () => {
    об.метод();
    expect(об_сервис.метод_с).toHaveBeenCalled();
    expect(об.метод(..)).toEqual(значение)
    }) - проверка что метод экземпляра инициирует вызов метода сервиса
- Тестирование 4 (с зависимостями типа Observable и проверка вызова сервисов)
  1. beforeEach(() => {об = new Класс()}) - создание экземпляра
  2. beforeEach(() => {об_сервис = {метод_с:jasmine.createSpy('имя_метод_с').and.returnValue( of(значение, asyncSheduler))..}) - создание не настоящего сервиса с нужными свойствами и методами и отслеживанием вызова
  3. it('..', fakeAsync(() => {
    об.метод();
    expect(об_сервис.метод_с).toHaveBeenCalled();
    tick()
    expect(об.метод(..)).toEqual(значение);
    }) ) - проверка что метод экземпляра инициирует вызов метода сервиса возврашающий асинхронное значение типа Observable после одного tick-цикла (fakeAsynk() оборачивает tick)
- Тестирование 5 (с созданием модуля TestBed)
  1. component: Компонент - переменная тестируемого компонента
  2. fixture: ComponentFixture< Компонент > - переменная-обертка тестируемого компонента
  3. beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ Компонент ],
    }).compileComponents();}) ) - конфигурация модуля TestBed c внедренным Компонент
  4. beforeEach(() => {
    fixture = TestBed.createComponent( Компонент );
    component = fixture.componentInstance;
    fixture.detectChanges();
    }) - создание экземпляра Компонент в модуле TestBed и запуск механизма ChangeDetection (также запускается после каждого действия пользователя)
  5. it('..', () => {
    перемHtml: HTMLElement = fixture.nativeElement
    элементNative: HTMLElement = перемHtml.querySelector('селекттор')
    expect(элементNative.свойство).toEqual(значение);
    } ) - проверка что свойство элемента внутри экземпляра Компонента равно значению (с поиском nativeElement.querySelector() для браузера)
  6. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement
    элемент: DebugElement = перемHtml.query(By.css('селекттор'))
    элементNative: HTMLElement = элемент.nativeElement
    expect(элементNative.свойство).toEqual(значение);
    } ) - проверка что свойство элемента внутри экземпляра Компонента равно значению (с поиском debugElement.query() для браузера и mibile)
  7. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement
    элемент: DebugElement = перемHtml.query(By.css('селекттор'))
    элемент.triggerEventHandler('имя_события', null/{свойства_события})
    fixture.detectChanges();
    expect(элементNative.свойство).toEqual(значение);
    } ) - проверка что свойство элемента внутри экземпляра Компонента изменится после действий пользователя и будет равно значению (необходим запуск механизма ChangeDetection)
- Тестирование 6 (с созданием модуля TestBed и с зависимостями)
  1. component: Компонент - переменная тестируемого компонента
  2. fixture: ComponentFixture< Компонент > - переменная-обертка тестируемого компонента
  3. beforeEach(async(() => {
    об_сервис = {метод_с:jasmine.createSpy('имя_метод_с').and.returnValue( of(значение, asyncSheduler))..})
    TestBed.configureTestingModule({
    declarations: [ Компонент ],
    provoders: [ {provide:КлассСервис, useValue:об_сервис} ] }).compileComponents();}) ) - конфигурация модуля TestBed c внедренным Компонент и сервиса созданного вручную
  4. beforeEach(() => {
    fixture = TestBed.createComponent( Компонент );
    component = fixture.componentInstance;
    fixture.detectChanges();
    }) - создание экземпляра Компонент в модуле TestBed и запуск механизма ChangeDetection (также запускается после каждого действия пользователя)
  5. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement
    элемент: DebugElement = перемHtml.query(By.css('селекттор'))
    элемент.triggerEventHandler('имя_события', null/{свойства_события})
    tick()
    fixture.detectChanges();
    expect(об_сервис.метод_с).toHaveBeenCalled();
    expect(элементNative.свойство).toEqual(значение);
    } ) - проверка что свойство элемента внутри экземпляра Компонента изменится после действий пользователя и будет равно значению (необходим запуск механизма ChangeDetection)
- Тестирование 7 (с TestBed и проверкой Input, Output)
  1. @Component({ template: '<имя-Компонент
    [input-свойство]="свойство1"
    (output-событие)="метод($event)">
    </имя-Компонент>'}) - создание внещнего компонента со связями с тестируемым компонентом
  2. class TestHostComponent {
    свойство1=значение;
    свойство2: any
    метод(арг) {this.свойство2=арг;}
    } - класс внешнего компонента со свойствами и методами
  3. testHostComponent: TestHostComponent - переменная внешнего компонента
  4. fixture: ComponentFixture< TestHostComponent > - переменная-обертка внешнего компонента
  5. beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ Компонент, TestHostComponent ],
    }).compileComponents();}) ) - конфигурация модуля TestBed c внедренным Компонент и внешним компонентом TestHostComponent
  6. beforeEach(() => {
    fixture = TestBed.createComponent( TestHostComponent );
    testHostComponent = fixture.componentInstance;
    fixture.detectChanges();
    }) - создание экземпляра TestHostComponent и тестируемого в модуле TestBed и запуск механизма ChangeDetection (также запускается после каждого действия пользователя)
  7. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement;
    элемент: DebugElement = перемHtml.query(By.css('селекттор')).nativeElement;
    expect(элементNative.свойство). toEqual(testHostComponent.свойство1);
    } ) - проверка что свойство элемента внутри экземпляра Компонента полученного через Input равно передаваемому значению
  8. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement
    элемент: DebugElement = перемHtml.query(By.css('селекттор'))
    элемент.triggerEventHandler('имя_события', null/{свойства_события})
    expect(testHostComponent.свойство2).toEqual(testHostComponent.);
    } ) - проверка что свойство элемента внутри экземпляра Компонента передается к внешнему компоненту TestHostComponent
- Тестирование 8 (с TestBed, где тестируемый компонент содержит другие компоненты)
  1. @Component({ template: '<шаблош компонента>' selector: 'имя-Компонент' - создание не настоящего внутреннего компонента
  2. class ИмяComponent {} - класс внутреннего компонента
  3. component: Компонент - переменная тестируемого компонента
  4. fixture: ComponentFixture< Компонент > - переменная-обертка тестируемого компонента
  5. beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ Компонент, ИмяComponent ],
    schemas: [ NO_ERRORS_SCHEMA/ CUSTOM_ELEMENTS_SCHEMA ],
    }).compileComponents();}) ) - конфигурация модуля TestBed c внедренным Компонент и внутренним компонентом ИмяComponent и отключение всех ошибок или только при отсутствии других компонент
  6. beforeEach(() => {
    fixture = TestBed.createComponent( Компонент );
    component = fixture.componentInstance;
    fixture.detectChanges();
    }) - создание экземпляра тестируемого Компонент и внутреннего ИмяComponent в модуле TestBed и запуск механизма ChangeDetection (также запускается после каждого действия пользователя)
  7. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement;
    элемент: DebugElement = перемHtml.query(By.css('селекттор')).nativeElement;
    expect(элементNative.свойство). toEqual(testHostComponent.свойство1);
    } ) - проверка что свойство элемента внутри экземпляра Компонента полученного через Input равно передаваемому значению
  8. it('..', () => {
    перемHtml: DebugElement = fixture.debugElement
    элемент: DebugElement = перемHtml.query(By.css('селекттор'))
    элемент.triggerEventHandler('имя_события', null/{свойства_события})
    expect(testHostComponent.свойство2).toEqual(testHostComponent.);
    } ) - проверка что свойство элемента внутри экземпляра Компонента передается к внешнему компоненту TestHostComponent

React - библиотека для манипулирования элементами

Основной скрипт React
script type="text/javascript" src="...react.js" /script Подключить
Дополнительный скрипт React для привязки к оболочке
script type="text/javascript" src="...react-dom.js" /script Подключить
Дополнительный скрипт ReactRouter для работы с маршрутами
script type="text/javascript" src="...ReactRouter.js" /script Подключить
Дополнительный скрипт babel для упрощения записей в подключаемых JSX-скриптах (тогда для подключаемого файла/текста JSX-скрипта устанавливают type="text/babel")
script type="text/javascript" src="...browser.js" /script Подключить
Дополнительный скрипт EventEmitter для генерации и передачи событий между компонентами script type="text/javascript" src="...EventEmitter.js" /script Подключить

ReactDOM - об для внедрения только одного React-компонента в DOM, применяют в конце скрипта
- .render( React-комп // тэг ../тэг,об_эл, [ф-я обр вызова]) - вставка React-компонентов в пустой об_эл, что вносит изменения в DOM (в эл добавляется аттрибут data-reactroot с нумерации иерархии компонентов)
- .findDOMNode(об_эл) - ф-я для доступа к эл DOM через React, где об_эл можно получить document.getElementById('id'),this.refs.имя
- .unmountComponentAtNode() - удаляет компонент из DOM, вмонтированый ранее
React - основной об для манипулирования элеменнтами HTML с помощью React-компонентов
- .DOM.имя_элем(null/об св-в элемента , текст1/об_эл1/React-комп1, -//-2.. ) - упрощенная форма React.createElement('имя_тэга',...) в виде любого простого HTML-об_эл (a,b,div,input,...), добавлние ему св-в, внедрение других других об_эл/текста
- .createElement("тэг" , null/об св-в элемента , текст1/об_эл1/React-комп1, -//-2.. ) - создание React-элемент в виде одного простого HTML-об_эл, добавлние ему св-в, внедрение других других об_эл/текста или в виде JSX-записи: тэг
- .cloneElement(React-компонент,об_свойств) - получение копии помпонента
- .createFactory("тэг") - получение ф-ии для создания новых элементов подобно .createElement("тэг"...)
- .isValidElement(об) - проверка об/эл/комп, что он создан в React
- .createRef() - создание объекта для присвоения атрибуту ref - .current содержит ссылку на эл./компон.
- .forwardRef() - создание объекта
- .Fragment - компонент объединяющий набор элементов в render(), но можно объединить пустым тэгом: .../
- .Component - компонент
- .PureComponent - компонент обновляется при изменении props, state
- .Suspense - компонент
- .lazy - компонент
- .Children - об с методами работы с this.props.children
  - .map(children, function(thisArg)) - возвращает новый массив проходя массив об_эл из children выполняя ф-ю
  - .forEach(children, function(thisArg)) - проходит массив об_эл из children выполняя ф-ю
  - .count(children) - возвращает количество об_эл в children
  - .only(children) - возвращает об_эл являющийся единственным или null
  - .toArray(children) - возвращает простой массив из об_эл находящихся в children для последующих манипуляций
- .createClass({render:function(){return(тэг...)}) - создание React-компонента с помощью специальной ф-ии, собственные св-ва в тэгах можно отображать в тэгах : {this.props.св1}
  - render:ф-я(){return(тэг...)} - ф-я которая возвращает React-компонент в виде одного об_эл
  - propTypes:об_парам - каждое свойство содержит ф-ю проверки на валидность компонента
    - имя_св-ва:ф-я_проверки - React-ф-я проверки валидности из набора React.PropTypes
  - getInitialState:ф-я(){return{св1:знач1,св2:знач2,...}} - ф-я возвращает об первоначального состояния, доступный this.state.св1 (в ES6 - это выполняет constructor() )
  - getDefaultProps:ф-я(){return {св1:знач1,св2:знач2,...}} - ф-я при инициализации класса создает значения св-ва поумолчанию (в ES6 - Комп.defaultProps )
  - имя_ф:ф-я(){} - ф-я компонента доступна для заупска: onClick={this.имя_ф}
  - componentWillMount:ф-я() - ф-я запускаемая перед первым отображением - запуск render
  - componentDidMount:ф-я() - ф-я запускаемая сразу после отображения render когда DOM-компонент существует
  - componentWillReceiveProps:ф-я(об_новых_св-в){} - действие когда prop получил новые д-е (не при загрузке), где this.props.имя_св - старые св-ва, об_новых_св.имя_св - новые д-е, при вызове setState() - не запускает render
  - shouldComponentUpdate:ф-я(об_новых_св-в,об_нов_состоян) - при изменении prop или состоян вычисляет необходимость обновления компонента (возврат true - надо)
  - componentWillUpdate:ф-я(об_новых_св-в,об_нов_состоян) - при изменении prop или состоян если надо перерисовать - перед запуском render
  - componentDidUpdate:ф-я(об_стар_св-в,об_стар_состоян) - при изменении prop или состоян сразу после запуска render при выполнении изменений
  - componentWillUnmount:ф-я() - перед удалением компонента из DOM
- function имя([props]){тэг...} - компонент в виде ф-ии, возвращающей React-элемент, можно выполнять как внедрение элемента, props - об свойств можно отображать в тэгах : {об_свойств.св1}
- имя = () => {return(тэг...)} - компонент в виде стрелочной ф-ии, возвращающей React-элемент, можно выполнять как внедрение элемента
- class Имя extends React.Component { render() { return тэг...} } - класс для создания компонента (в виде класса в стиле ES6), возвращающей React-элемент (или иерархию JSX-элементов), можно выполнять как внедрение элемента, собственные св-ва в тэгах можно отображать в тэгах : {this.props.св1},{this.state.св1}
  - constructor([props]) {[super(props);] this.state=...}; - принимает входящие свойства props, формирует первое состояние this.state, может иметь передачу this в ф-ю (this.имя_ф=this.имя_ф.bind(this) для применения св-в,состояния), может запускать super(props)
  - render(){ return тэг...} - возвращает создаваемый JSX-элемент
  - имя_ф([об_событ]){} - ф-я компонента доступна для заупска: onClick={this.имя_ф},где this - об компонента, об_событ.target - об_HTML-элемента для доступа к его свойствам
  - this.имя_ф=имя_ф(..).bind(this) - запуск метода класса внутри конструктора этого класса
  - componentWillMount(){} - ф-я запускаемая перед первым отображением - перед запуском render
  - componentDidMount(){} - ф-я запускаемая сразу после первого отображения render когда DOM-компонент уже существует, тут можно установить загрузку д-х из БД
  - componentWillUnmount(){} - перед удалением компонента из DOM, обычно удаляют слушателей, удаляют таймеры
  - componentWillReceiveProps(об_новых_св-в){} - действие когда prop получил новые д-е (при обновлении, а не не при первой загрузке), где this.props.имя_св - старые св-ва, об_новых_св.имя_св - новые д-е, тут при вызове setState() - не запускает render
  - shouldComponentUpdate(об_новых_св-в,об_нов_состоян) - ф-я запускается при изменении props или состоян, вычисляет необходимость обновления (запуск render() ) компонента (по ум возврат true - надо), имеется готовый встроенный метод Неглубокой (!==) проверки изменений - надо унаследовать класс от React.PureComponent а не от React.Component
  - componentWillUpdate(об_новых_св-в,об_нов_состоян) - при изменении prop или состоян если вычеслена необходимость перерисовать - перед запуском render
  - componentDidUpdate(об_стар_св-в,об_стар_состоян) - при изменении prop или состоян сразу после запуска render при выполнении изменений
React-компонент созданный функцией или JSX-тэгом
- Комп.defaultProps={св1:знач1,св2:знач2,...} - для props.св у классов ES6 и у компонентов создает (как статическая переменная) одно/все значения св-ва по-умолчанию
- Комп.propTypes={св:ф-я} - создание пользовательской ф-ии валидации для props.св ф-я(props,имя_св,имя_комп){} - если значение валидно - ничего, если нет - создается ошибка new Error()
- Комп.propTypes={prop1: React.PropTypes.тип[.isRequired],...} - у класса добавляет (как статическая переменная) объект с подключенными функциями валидации (указанием типа или наличия одного/всех св-в компонента) - установка проверки типа
  - .любой_тип.isRequired - добавление проверки наличия этого св-ва
  - PropTypes.array - св-во должно быть массивом
  - PropTypes.bool - св-во должно быть логическим значением true/false
  - PropTypes.func - св-во должно быть ф-ей
  - PropTypes.number - св-во должно быть числом
  - PropTypes.object - св-во должно быть об
  - PropTypes.string - св-во должно быть строкой
  - PropTypes.any - св-во может быть любым элементарным типом
  - PropTypes.arrayOf(тип) - массив из элементов указанного типа
  - PropTypes.element - элемент
  - PropTypes.instanceOf(класс) - экземпляр указанного класса
  - PropTypes.node - любой из: число,строка,об_эл,массив
  - PropTypes.objectOf(тип) - объект указанного типа
  - PropTypes.oneOf(знач1,знач2,...) - одно из указанных значений
  - PropTypes.oneOfType([тип1,тип2,..]) - указание массива типов которыми могут быть св-ва
  - PropTypes.shape({св1:тип1,св2:тип2,...}) - создание об проверки свойства содержащего об с нобором св-в и типов
- this - ссылка на React-компонент, у каждого React-компонента свой this
- this.props - об со всеми свойствами (this.props.prop1) добавленными в компонент из вне(в виде аттрибутов JSX-тэга: Комп prop1=знач), их изменить нельзя, поэтому их передают в state
- .props.св_масс.map(function(item,[index]){return (тэг key={index} эл1 эл2 ..{item}..{index}.. /тэг);}) - создание из свойства-массива массива компонентов, отображаемые как списочные тэги, key={разные значения} - признак отображения списка компонентов
- .props.children - получение доступа к содержимому тэга (то что между откр и закр тэгами, если несколько - массив, а само-закрывающиеся тэги надо менять на два)
- .props.children - получение компонентов указанных в родителе (они не отображаются(их можно извлечь и вставить куда надо), а только собственные дочение комп- из render() )
- .props.params.имя_парам - значение параметра вычисленного из маршрута
- .state - содержит об первоначального состояния (возвращаемый ф-ей getInitialState), доступен для чтения только внутри компонента и изменения через .setState()
- .setState(об_измен,[ф-я]) - асинхронно пере-присваивает переданный набор св-в в об состояния [ф-я запускаемая после установки нового состояния] (нельзя: выполнять в render, изменять состояние напрямую this.state.св иначе не сработают события)
- .setState(ф-я(предыдущ_state,текущ_props)) - II вариант - переустанавливает св-ва об состояния используя предыдущее состоянее и текущее внещнее свойство
- .forceUpdate() - принудительное обновление компонента
- .имя_ф-ии:ф-я(об_событ) - создание ф-ии обработчика события
- .refs - (только в старых версиях) об со св-ми-именами аттрибута ref="имя" данного компонента, содержащими ссылку для поиска каждого об_эл в DOM, являющимся потомком
Синтаксис JSX-скрипта предоставляет модуль babel (тэгом может быть React-компонента или HTML-этемент)
- комп/тэг аттрибутыэл1 эл2 ../тэг - упрощенная запись соответствует ф-ии создания компонента: React.createElement('тэг',об_аттрибутов,эл1,эл2,..), где эл - строка/об_эл/компонент
- тэг / - упрощенная запись для тэг/тэг когда у комп/тэга нет внутреннего содержимого
- ```
(тэг
	тэг1/тэг1
	тэг2/тэг2
	...
/тэг)
```
  когда комп внутри содержит другие компоненты, многострочная запись заключается в скобки
- тэг1 /{' '}тэг2 / - пробел вставляемый между элементами, т.к. в JS пробелы надо вставлять явно
- textarea - первоначальное значение можно устанавливать между тэгами или в аттрибут value
- select - первоначальное значение не устанавливают аттрибутом selected, а установкой в аттрибут value
- масс.map(ф-я(знач,[индекс]){return тэг{выражен_знач}/ тэг}) - создание из массива значений массива/списка компонентов
- {/* комментарий */} - в JSX-разметкe, /*комментарий*/ или //комментарий - обычный javascript-комментарий вне разметки
- {js-выражение} - отображение значения выражения в контенте
- {js-ф-я} - возвращает компонент / масс_компонентов} - отоблажение компонентов в контенте
- {масс_комп} - масс_компонентов можно формировать програмно при наличии аттрибута key={уникальн_значение}
- {лог_выражкние && Комп /} - отображает компонент при лог_перем ровном true
- аттрибут="знач" - свойство HTML-элемента (вместо class и for применяют className и htmlFor) или свойство компонента передаваемое в props
- аттрибут={js-выражение} - аттрибуты тэга/компонента, (в JS:{аттрибут:выражение}) (св-ва компонента: this.props.аттрибут) могут получать об любого
- ref={ф-я(об_эл)} - аттрибут принимает ф-ю обратного вызова принимающую об_эл/комп текущего элемента/компонента (но комп. не созданных функцией)
- ref={props.имя_св} - аттрибут запускает ф-ю описаную в родит компоненте имя_св={ф-я(об_эл){this.перем=об_эл}}, тогда у родителя this.перем содержит об_эл потомка
- defaultValue='значен'/{значен} - указание значение по умолчанию
- defaultChecked={значен} - указание значение по умолчанию для radio и checkbox
- аттрибут и аттрибут={true} - аналогичные выражения
- {...перем_об} - spread-оператор в стиле ES6: передача аттрибутов, где перем_об={аттр1:знач1,...}
- style={{св1:знач1,...}} - стиль присваемый непосредственно элементу (названия свойств без дефисов а с заглавными буквами вторых слов: fontSize), можно устанавливать чистое числовое значение (хх:200) - воспринимается как хх:"200px", префиксы ms - с маленькой, а другие - с заглавной
- dangerouslySetInnerHTML={__html:текст} - аттрибут внедряемый внутрь тэга любой текст с разметкой (аналог innerHTML)
- слушатель_события={this.ф-я_React-компонента} - установка обработчика в форму, где в constructor() определено выражение this.имя=this.имя.bind(this) или запускать ф-ю слушатель_события={ф-я(e){return this.ф-я_React-компонента(e)}} ф-я: имя(e){..}, где e.target - об_элеметта, e.preventDefault() - отмена стандартной реакции
- Объект события внутри обработчика содержит крссбраузерные значения
  - bubbles -
  - button -
  - buttons -
  - cancelable -
  - currentTarget -
  - clientX -
  - clientY -
  - defaultPrevented -
  - detail - данные скроллинга
  - dispatchConfig -
  - eventPhase -
  - getModifierState -
  - isDefaultPrevented() -
  - isPropagationStopped() -
  - isTrusted -
  - nativeEvent -
  - pageX -
  - pageY -
  - relatedTarget -
  - screenX -
  - screenY -
  - target -
  - timeStamp -
  - type - строка названия события без on: "click"
  - view -
  - preventDefault() -
  - stopPropagation() -
  - clipboardData - данные помещенные в буффер обмена
  - altKey -
  - metaKey -
  - ctrlKey -
  - shiftKey -
  - deltaMode,deltaX,deltaY,deltaZ - вращение колеса прокрутки onWheel
- События React-компонента
  - onTouchStart -
  - onTouchEnd -
  - onTouchMove -
  - onTouchCancel -
  - onMouseMove -
  - onDragEnd -
  - onMouseEnter -
  - onDragOver -
  - onMouseLeave -
  - onDrop -
  - onMouseOut -
  - onContextMenu -
  - onClick -
  - onDrag -
  - onDoubleClick -
  - onDragEnter -
  - onMouseDown -
  - onDragLeave -
  - onMouseUp -
  - onDragExit -
  - onMouseOver -
  - onDragStart -
  - onKeyDown - нажата клавиша
  - onKeyUp - отпущена клавиша
  - onKeyPress - нажата и отпущена клавиша (содержит 2 события)
  - onFocus - получен фокус
  - onBlur - потерян фокус
  - onChange - изменено значение value
  - onInput -
  - onSubmit - нажата кнопка submit
  - onSelect -
  - onAnimationStart, onAnimationEnd, onAnimationIteration - анимация CSS
  - onTransitionEnd - переход CSS
  - onLoad,onError - результат загрузки ресурса (изображения)
  - onScroll - прокрутка элемента
  - onWheel - вращение колесика мыши
  - onCut - удаление и копирование в буффер обмена
  - onCopy - копирование в буффер обмена
  - onPaste - изъятие из буффера обмена
  - onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting -
- input - контролируемый эл, аттрибут value="знач"(это присвоение свойства об_эл) применяют только с readOnly или name="св" onChange={this.ф-я(){setState({св:e.target.value})}} value={state.св}, в constructor() добавляют this.state={св:нач_знач,..}
- input - не контролируемый эл (без аттрибута value), используют аттрибут defaultValue="нач_знач", ref="имя", у эл-та - this.refs.имя хранит ссылку на об_эл (для получения value), а у компонента - this.refs.имя хранит ссылку на подчиненый компонент (для получения state.value), где value - введенное значение
- textarea - аналогично с input вводимое значение в аттрибуте value
- select - значение выбранного эл определяется не атрибутом selected тэга option, а в тэге select аттрибут value принимает значение или массив значений
- Валидность:
  - this.state.перем_val - переменная значения создается в constructor() хранит текущее значение
  - this.state.перем_валид - переменная валидации создается в constructor() хранит результат валидации
  - ф-я_валидации(пер_val){return true/false} - ф-я валидации в constructor() вычисляет валидацию
  - ф-я_onChange(e){..} - ф-я события в constructor(): e.target - получает доступ к об_эл (получает value),this.ф-я_валидации(val) вычисляет валидацию,this.setState({св1:зн1,..}) - изменяет состояние: val,перем_валид
Обработка маршрутов react-router / react-router-dom
- Загрузка скрипта в HTML ReactRouter.js (добавляет windows.ReactRouter) : npm install —save react-router или загрузка он-лайн (https://unpkg.com/react-router/umd/react-router.min.js)
  - var Router_компонент = ReactRouter.Router_компонент; - JSX-компонент для создания маршрута
  - var browserHistory = R.R.browserHistory / R.R.hashHistory; - выбор способа вычисления маршрута (http://адрес:порт/маршрут) / (http://адрес:порт/#/маршрут)
- Для приложения npm install —save react-router-dom, затем import { BrowserRouter as Router, Route, Link,... } from 'react-router-dom';
- Switch маршруты /Switch - контейнер только для Route-маршрутов
- BrowserRouter history={browserHistory} маршруты /BrowserRouter - основной контейнер всех Route-маршрутов,
  - basename="часть_пути" - часть начала пути (если не указано location)
  - getUserConfirmation={ф-ия} - ф-ия для подтверждения изменения пути
  - forceRefresh={true/false} - перезапуск страницы (для не HTML5)
  - keyLength={N} - указание длины location.key (ум - 6)
  - history={об_history} - добавление об history (npm install --save history и import createHistory from 'history/createBrowserHistory' или он-лайн https://unpkg.com/history/umd/history.min.js)
  - children={об_эл/компонент} - внедрение внутреннего содержания контейнера
- HashRouter history={browserHistory} маршруты /HashRouter - основной контейнер всех Route-маршрутов,
  - basename="часть_пути" - часть начала пути (если не указано location)
  - getUserConfirmation={ф-ия} - ф-ия для подтверждения изменения пути
  - hashType="slash/noslash/hashbang" - установка признака хэша #/ , # , #!/ (ум - slash)
  - history={об_history} - добавление об history (npm install --save history и import createHistory from 'history/createBrowserHistory' или он-лайн https://unpkg.com/history/umd/history.min.js)
  - children={об_эл/компонент} - внедрение внутреннего содержания контейнера
- StaticRouter location="путь" .. /StaticRouter - создание и выполнение контейнера одного маршпута, применяют для тестирования
  - context={об} - об контекста наполняется свойствами после выполнения
  - location="путь"/об - единственный путь, срабатываемый для содержимого
  - basename="часть_пути" - часть начала пути (если не указано location)
  - children={об_эл/компонент} - внедрение внутреннего содержания контейнера
- MemoryRouter location="путь" .. /MemoryRouter - создание и выполнение контейнера одного маршпута, применяют для тестирования
  - initialEntries={масс_путей} - массив путей
  - initialIndex={N} - индекс выбранного пути
  - getUserConfirmation={ф-ия} - ф-ия для подтверждения изменения пути
  - keyLength={N} - указание длины location.key (ум - 6)
  - children={об_эл/компонент} - внедрение внутреннего содержания контейнера
- Route path="маршрут1" component={Имя_компонента1} - создание одного маршрута с указанием пути (для сопоставления) и компонента (для открытия нужной страницы), может иметь дочерние пути (внедряются во внутрь текущего Route), путь вычисляется "текущ_путь"+"дочерн_путь" = "текущ_путьдочерн_путь"
  - path="путь" - Маршрут, при его отсутствии (последняя строка) - любой не совпавший путь
    - "/" - корневой маршрут, обычно основной, срабатывает при отсутствии маршрута
    - "имя" - имя, применяемое для выбора маршрута, если он дочерний - то к нему спереди, через "/" будет добавляться основной
    - ".. :имя_парам .." - имя параметра, присваемое при получении маршрута, передаваемое в компонент и доступно как this.props.params.имя_парам
    - ".. (/:имя_парам) .." / "..(/имя).." - круглые скобки указывают на не-обязательность присутствия части маршрута или параметра, их может быть нескольно: ..(..)..(..).. и они могут быть вложенными: (...(...))
    - "*" - маршрут при не соответствии ни одному из предыдущих
  - component={Имя_компонента} - компонент отображаемый при выборе маршрута
  - render={ф-ия} - ф-ия при выборе возвращает компонент (если не применяется component)
  - children={ф-ия} - ф-ия всегда отображает компонент (если не применяется component,render)
  - exact - требует полного совпадения пути, иначе маршрут сраборает при совпадении части пути
  - strict - требует полного совпадения пути с замыкающим слэшем, иначе маршрут сраборает не зависимо от замыкающего слэша
- history - об внедряется в компонент выбранного маршрута в props (похож на window.history)
  - pushState(null/об_св-в, "маршрут") - добавления пути в историю
  - replaceState(null/об_св-в, "маршрут") - замена текущего пути в истории
  - goBack() - переход на один назад
  - goForward() - переход на один вперед
  - Go(число) - переход на число вперед/назад
  - createHref() - создание ссылки из текущего маршрута
  - location - об текущего пути {pathname, search, hash, state}
- location - об добавляется в props компонента выбранного маршрута (или передается в ф-ию аттр render,children как св. об)
  - pathname -
  - search -
  - search -
  - state -
- match - об добавляется в props компонента выбранного маршрута (или передается в ф-ию аттр render,children как св. об)
  - params - параметры-переменные полученные при совпадении маршрута
  - isExact - проверка полного совпадения
  - path - строка применяемая для установка маршрута
  - url - строка пути
- Redirect to="путь" / - компонент запускает новый маршрут в виде строки/объекта:{}, добавляют в логику, условия
  - to="путь"/{об} - маршрут в виде строки/объекта:{pathname,search,hash,state}
  - push - добавление этого перехода в историю
  - from="путь" - маршрут исходящего перехода (внутри контейнера switch)
- Link to="полный маршрут1"Текст ссылки/Link - создание ссылки для перехода по маршруму
  - to="путь"/{об} - маршрут в виде строки/объекта:{pathname,search,hash,state}
  - replace - замена этого пути в истории
- NavLink to="полный маршрут1"Текст ссылки/Link - создание ссылки с дополнительными возможностями
  - to="путь"/{об} - маршрут в виде строки/объекта:{pathname,search,hash,state}
  - replace - замена этого пути в истории
  - activeClassName="имя_класса" - при нажатии не ссылку ей добавляется класс
  - activeStyle={об_стилей} - при нажатии не ссылку ей добавляется набор CSS-стилей
  - exact - требует полного совпадения пути, иначе маршрут сраборает при совпадении части пути
  - strict - требует полного совпадения пути с замыкающим слэшем, иначе маршрут сраборает не зависимо от замыкающего слэша
  - isActive={ф-ия} - совпадение маршрута проверяется ф-ией при возврате true
- matchPath('путь',{path:..,exact:..,strict:..}) - изменение пути для запуска маршрута
- withRouter(компонент) - получение history при выборе маршрута
ReactCSSTransitionGroup - библиотека переходов и анимаций в React
- установка : npm install —save react-addons-css-transition-group
- подключение : import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; - подключение в скрипт компонента
- ReactCSSTransitionGroup аттрибуты цель-//- - добавление анимации с аттрибутами к цели (набор элементов/компонентов внутри одного контейнера)
- transitionName="имя" - присвоение имени анимации (класс всех элементов - "имя-...")
- transitionEnterTimeout={число} - длительность добавления в мс ("-enter" - элемент для добавления, "-enter-active" - элемент уже добавленный и содержит transition)
- transitionLeaveTimeout={число} - длительность удаления в мс ("-leave" - элемент для удаления, "-leave-active" - элемент уже удален и содержит transition)
- transitionAppear={true} - подключение эффекта появления уже имеющихся элементов
- transitionAppearTimeout={число} - длительность появления в мс ("-appear" - все элементы появляются, "-appear-active" - элемент уже появились и содержит transition)
DnD - библиотека перетягивания элементов в React
- установка : npm install –-save react-dnd@2.x.x react-dnd-html5-backend@1.x.x
- подключение : import import { DragDropContext } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend';
- подключение в скрипт компонента export default DragDropContext(HTML5Backend)(компонент); - завершение модуля
React SVG
React Canvas
React Native
EventEmitter - модуль для передачи данных между компонентами с помощью событий
- window.ee = new EventEmitter() - создание глобального об для приема-передачи событий
- window.ee.emit('имя_событ',об_д-х) - генерация события 'имя_событ' с передачей об_д-х
- window.ee.addListener('имя_событ',ф-я(перем_об_д-х)) - обработка события 'имя_событ' с получением об_д-х
- wimdow.ee.removeListener('имя_событ') - отключение слушателя события (в другом компоненте)
React работающий в Back-end
- create-react-app - готовое React-приложение с зависимостями
  - npm install -g create-react-app - установка
  - create-react-app my-app - инсталляция
  - cd my-app - переход к папке
  - npm start - загрузка зависимых модулей
  - npm run build - создание в папке build оптимизированого приложения
- Создание React-приложения вручную с применением webpack
  - Типичная структура приложения
```
	
source (папка) - папка для сохранения всех скриптов приложения, первый обычно называется app.js
index.html - основная HTML-страница
package.json - настройка node.js (загрузка фрэймверков и библиотек в папку node_module) для данного приложения
webpack.config.js - настройка сборщика js-файлов в единый 
```
  - Подгружаемые библиотеки
    - npm install -g babel - библиотека преобразования ES6 (EcmaScript2015)
    - npm install -g babel-cli
    - npm install babel-core
    - npm install babel-loader
    - npm install babel-preset-react
    - npm install babel-preset-es2015
    - mkdir имя_проекта - создание папки приложения
    - npm install webpack --save - библиотека сборки и компиляции скриптов в один
    - npm install webpack-dev-server --save
    - npm install react --save - библиотека React
    - npm install react-dom --save - библиотека React
    - index.html - первая HTML-страница
    - npm init - создание файла package.json с информацией об проекте
```
{
  "name": "webpackapp",
  "version": "1.0.0",
  "scripts": {
    "start": "lite-server"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "lite-server": "^2.2.2",
    "webpack": "^1.14.0"
  }
}
```
    - webpack.config.js - настроенный сборщик скриптов
```
			
module.exports = {
    entry: "./app/app.jsx", // входная точка - исходный файл
    output:{
        path: "public",     // путь к каталогу выходных файлов - папка public
        filename: "bundle.js"       // название создаваемого файла
    },
    resolve:{   
        extensions: ["", ".js", ".jsx"] // расширения для загрузки модулей
    },
    module:{
        loaders:[   //загрузчики
            {
                test: /\.jsx?$/, // определяем тип файлов
                exclude: /(node_modules)/,
                loader: ["babel-loader"],
                query:{
                    presets:["es2015", "react"]
                }
            }
        ]
    }
}			
```
    - В NodeJS выполняется команда .\node_modules\.bin\webpack - для формирования js-файла
    - npm start - запуск приложения в папке приложения
    - Приложение доступно по адресу http://localhost:3000/
- Flux - представление приложения в 3-х частях:диспетчер (dispatcher) , хранилище данных (store) и представления (view - эту роль выполняет React)
  - диспетчер - регистритует хранилища, получает запросы в кранилища, общается с хранилищем
    new_Dispatcher = new flux.Dispatcher - создание об диспетчера через его конструктор класса
    об_действий = { имя(арг){ new_Dispatcher.dispatch({type:"",арг}) }, ... } - регистрация действий в виде объекта с функциями, получающих название действия и д-е как арг
  - хранилище данных - создается класс Класс_хранил в стиле ES6 унаследованный от ReduceStore, где
    constructor(){..} - запускает super(Класс_хранил)
    getInitialState(){..} - возвращает значение state как хранилища д-х
    reduce(state, action){..} - передается об состояния state и вызванное действие action, в зависимости от выбранного действия над state выполняется функция и возвращает измененный state
    new Класс_хранил() - создается об
  - представление - создается React-компонент, где
    constructor(props){..} - устанавливает первоначальное this.state
    ф-я(e){} - функция обработчик события, изменяет state функцией this.setState(об)
    render(){} - возвращает JSX-разметку, где
    input - может изменять state
    кнопки - запускают props.ф-ии(..), т.е. ф-ии получены из вне как свойства
  - контейнер - создает React-компонент содержит
    static getStores(){..} - статическая ф-я, возвращает массив всех хранилищ
    static calculateState(prevState){..} - статическая ф-я, возвращает об как состояние контейнера: список данных,набор функций над данными
    render(){} - возвращает React-компонент представления с переданными аттрибутами из this.state: список данных,набор функций над данными
    Container.create(контейнер) - создание контейнера
  - основной файл app.js
    ReactDOM.render(контейнер /, об_эл) - внедрение контейнера в об_эл
  - webpack.config.js - объединение всех js-файлов в один
- Reflux - модель приложения (упрощенный Flux) в 3-х частях: Действие (action), представления (view), Хранилище (store)
  - действия - создание списка функций Reflux.createActions(["addItem", "removeItem"]); - создает список действий
  - хранилище - создается класс унаследованый от Reflux.Store constructor(){..} - создает this.state, методом this.listenTo(знач_действие,ф-я) устанавливает соответствие ф-ии над состоянием с действием ф-ии(..){..} - определение ф-ий выполняемых над состоянием и подключаемых к действию
  - представление - создается Reflux-компонент (похож на React-компонент) constructor(props){} - устанавливает начальные this.state, в this.store сохраняется об хранилища или в this.stores сохраняется массив об хранилищ ф-я(e){} - функция обработчик события, изменяет state функцией this.setState(об) и выполняет действие над хранилищем
    render(){} - возвращает JSX-разметку, где
    input - может изменять state
    кнопки - запускают ф-ии действий над текущим хранилищем и при необходимости над state списки - отображают state.массив_данных, т.е. данные уже подвязаны к компоненту
  - основной файл app.js
    ReactDOM.render(Reflux-компонент /, об_эл) - внедрение контейнера в об_эл
  - webpack.config.js - объединение всех js-файлов в один
- Redux - модель приложения (упрощенный Flux) в 3-х частях: Действие (action), представления (view), Хранилище (store) , npm install --save react-redux
  - действия - создание функций имя_ф=function(арг){return {type:"имя_действ",арг}} - возвращает об с типом тействия и д-е
  - reducer - ф-я(свойства,действие){} - получает хранилище(в свойстве) и значение действия которое по switch выполняет это действие и возвращает измененное хранилище
  - представление - создаются React-компоненты из которых состоит constructor(props){} ф-я(e){} - функция обработчик события, изменяет хранилище в свойстве this.props.хранилище функцией из свойства this.props.ф-ия()
    render(){} - возвращает JSX-разметку, где
    input - содержит аттрибут ref=".." для доступа к элементу (value)
    кнопки - запускают ф-ии действий над текущим хранилищем и при необходимости над элементами через this.refs.имя списки - отображают this.props.массив_данных, т.е. данные передаются компоненту как аттрибуты
  - основной файл app.js
    store = redux.createStore(reducer); store.dispatch({type:,state:{хранил:данные}}) ReactDOM.render( Provider store={store} React-компонент /, об_эл) - внедрение Provider в об_эл
  - webpack.config.js - объединение всех js-файлов в один

WebDeveloper

Добро пожаловать в приложение предназначенное для изучения Web-технологий

Корневые тэги

Тэги, которые могут присутствовать в HEAD:

Блочные тэги - начинаются и заканчиваются новой строкой, по умолчанию занимают ширину родителя и высоту контента

Списочные и табличные тэги - размещают контент по-строчно

Тэги гиперссылок

Тэги форматирования текста

Тэги формы и элементов ввода - продолжают строку, по умолчанию занимают ширину и высоту контента

Специальные символы

Специальные тэги - загружают ресурсы и обрабатывают их

Тэги SVG-рисования

Селекторы - способ отбора элементов (подобие поиска)

Псевдоклассы - (вес - 10) дополнительная фильтрация элементов

Комбинация селекторов - дополнительная фильтрация элементов

Свойства - параметры элементов

Типы данных

Структуры программного кода

Иерархичечская структура окна браузера и документа

Объект узлов и элемента

Просмотр значений

JQuery - модуль управления html-объектами через javascript-код

jQueryUI - дополнительный модуль к jQuery расширяющий возможности:эффекты, виджеты, перетаскивание

Bootstrap - расширение билиотеки JQuery и классификация отображаемых элементов

Модули для быстрого создания приложений на AngularJS

lineman - готовое приложение на AngularJS

angular-seed - готовое приложение на AngularJS

Yeoman - генержатор приложения на AngularJS

инициализация контекста

списки

управление отображением

классы

события, ф-я может получить в аргументе $event - объект события DOM

вставка переменных в аттрибуты

интерполяция - отображение значения выражения(связывание от модели к отображению)

Angular 2+ / TypeScript - фреймверк для создания приложений (подобен AngularJS 1.x)

@angular/cli - ускоренная разработка Typescript-приложения

React - библиотека для манипулирования элементами

SASS - модуль упрощенной записи стилей CSS из файлов *.sass(применяют без скобок и тчк.зпт и с отступами) *.scss(в стиле css)

LESS - модуль упрощенной записи стилей CSS из файлов *.less

STYLUS - модуль упрощенной записи стилей CSS из файлов *.styl, где использованы только отступы без скобок и тчк.зпт

grunt.js - система сборки приложений на JavaScript

webpack - система сборки модулей на JavaScript, CSS

gulp.js - система обработки ф-ов, сборки приложений на JavaScript, CSS, изображений

Карта Google.Maps

Ваши модули

Создание

Установка и настройка

Сервисные утилиты для управления Node.js

ядро Node.js

Модули связи, сокетов

http - Модуль для создания сетевого соединения по протоколу http:\\

Создание сервера соединений

Создание клиента соединения с другим сервером

http2 - Модуль для создания сетевого соединения по протоколу http:\\

request - Модуль для создания простого клиентского соединения по протоколу http:\\

Создание клиента соединения

https - Модуль для создания защищенного сетевого соединения по протоколу https:\\

Создание сервера соединений

Создание клиента соединения

net - Модуль для создания TCP-соединения (наиболее надежное)

Создание сервера соединений

Создание клиента соединения (можно применить утилиты TCP-клиента: netcat хост порт, telnet хост порт)

dgram - Модуль для создания UDP-соединения (быстрое но не надежное соединение - трансляция онлайн)

Создание сервера соединений

Создание клиента соединения

Socket.IO (WebSocket) - Модуль для создания двунаправленного TCP-соединения, с восстановлением связи

Создание сервера соединений

Создание клиента соединения в браузере

Модули связующие

Connect - Модуль связующий для обработки запросов от клиентов

JSGI - Модуль связующий

Модули маршрутизаторов и прокси

Crossroads - Модуль маршрутизатора (фильтр пути запроса)

http-proxy - Модуль перенаправления запроса на другой аддрес

Модули дополнительных функций

Модули для REPL

repl - Модуль для создания собственной версии REPL - интерпретатора Node.js

colors - Модуль раскраски сообщений консоли (есть еще clicolor)

ansi - Модуль раскраски сообщений консоли

SASS - модуль упрощенной записи стилей CSS из файлов .sass(применяют без скобок и тчк.зпт и с отступами) .scss(в стиле css)