Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
java-script:angularjs:lessons [2016/01/09 13:40] – [Фазы работы директивы] mirocowjava-script:angularjs:lessons [Дата неизвестна] (текущий) – внешнее изменение (Дата неизвестна) 127.0.0.1
Строка 1: Строка 1:
 {{tag>java-script angular angularjs lessons}} {{tag>java-script angular angularjs lessons}}
  
-====== Angular.JS ======+====== Angular.JS - Краткая документация ======
  
 MVC - Java-Script это  MVC - Java-Script это 
Строка 7: Строка 7:
 ====== APP / Modules ====== ====== APP / Modules ======
  
-  * Module - Базовый контейнер для app включает в себя controllers, services, filters, directives сконфигурированные Injector +  * [[java-script:angularjs:lessons#module|Module]] - Базовый контейнер для app включает в себя controllers, services, filters, directives сконфигурированные Injector 
-  * Service - Бизнес логика для отображения в views+  * [[java-script:angularjs:lessons#service_сервисы|Service]] - Бизнес логика для отображения в views 
 +    * [[java-script:angularjs:lessons#factory|Factory]] -  
 +    * [[java-script:angularjs:lessons#provider|Provider]] - 
   * Dependency-Injection - Создает ленивые связи с объектами   * Dependency-Injection - Создает ленивые связи с объектами
   * Injector - dependency injection container   * Injector - dependency injection container
   * [[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 - Область контроллера содержащая данные модели
Строка 73: Строка 75:
 ==== Встроенные директивы ==== ==== Встроенные директивы ====
  
-  * ng-init+  * ng-init - Инициализация APP
   * ng-repeat - Выводить массив данных   * ng-repeat - Выводить массив данных
   * ng-show | ng-hide - Выводить или нет контейнер   * ng-show | ng-hide - Выводить или нет контейнер
Строка 113: Строка 115:
 </div> </div>
 </code> </code>
-==== Пример встроенных директив ==== 
  
-  * ng-init - Инициализация APP 
  
-==== Пример кастомных директив ====+==== API Директив ==== 
 + 
 +  * [[java-script:angularjs:diretive:api]] 
 + 
 +=== Пример кастомных директив ===
  
   * [[http://habrahabr.ru/post/260559/|Директива AngularJS для запоминания e-mail]]   * [[http://habrahabr.ru/post/260559/|Директива AngularJS для запоминания e-mail]]
  
-==== Пример реализции динамических шаблонов ====+=== Пример реализции динамических шаблонов ===
  
   * https://github.com/simpulton/angular-dynamic-templates   * https://github.com/simpulton/angular-dynamic-templates
Строка 197: Строка 201:
   </div>   </div>
 </div> </div>
 +</code>
 +
 +==== Пример ====
 +
 +<code javascript>
 +app.service('helloWorldFromService', function() {
 +    this.sayHello = function() {
 +        return "Hello, service!"
 +    };
 +});
 +</code>
 +
 +===== Factory =====
 +
 +<code javascript>
 +app.factory('helloWorldFromFactory', function() {
 +    return {
 +        sayHello: function() {
 +            return "Hello, Factory!"
 +        }
 +    };
 +});
 +</code>
 +
 +===== Provider =====
 +
 +<code javascript>
 +app.provider('helloWorld', function() {
 +
 +    this.name = 'Provider';
 +
 +    this.$get = function() {
 +        var name = this.name;
 +        return {
 +            sayHello: function() {
 +                return "Hello, " + name + "!"
 +            }
 +        }
 +    };
 +
 +    this.setName = function(name) {
 +        this.name = name;
 +    };
 +});
 </code> </code>
 ===== Controller ===== ===== Controller =====
Строка 457: Строка 505:
 ==== Filters ==== ==== Filters ====
  
-  * 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]]
  
Строка 479: Строка 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>
  
Строка 524: Строка 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 / Представление ======
  
 +===== Form =====
 +
 +  * [[java-script:angularjs:lessons:form]]
 +===== Шаблонизация и импорт HTML =====
 +
 +  * Все загруженные шаблоны хранятся в $templateCache в течение всей жизни приложения.
 +
 +===== template =====
 +
 +
 +<code javascript>
 +{
 +  template: [
 +    '<div>',
 +      '<ul>',
 +        '<li ng-repeat="item in vm.items">',
 +          '{{ item }}',
 +        '</li>',
 +      '</ul>',
 +    '</div>'
 +  ].join('')
 +}
 +</code>
 +
 +===== templateUrl =====
 +
 +<code javascript>
 +{
 +  templateUrl: './partials/items.html'
 +}
 +</code>
 +
 +Angular сначала поищет в DOM элемент <script> с подходящим id, а если не найдёт, тогда запросит документ через HTTP GET.
 +
 +<code html>
 +<script type="text/ng-template" id="/hello.html">
 +  <div>
 +    <ul>
 +      <li ng-repeat="item in vm.items">
 +        {{ item }}
 +      </li>
 +    </ul>
 +  </div>
 +</script>
 +</code>