Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
java-script:angularjs:lessons [2016/01/09 14:03] – [Пример] mirocowjava-script:angularjs:lessons [Дата неизвестна] (текущий) – внешнее изменение (Дата неизвестна) 127.0.0.1
Строка 15: Строка 15:
   * [[java-script:angularjs:lessons#view_представление|View]] - HTM представление (может содержать ng дериктивы)   * [[java-script:angularjs:lessons#view_представление|View]] - HTM представление (может содержать ng дериктивы)
     * Template - HTML шаблон     * Template - HTML шаблон
-      * [[java-script:angularjs:lessons#derectives|Directives]] - extend HTML with custom attributes and elements+      * [[java-script:angularjs:lessons#директивы|Directives]] - extend HTML with custom attributes and elements
       * Markup - Обработка шаблона {{ }}       * Markup - Обработка шаблона {{ }}
-      * Filter - Обработка данных перед выводом +      * [[java-script:angularjs:lessons#filters|Filter]] - Обработка данных перед выводом 
-      * Form controls - +      * [[java-script:angularjs:lessons#form|Form]] controls - Angular автоматически обрабатывает формы
   * Compiler - parses the template and instantiates directives and expressions   * Compiler - parses the template and instantiates directives and expressions
   * [[java-script:angularjs:lessons#controller|Controller]] - the business logic behind views   * [[java-script:angularjs:lessons#controller|Controller]] - the business logic behind views
-    * Behavior - Функции внутри контролера+    * [[java-script:angularjs:lessons#behavior|Behavior]] - Функции внутри контролера
     * Model - Данные содержащиеся в контролере     * Model - Данные содержащиеся в контролере
     * [[java-script:angularjs:lessons&#scope|Scope]] - $scope - Область контроллера содержащая данные модели     * [[java-script:angularjs:lessons&#scope|Scope]] - $scope - Область контроллера содержащая данные модели
Строка 507: Строка 507:
 Фильтры обрабатывают информацию и выдают определённые наборы данных, основываясь на какой-либо логике. Это может быть что угодно, от форматирования даты в читаемый формат, до списка имён, которые начинаются на заданную букву. Посмотрим на популярные встроенные фильтры. Фильтры обрабатывают информацию и выдают определённые наборы данных, основываясь на какой-либо логике. Это может быть что угодно, от форматирования даты в читаемый формат, до списка имён, которые начинаются на заданную букву. Посмотрим на популярные встроенные фильтры.
  
-  * limitTo+<note tip>Аргументы в фильтр передаются через : двоеточия</note> 
 + 
 +<note tip>Фильтр это обычный метод контролера и может создаваться без специализированного метода .filter()</note> 
 + 
 +  * limitTo - Ограничивает количество выводимых данных
   * uppercase   * uppercase
   * date:"MM/dd/yyyy @ h:mma"   * date:"MM/dd/yyyy @ h:mma"
-  * orderBy+  * orderBy - Сортирует выводимые данные
   * [[java-script:angularjs:lessons&#custom-filters|custom filters]]   * [[java-script:angularjs:lessons&#custom-filters|custom filters]]
  
Строка 529: Строка 533:
   soldOut: true,   soldOut: true,
 } }
 +</code>
 +
 +=== limitTo ===
 +
 +Обычно применяется совместно с директивой ng-repeat
 +
 +<code javascript>
 +<ul>
 +  <li ng-repeat="user in users | limitTo:10">
 +    {{ user.name }}
 +  </li>
 +</ul>
 </code> </code>
  
Строка 574: Строка 590:
   * [[http://angularlight.org/|MVVM web interfaces/applications. Angular.js + Knockout.js way.]]   * [[http://angularlight.org/|MVVM web interfaces/applications. Angular.js + Knockout.js way.]]
  
 +
 +====== Привязка данных ======
 +
 +===== Bind =====
 +
 +  * ng-bind: осуществляет привязку к свойству innerText html-элемента
 +  * ng-bind-html: осуществляет привязку к свойству innerHTML html-элемента
 +  * ng-bind-template: аналогична ng-bind за тем исключением, что позволяет установить привязку сразу к нскольким выражениям
 +  * ng-model: создает двустороннюю привязку
 +  * ng-non-bindable: определяет участок html-кода, в котором привязка не будет использоваться
  
 ====== View / Представление ====== ====== View / Представление ======
  
-====== Шаблонизация и импорт HTML ======+===== Form ===== 
 + 
 +  * [[java-script:angularjs:lessons:form]] 
 +===== Шаблонизация и импорт HTML =====
  
   * Все загруженные шаблоны хранятся в $templateCache в течение всей жизни приложения.   * Все загруженные шаблоны хранятся в $templateCache в течение всей жизни приложения.