Getting familiar withAngularJS

by Paul Seleznev

План презентации

В двух словах о SPA(Single page application)

Основные особенности AngularJS

MVC в AngulaJS

Что такое модуль в Angular и как с ним работать

Общее представление о директивах в AngularJS

Создание пользовательских директив

Фильтры

Services

Что такое SPA?

это веб-приложение, которое выполняется непосредственно на стороне клиента в Web-браузере

обычно написанное на комбинации из HTML, JavaScript и CSS

by wikipedia.com

Что такое AngularJS?

JavaScript-фреймворк с открытым исходным кодом, разрабатываемым Google

Angular JS адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление

Ключевые особенности:- Директивы и фильтры- Двунаправленное связывание данных(моделей)- Вид, контроллер, $scope- Модули и роутинг

Какие цели преследовались при разработки?

Отделение DOM-манипуляции от логики приложения для улучшения тестируемости кода.

Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.

Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.

Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

Подключение библиотеки

Определение блока за который отвечает контроллер в HTML

коде(body tag)

Обход массива пользователей, который был добавлен ранее в

$scope(li елемент используется как шаблон

для каждой итерации)

result

Определение контроллера в тэге script.

Во все контроллеры инжектиться

$scope(ViewModel)

$scope виден для всего блока в HTML

коде, за который отвечает этот контроллер

MVC in AngularJS

Контроллер, модель и $scope

Контроллер можно создать двумя способами:- как функцию имя которой будет именем контроллера- вызовом метода controller у созданного модуля

The same

Модули в AngularJS

Объявить модуль с помощью медота module обьекта angularУказать в html коде какой блок будет работать с этим модулем

Более описательный код

Легче unit-тестирование

Third-party код легче

подключать модулями

Параллельная загрузка

модулей

Преимущества

использования модулей

Советы по созданию модулей

Модуль для сервисов

Модуль для директив

Модуль для фильтров

Модуль уровня приложения, зависящий от все вышеперечисленных

Что такое директивы в AngularJS?

С помощью директив можно добавлять новое поведение существующим HTML элементам

Основная работа с манипуляцией DOM-ом происходит в существующих или создаваемых вами директивах

Angular нахожит директивы в аттрибутах, именах тегов, комментариях(HTML) или названиях классов

Создание пользовательских

директивКак и контроллеры или сервисы, директивы регистрируются в модуле(вызовом метода directive)

Первый аргумент - это имя создаваемой директивы в camelCase. Второй - фабрика, создающая объект с настройками директивы

Фабрика вызывается только один раз для директивы

HTML код директив может быть как inline, так и находиться в отдельном шаблоне

Фильтры

Фильтры изменяют значения выражений отображаемые пользователю

Могут вызываться из контроллеров, view или сервисов

Имеют следующий синтаксис - {{ name | <filterName> }}

Фильтры могут применяться на результаты предыдущих фильтров(chaining)

В контроллеры или сервису фильры передаются так же как и все остальное в Angular - через DI

Фильтры создаются для отдельных модулей с помощью метода filter.

AngularJS сервисы

AngularJS сервисы - это синглтоны.

Для использования сервисов используется Dependency Injection

Сервисы могут использоваться практически везде(контроллеры, другие сервисы, директивы и фильтры)

Создаваемый сервис должен быть частью модуля

Сервис можно создать как с помощью Module API(возовом метода factory модуля), так и с помощью сервиса $provide

в angularJS практически все это сервисы(если не директивы :)) - доступ к window сделан так же через $window сервис

inline

injection

Спасибо!

Paca-Vacawww.facebook.com/paul.seleznev