- 07, Jun 2018
- #1
AngularJS/D3.js
Векторная графика в одностраничных Web-приложениях
Требования: уверенные знания JavaScript.
Курс предназначен для продвинутых JavaScript-программистов, желающих получить новые знания в области работы с векторной графикой SVG в браузерах, используя, де факто, современный стандарт - библиотеку D3.js. Написание более-менее серьезного и функционального приложения с использованием D3.js – сложная задача, решая которую, легко запутаться.
Данный курс научит вас работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js, чтобы не утерять контроль над вашим кодом.
В течение всего курса под руководством преподавателя шаг за шагом с подробными объяснениями будет разрабатываться приложение – интерактивный векторный конструктор.
Средняя продолжительность занятий: 3 часа.
Язык программирования: JavaScript / ECMAScript 2015 (по желанию слушателей)
Версия Angular.js: 1.x (последняя на момент проведения курса)
CSS будем оформлять с помощью SASS, шаблоны – Jade.
Для прохождения курса вам понадобится аккаунт GitHub.
Чему Вы научитесь
- Работать с векторной графикой в браузере в интерактивном режиме с помощью наиболее функционального средства в этой области - библиотеки D3.js;
- Создавать и тестировать модульные масштабируемые одностраничные приложения на примере полнофункционального векторного редактора;
- Использовать дополнительные инструменты и средства, облегчающие и ускоряющие процесс разработки приложений.
Программа курса Урок 1. Основы D3.js и векторной графики SVG Библиотека D3. Концепция работы с данными в стиле D3. Формирование [связи] данных (Data Joins). Выборки данных: Enter, Update, Exit.
Свойства выборки.
Методы для работы с выборками.
Краткие сведения о векторной графике SVG.
Координатная система SVG.
Элементы и . Графические примитивы (объекты) SVG: , , , , . Аффинные преобразования объектов SVG.
Фильтры SVG. Подготовка рабочей среды и введение в AngularJS Урок 2. Подготовка рабочей среды и введение в AngularJS Библиотека Browserify.
Менеджеры пакетов Bower, npm.
Автоматизированная сборка проекта с помощью Grunt или Gulp (по желанию слушателей). Настройка локального сервера для обслуживания запросов приложения.
Использование распределенной системы контроля версий Git и сервиса GitHub.com для организации работы над проектом. AngularJS: введение.
D3.js: разработка рабочего поля векторного конструктора Урок 3. AngularJS: введение.
D3.js: разработка рабочего поля векторного конструктора Введение в AngularJS.
Модель, представление и контроллер в AngularJS.
Управление зависимостями, для чего это необходимо.
Модули, директивы и сервисы.
Сервис $q в AngularJS.
Поведение Zoom в D3.js. Переходы (Transitions) в D3: что это такое, как с ними работать.
Реализация сетки конструктора. Создание статичных перетаскиваемых компонентов (деталей макета) Урок 4. Создание статичных перетаскиваемых компонентов (деталей макета) Интерполяция в D3. Поведение Drag в D3. Разработка директив компонентов – общие подходы.
Разработка поведений объектов на поле конструктора.
Реализация сервиса «прилипания» деталей к линиям сетки конструктора.
Создание первой детали – прямоугольника с отверстиями.
Компиляция директив AngularJS.
Работа с элементом в SVG, основные команды.
Правила заполнения сложных фигур Создание вращающихся компонентов и креплений Урок 5. Создание вращающихся компонентов и креплений Функция d3.timer, рисование зубчатой передачи.
Управление скоростью вращения.
Отрисовка гексагональных креплений-болтов.
Модель отрисовки SVG.
Управление порядком отрисовки и наложения объектов SVG. Работа над сервисом отрисовки деталей и доработка их функциональности Урок 6. Работа над сервисом отрисовки деталей и доработка их функциональности Создание треугольника.
Написание сервиса отрисовки деталей.
Реализация дополнительной функциональности для всех деталей: вращение, удаление с поля конструктора, изменение цвета. Реализация палитры компонентов (деталей макета) Урок 7. Реализация палитры компонентов (деталей макета) Реализация перетаскивания Drag & Drop на элемент SVG.
Определение координат при перетаскивании: пользовательские (user) и экранные (viewport) координаты в SVG, матрица текущих преобразований (CTM, Current Transformation Matrix) SVG, перевод из одной системы координат в другую.
Написание тестов для приложения
Урок 8. Написание тестов для приложения
Конфигурация запускателя модульных тестов Karma.
Запускатель функциональных (E2E) тестов Protractor, его конфигурация.
Написание модульных и функциональных тестов с использованием Jasmine.
Тестирование асинхронного кода.
Подведение итогов.
Скачать:
Скрытая информация :: Авторизуйтесь для просмотра »
