Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"
Download as PPTX, PDF0 likes1,735 views
Документ предоставляет вводный курс о фреймворке AngularJS, его основных компонентах и особенностях. Рассматриваются цели и задачи AngularJS, области применения и ограничения, а также методы связывания данных и внедрение зависимостей. Также подробно описываются контроллеры, директивы и сервисы, их использование и примеры реализации.
Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"
- 1. advanced HTML for web apps!
- 2. Тема 1. Что такое AngularJS? 2. Особенности фреймворка 3. Основные компоненты 4. Пример приложения 2014. AngularJS. Anton Gordiichuk
- 3. Что такое AngularJS? 2014. AngularJS. Anton Gordiichuk
- 4. Angular? Cтруктурный фреймворк предназначенный для построения динамических web-приложений. Позволяет расширить возможности и синтаксис существующего HTML. 2014. AngularJS. Anton Gordiichuk
- 5. Почему <Angular>? Angular <> ng 2014. AngularJS. Anton Gordiichuk
- 6. Задачи • расширение возможностей HTML • создание простой и четкой структуры приложения • выполнение низкоуровневых задач за Вас • тесты пользовательских компонентов • интеграция с другими фреймворками 2014. AngularJS. Anton Gordiichuk
- 7. Когда целесообразно использовать? • rich-ui приложения • single-page приложения • REST-oriented приложения 2014. AngularJS. Anton Gordiichuk
- 8. НЕ целесообразно использовать • web-игры • редакторы интерфейсов 2014. AngularJS. Anton Gordiichuk
- 9. Доступно из коробки • двухсторонние связывание данных • внедрение зависимостей (DI) • более 60 готовых деректив • более 25 разнообразных сервисов • фильтры • утилиты 2014. AngularJS. Anton Gordiichuk
- 10. Производительность Angular создает минимум накладных расходов, и поэтому в плане производительности находится на достаточно высоком уровне. 2014. AngularJS. Anton Gordiichuk
- 12. Особенности фреймворка 2014. AngularJS. Anton Gordiichuk
- 13. Связывание данных • односторонняя (особенность многих JS MVC фреймворков) • двухсторонняя (Angular, Ember, Knockout) 2014. AngularJS. Anton Gordiichuk
- 14. Одностороннее связывание ;( View one-time merge Template Model 2014. AngularJS. Anton Gordiichuk
- 15. Двухстороннее связывание :) Template View continuous updates model Model 2014. AngularJS. Anton Gordiichuk
- 16. Внедрение зависимостей • оператор new • ссылка на глобальную переменную • передача зависимости туда где она нужна 2014. AngularJS. Anton Gordiichuk
- 17. DI в AngularJS Для управления зависимостями в каждом AngularJS приложении существует свой сервис локатор - инжектор. Задача инжектора - управление жизненным циклом объектов, внедрение зависимостей. 2014. AngularJS. Anton Gordiichuk
- 18. Создание и поиск зависимостей Instance cache Instance factory $injector.get(‘dep’) check cache create new if no cache $injector 2014. AngularJS. Anton Gordiichuk
- 19. Где можно использовать DI? • в модулях • в контроллерах • в фабричных методах (директивы, сервисы, фильтры) 2014. AngularJS. Anton Gordiichuk
- 20. Основные компоненты 2014. AngularJS. Anton Gordiichuk
- 21. Контроллер? JavaScript функция с собственной областью видимости предназначенная для описания бизнес- логики приложения. 2014. AngularJS. Anton Gordiichuk
- 22. 2014. AngularJS. Anton Gordiichuk
- 23. Для чего НЕ стоит использовать контроллеры? • манипуляций с DOM • форматирования ввода-вывода • передачи состояния другим контроллерам • управления жизненным циклом других компонентов 2014. AngularJS. Anton Gordiichuk
- 24. Способы ассоциации контроллера с $scope • директива ng-controller • сервис $routeProvider 2014. AngularJS. Anton Gordiichuk
- 25. ng-controller 2014. AngularJS. Anton Gordiichuk
- 26. $routeProvider 2014. AngularJS. Anton Gordiichuk
- 27. Директива? Одна с ключевых компонент фреймворка. Директивы позволяют задавать определенное поведение элементам к которым они применяются. 2014. AngularJS. Anton Gordiichuk
- 28. Способы объявления директив • HTML тег • HTML аттрибут • HTML комментарий • HTML класс 2014. AngularJS. Anton Gordiichuk
- 29. Директива (сокращенная форма) 2014. AngularJS. Anton Gordiichuk
- 30. Директива (полная форма) 2014. AngularJS. Anton Gordiichuk
- 31. Сервисы 2014. AngularJS. Anton Gordiichuk
- 32. Сервис? Взаимозаменяемые компоненты выполняющие определенные задачи в рамках web-приложения. • ленивая инициализация • одиночка 2014. AngularJS. Anton Gordiichuk
- 33. Как пользоваться сервисами? Очень просто. Передайте сервис как зависимость в одну из компонент (контроллер, фильтр, директиву, другой сервис) и система внедрения зависимостей позаботится об остальном. 2014. AngularJS. Anton Gordiichuk
- 34. 2014. AngularJS. Anton Gordiichuk
- 35. Сервисы AngularJS Фреймворк поставляется с набором уже готовых к использованию сервисов. Например $http (работа с XmlHttpRequest), $route (маршрутизация) и тд. 2014. AngularJS. Anton Gordiichuk
- 36. Пример сервиса 2014. AngularJS. Anton Gordiichuk
- 37. Шаблон? Статическая DOM структура состоящая из HTML, CSS, а также специальных элементов и атрибутов которые позволяют AngularJS преобразовать статические страницы в динамическое web- приложения. 2014. AngularJS. Anton Gordiichuk
- 38. В шаблонах можно использовать • директивы • фильтры • интерполяционный скобки {{ }} • элементы форм 2014. AngularJS. Anton Gordiichuk
- 39. Пример шаблона 2014. AngularJS. Anton Gordiichuk
- 40. Пример приложения 2014. AngularJS. Anton Gordiichuk
- 41. Ваши вопросы 2014. AngularJS. Anton Gordiichuk
- 42. Гордийчук Антон Java, JavaScript Developer skype: a.gordiychuk email: [email protected] 2014. AngularJS. Anton Gordiichuk
Editor's Notes
- #2: Hello
- #3: 4 части
- #4: кто работал? реальный проект? свои директивы?
- #6: Почему название Angular?
- #7: расширение директивами другие как JS (jQuery) так и сервер утилиты моки
- #8: роутинг страницы по Ajax красивые REST понятная структура
- #9: DOM только в директивах
- #10: у большинства односторонее DI ни у кого нет
- #11: легковесный
- #12: HTML-компилятор обход DOM инициализация директив и других компонент создание View
- #13: одни из ключевых особенностей
- #14: Какие знаете типы связей?
- #15: в одну сторону
- #16: единственно верный путь
- #17: new - сами заботитесь глобальные ссылки не хорошо DI круто
- #18: декларируй и забудь конструкторы и factory-методы
- #20: Все компоненты поддерживают DI
- #21: 99% случаев
- #22: создается с помощью специальной функции конструктора Best practice 1 контроллер на страницу
- #23: Пример
- #24: DOM в директивах фильтры сервисы инжектор
- #25: изменения в области видимости изменяют view прототипное наследование от тут области
- #26: ассоциация с страницей или ее частью
- #27: single-page
- #28: самое сложное и самое важное (особенно ng-repeat) написание отдельный доклад с помощью их и расширяется функционал HTML
- #29: best practice аттрибут data- если нужен валидный HTML остальное для совместимости
- #30: грамотно сделана сокращенная форма для всех параметров есть значения по-умолчанию что подходят в 99% случаев
- #31: тоже самое пару слов о каждом
- #33: работа с REST утилиты передача объектов между контроллерами тд
- #34: работа с REST утилиты передача объектов между контроллерами
- #35: пример внедрения зависимостей
- #36: готовые сервисы очень удобны то что должен иметь каждый фреймворк
- #38: разница между шаблоном и view?
- #39: шаблон может включать другие шаблоны {{ }} как EL в Java ${}