AngularJS basics & theory

37,854 views

Published on

Краткий обзор фрэймворка AngularJS: что это такое и зачем все эти сложности. И сложности ли это вообще.

Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
37,854
On SlideShare
0
From Embeds
0
Number of Embeds
32,733
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

AngularJS basics & theory

  1. 1. Getting familiar with AngularJS by Paul Seleznev
  2. 2. План презентации В двух словах о SPA(Single page application) Основные особенности AngularJS MVC в AngulaJS Что такое модуль в Angular и как с ним работать Общее представление о директивах в AngularJS Создание пользовательских директив Фильтры Services
  3. 3. Что такое SPA? это веб-приложение, которое выполняется непосредственно на стороне клиента в Web-браузере обычно написанное на комбинации из HTML, JavaScript и CSS by wikipedia.com
  4. 4. Что такое AngularJS? JavaScript-фреймворк с открытым исходным кодом, разрабатываемым Google Angular JS адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление Ключевые особенности: - Директивы и фильтры - Двунаправленное связывание данных(моделей) - Вид, контроллер, $scope - Модули и роутинг
  5. 5. Какие цели преследовались при разработки? Отделение DOM-манипуляции от логики приложения для улучшения тестируемости кода. Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода. Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно. Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
  6. 6. result Подключение библиотеки Определение блока за который отвечает контроллер в HTML коде(body tag) Обход массива пользователей, который был добавлен ранее в $scope(li елемент используется как шаблон для каждой итерации) Определение контроллера в тэге script. Во все контроллеры инжектиться $scope(ViewModel) $scope виден для всего блока в HTM L коде, за который отвечает этот контроллер
  7. 7. MVC in AngularJS
  8. 8. Th es am e Контроллер, модель и $scope Контроллер можно создать двумя способами: - как функцию имя которой будет именем контроллера - вызовом метода controller у созданного модуля
  9. 9. Модули в AngularJS Преимущества лей спользования моду и Более описательный код Легче unit-тестирование Third-party код легче подключать модулями Параллельная загрузка модулей Объявить модуль с по мощью медота module обьект а angular Указать в html коде ка кой блок будет работать с этим модулем
  10. 10. Советы по созданию модулей Модуль для сервисов Модуль для директив Модуль для фильтров Модуль уровня приложения, зависящий от все вышеперечисленных
  11. 11. Что такое директивы в AngularJS? С помощью директив можно добавлять новое поведение существующим HTML элементам Основная работа с манипуляцией DOM-ом происходит в существующих или создаваемых вами директивах Angular нахожит директивы в аттрибутах, именах тегов, комментариях(HTML) или названиях классов
  12. 12. Создание пользовательских директив Как и контроллеры или сервисы, директивы регистрируются в модуле(вызовом метода directive) Первый аргумент - это имя создаваемой директивы в camelCase. Второй - фабрика, создающая объект с настройками директивы Фабрика вызывается только один раз для директивы HTML код директив может быть как inline, так и находиться в отдельном шаблоне
  13. 13. Фильтры Фильтры изменяют значения выражений отображаемые пользователю Могут вызываться из контроллеров, view или сервисов Имеют следующий синтаксис - {{ name | <filterName> }} Фильтры могут применяться на результаты предыдущих фильтров(chaining) В контроллеры или сервису фильры передаются так же как и все остальное в Angular - через DI Фильтры создаются для отдельных модулей с помощью метода filter.
  14. 14. AngularJS сервисы AngularJS сервисы - это синглтоны. Для использования сервисов используется Dependency Injection Сервисы могут использоваться практически везде(контроллеры, другие сервисы, директивы и фильтры)
  15. 15. Создаваемый сервис должен быть частью модуля Сервис можно создать как с помощью Module API(возовом метода factory модуля), так и с помощью сервиса $provide в angularJS практически все это сервисы(если не директивы :)) - доступ к window сделан так же через $window сервис inline injection
  16. 16. б о! аси Сп Paca-Vaca www.facebook.co m/paul.seleznev

×