Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
java-script:angularjs:lessons [2016/01/09 13:50] – [API Директив] 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 - Область контроллера содержащая данные модели
Строка 117: Строка 119:
 ==== API Директив ==== ==== API Директив ====
  
-<code javascript> +  * [[java-script:angularjs:diretive:api]]
-angular.module('app').controller('someDirective', function(){ +
-  return { +
-    restrict: 'EA', +
-    replace: true, +
-    scope: true, +
-    controllerAs: 'something', +
-    controller: function () { +
- +
-    }, +
-    link: function ($scope, $element, $attrs) { +
- +
-    }, +
-    template: [ +
-      '<div class="some-directive">', +
-        'My directive!', +
-      '</div>' +
-    ].join(''); +
-  };   +
-}); +
-</code>+
  
 === Пример кастомных директив === === Пример кастомных директив ===
Строка 219: Строка 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 =====
Строка 479: Строка 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]]
  
Строка 501: Строка 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>
  
Строка 546: Строка 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 в течение всей жизни приложения.