Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
java-script:angularjs:lessons [2016/01/05 03:56] – 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
-  * 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 - Область контроллера содержащая данные модели
Строка 42: Строка 44:
  
 <note tip>Директивы при создании всегда именуются с использованием lowerCamelCase. При использовании директиву необходимо именовать в нижнем регистре с использованием в качестве разделителя одного из спец символов: :, -, или _. По желанию для получения валидного кода можно использовать префиксы x- или data-. Примеры: tb:tooltip, tb-tooltip, tb_tooltip, x-tb-tooltip и data-tb-tooltip.</note> <note tip>Директивы при создании всегда именуются с использованием lowerCamelCase. При использовании директиву необходимо именовать в нижнем регистре с использованием в качестве разделителя одного из спец символов: :, -, или _. По желанию для получения валидного кода можно использовать префиксы x- или data-. Примеры: tb:tooltip, tb-tooltip, tb_tooltip, x-tb-tooltip и data-tb-tooltip.</note>
 +
 +==== 4 способа задания директив ====
 +
 +<note tip><code html><my-element></my-element>
 +
 +<div my-element></div>
 +
 +<div class="my-element"></div>
 +
 +<!-- directive: my-element --></code></note>
 +
 +==== Ограничение / restrict ====
 +
 +При указании restrict: "A", данная директива будет доступна только для аттрибутов, те <div my-directive></div>
 +
 +  * E - для элементов
 +  * A - для атрибутов
 +  * C - для классов
 +  * М - для комментариев
  
 ==== Фазы работы директивы ==== ==== Фазы работы директивы ====
Строка 51: Строка 72:
  
 [[http://jsfiddle.net/vojtajina/8yzbZ/|Последовательность выполнения фаз]] [[http://jsfiddle.net/vojtajina/8yzbZ/|Последовательность выполнения фаз]]
-==== Пример встроенных директив ====+ 
 +==== Встроенные директивы ====
  
   * ng-init - Инициализация APP   * ng-init - Инициализация APP
 +  * ng-repeat - Выводить массив данных
 +  * ng-show | ng-hide - Выводить или нет контейнер
 +    * Пример: ng-show="product.images.length", ng-hide="product.images[0].hidden"> 
 +  * ng-class - Сообщает имя класса
 +  * ng-click - Слушает событие клик на объекте
 +  * ng-model - Служит для привязки контролера к элементам формы
 +
 +https://docs.angularjs.org/guide/directive
 +
 +<code html>
 +<div ng-app="myApp">
 +  <div ng-controller="myAppConroller as controller">
 +    <div ng-repeat="item in controller.items | limitTo:3 | orderBy:'-price'">
 +      <div ng-hide="controller.item.soldOut">
 +        <h1>{{item.name | name}}</h1>
 +        <h1>{{item.price | price}}</h1>
 +        <h1>{{item.description | limitTo:52}}</h1>
 +        <button ng-show="controller.product.canPurchase"> Add to Cart </button>
 +      </div>
 +    </div>
 +  </div>
 +  
 +  <div ng-controller="reviewsConroller as review">
 +  <div class="myForms">
 +    <form name="reviewForm">
 +      <blockquote>
 +        {{review.stars}}
 +        {{review.body}}
 +      </blockquote>
 +      <select ng-model="review.stars">
 +        <option value="1">1 Star</option>
 +      </select>
 +      <textarea ng-model="review.body"></textarea>
 +      <input type="submit" value="Submit">
 +    </form>
 +  </div>
 +  </div>
 +</div>
 +</code>
 +
 +
 +==== API Директив ====
 +
 +  * [[java-script:angularjs:diretive:api]]
 +
 +=== Пример кастомных директив ===
 +
 +  * [[http://habrahabr.ru/post/260559/|Директива AngularJS для запоминания e-mail]]
 +
 +=== Пример реализции динамических шаблонов ===
  
 +  * https://github.com/simpulton/angular-dynamic-templates
 ==== Расширения ==== ==== Расширения ====
  
Строка 128: Строка 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 =====
Строка 327: Строка 444:
 ==== Scope ==== ==== Scope ====
  
-{{:java-script:angularjs:atagg.png?300|}}+{{:java-script:angularjs:atagg.png?|}}
  
 https://docs.angularjs.org/guide/scope https://docs.angularjs.org/guide/scope
Строка 384: Строка 501:
 }]); }]);
 </code> </code>
-===== Derectives ===== 
  
-  * ng-init 
-  * ng-repeat - Выводить массив данных 
-  * ng-show | ng-hide - Выводить или нет контейнер 
-    * Пример: ng-show="product.images.length", ng-hide="product.images[0].hidden">  
-  * ng-class - Сообщает имя класса 
-  * ng-click - Слушает событие клик на объекте 
-  * ng-model - Служит для привязки контролера к элементам формы 
  
-https://docs.angularjs.org/guide/directive+==== Filters ====
  
-<code html> +Фильтры обрабатывают информацию и выдают определённые наборы данных, основываясь на какой-либо логике. Это может быть что угодно, от форматирования даты в читаемый формат, до списка имён, которые начинаются на заданную букву. Посмотрим на популярные встроенные фильтры.
-<div ng-app="myApp"> +
-  <div ng-controller="myAppConroller as controller"> +
-    <div ng-repeat="item in controller.items | limitTo:3 | orderBy:'-price'"> +
-      <div ng-hide="controller.item.soldOut"> +
-        <h1>{{item.name | name}}</h1> +
-        <h1>{{item.price | price}}</h1> +
-        <h1>{{item.description | limitTo:52}}</h1> +
-        <button ng-show="controller.product.canPurchase"> Add to Cart </button> +
-      </div> +
-    </div> +
-  </div> +
-   +
-  <div ng-controller="reviewsConroller as review"> +
-  <div class="myForms"> +
-    <form name="reviewForm"> +
-      <blockquote> +
-        {{review.stars}} +
-        {{review.body}} +
-      </blockquote> +
-      <select ng-model="review.stars"> +
-        <option value="1">1 Star</option> +
-      </select> +
-      <textarea ng-model="review.body"></textarea> +
-      <input type="submit" value="Submit"> +
-    </form> +
-  </div> +
-  </div> +
-</div> +
-</code>+
  
-==== Filters ====+<note tip>Аргументы в фильтр передаются через : двоеточия</note> 
 + 
 +<note tip>Фильтр это обычный метод контролера и может создаваться без специализированного метода .filter()</note>
  
-  * limitTo+  * 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]]
  
Строка 451: Строка 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>
  
Строка 492: Строка 586:
 </code> </code>
  
-==== APP ====+===== APP =====
  
   * [[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 / Представление ======
 +
 +===== 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>