angularjs basics & theory
DESCRIPTION
Краткий обзор фрэймворка AngularJS: что это такое и зачем все эти сложности. И сложности ли это вообще. Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/TRANSCRIPT
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