Краткий обзор фрэймворка AngularJS: что это такое и зачем все эти сложности. И сложности ли это вообще. Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/

1. Getting familiar with
AngularJS
by Paul Seleznev

2. План презентации
В двух словах о SPA(Single page application)
Основные особенности AngularJS
MVC в AngulaJS
Что такое модуль в Angular и как с ним работать
Общее представление о директивах в AngularJS
Создание пользовательских директив
Фильтры
Services

3. Что такое SPA?
это веб-приложение, которое
выполняется непосредственно на
стороне клиента в Web-браузере
обычно написанное на комбинации из
HTML, JavaScript и CSS
by wikipedia.com

4. Что такое AngularJS?
JavaScript-фреймворк с открытым исходным кодом,
разрабатываемым Google
Angular JS адаптирует и расширяет традиционный HTML,
чтобы обеспечить двустороннюю привязку данных для
динамического контента, что позволяет автоматически
синхронизировать модель и представление
Ключевые особенности:
- Директивы и фильтры
- Двунаправленное связывание данных(моделей)
- Вид, контроллер, $scope
- Модули и роутинг

6. Какие цели преследовались
при разработки?
Отделение DOM-манипуляции от логики приложения для
улучшения тестируемости кода.
Отношение к тестированию как к важной части разработки.
Сложность тестирования напрямую зависит от
структурированности кода.
Разделение клиентской и серверной стороны, что позволяет
вести разработку параллельно.
Проведение разработчика через весь путь создания
приложения: от проектирования пользовательского
интерфейса, через написание бизнес-логики, к
тестированию.

7. result
Подключение
библиотеки
Определение блока
за который отвечает
контроллер в HTML
коде(body tag)
Обход массива
пользователей, который
был добавлен ранее в
$scope(li елемент
используется как шаблон
для каждой итерации)
Определение
контроллера в тэге script.
Во все контроллеры
инжектиться
$scope(ViewModel)
$scope виден для
всего блока в HTM
L
коде, за который
отвечает этот
контроллер

8. MVC in AngularJS

9. Th
es
am
e
Контроллер, модель и
$scope
Контроллер можно создать двумя
способами:
- как функцию имя которой будет именем
контроллера
- вызовом метода controller у созданного
модуля

10. Модули в AngularJS
Преимущества
лей
спользования моду
и
Более описательный код
Легче unit-тестирование
Third-party код легче
подключать модулями
Параллельная загрузка
модулей
Объявить модуль с по
мощью
медота module обьект
а angular
Указать в html коде ка
кой блок
будет работать с этим
модулем

11. Советы по созданию
модулей
Модуль для сервисов
Модуль для директив
Модуль для фильтров
Модуль уровня приложения, зависящий от все
вышеперечисленных

12. Что такое директивы в
AngularJS?
С помощью директив можно
добавлять новое поведение
существующим HTML
элементам
Основная работа с
манипуляцией DOM-ом
происходит в существующих
или создаваемых вами
директивах
Angular нахожит директивы в
аттрибутах, именах тегов,
комментариях(HTML) или
названиях классов

13. Создание пользовательских
директив
Как и контроллеры или сервисы, директивы регистрируются в
модуле(вызовом метода directive)
Первый аргумент - это имя создаваемой директивы в
camelCase. Второй - фабрика, создающая объект с
настройками директивы
Фабрика вызывается только один раз для директивы
HTML код директив может быть как inline, так и находиться в
отдельном шаблоне

15. Фильтры
Фильтры изменяют значения выражений
отображаемые пользователю
Могут вызываться из контроллеров, view
или сервисов
Имеют следующий синтаксис - {{ name |
<filterName> }}
Фильтры могут применяться на
результаты предыдущих
фильтров(chaining)
В контроллеры или сервису фильры
передаются так же как и все остальное в
Angular - через DI
Фильтры создаются для отдельных
модулей с помощью метода filter.

16. AngularJS сервисы
AngularJS сервисы - это синглтоны.
Для использования сервисов
используется Dependency Injection
Сервисы могут использоваться
практически везде(контроллеры, другие
сервисы, директивы и фильтры)

17. Создаваемый сервис
должен быть частью
модуля
Сервис можно создать
как с помощью Module
API(возовом метода
factory модуля), так и с
помощью сервиса
$provide
в angularJS практически
все это сервисы(если не
директивы :)) - доступ к
window сделан так же
через $window сервис
inline injection

18. б о!
аси
Сп
Paca-Vaca
www.facebook.co
m/paul.seleznev