Angular & TypeScript: Практическо програмиране

Angular е едно от най-популярните средства за създаване на уеб приложения, предоставящо множество готови решения като навигация, панели с инструменти, меню, възможности за анимация и автоматично дописване на кода. Благодарение на него, разработката на приложения е значително опростена, тъй като не се налага да реализирате всички тези второстепенни инструменти самостоятелно. Така имате възможност да се концентрирате изцяло върху логиката на приложението.

Книгата покрива подробно:

• настройката на средата - Angular, Node.js, Git;
• синтаксиса на TypeScript - типове променливи, функции, обектно ориентирано програмиране, интерфейси, кортежи;
• работата с модули, компоненти, шаблони и шаблонни променливи;
• изграждането на връзки към данни и събития;
• създаването на потребителски директиви;
• работата с форми, детайлно е разгледан модулът FormsModule;
• потоци и сървиси;
• маршрутизация и предаване на параметри на маршрутите;
• тестване и публикуване на приложение на реален уеб сървър;
• разгледана е и библиотеката Angular Material, с помощта на която може да изграждате UI елементи (потребителски интерфейс).

Опитът показва, че най-доб­ре и най-лесно програмиране се учи на базата на реални примери. Ето защо в книгата има много примери, кодовете на които са предоставени за безплатно сваляне.

D.K. Academy е иновативен, практически ориентиран образователен проект, предоставящ качествено написани книги в областта на информационните технологии. Създаден е от Денис Колисниченко - водещ автор в областта на програмирането и информационните технологии, написал многобройни статии и повече от 30 книги на компютърна тематика.

Асеневци трейд ЕООД
София, 1618
р-н Витоша, Еровете № 13, ет. 2
store@asenevtsi.com

Въведение
Необходими знания
Как да четете тази книга?
Примери
Необходимо програмно обезпечение
Настройка на средата

• Избор на операционна система
• Избор на браузър
• Избор на текстов редактор
• Инсталиране на Node.js
• Инсталиране на Angular
• Инсталиране на Git

Създаване на първото приложение

• Създаване на нов проект
• Обзор на пакета package.json
• Стартиране на приложението
• Създаване на пълноценно приложение
• Промяна на index.html
• Модел на данните
• Създаване на шаблон
• Създаване на компонент на приложението
• Как работи приложението
• Модернизация на приложението
• Извеждане на таблица
• Двустранно свързване на данни
• Добавяне на елементи в списъка

Синтаксис на TypeScript

• Въведение в TypeScript
• Какво е TypeScript?
• За какво ни е TypeScript?
• Предимства на TypeScript
• Редактори с поддръжка на TypeScript
• Незадължителни типове
• Функции
• Тип на параметрите и на връщаните стойности
• Незадължителни параметри и параметри по подразбиране
• Анонимни функции, или функции със стрелка
• Презареждане на функции
• Обектно ориентирано програмиране в TypeScript
• Деклариране на класове
• Модификатори за достъп
• Методи на класа
• Наследяване. Ключовите думи extends и super
• Шаблонни типове
• Интерфейси. Ключовата дума interface
• Кортежи
• Индексируеми типове

Основи на Angular

• Компоненти
• Въведение в компонентите
• Свойства на декоратора на компонента
• Създаване на нов компонент
• Генериране на съдържание на компонента
• Използване на стилове за компонентите
• Елементът ng-content
• Взаимодействие между компонентите
• Жизнен цикъл на компонента. Събития на компонента
• Модули
• Въведение в модулите
• Инсталиране на модул
• Създаване на функционален модул
• Зареждане на приложението
• Шаблони и шаблонни променливи
• Интерполация
• Практически примери. Свойството template
• Декораторът ViewChild
• Декораторът ContentChild

Свързване с данни и събития

• Свързване на данни
• Едностранно свързване на данни
• Двустранно свързване на данни
• Свързване на събития

Директиви

• Типове вградени директиви
• Атрибутивни директиви
• Създаване на атрибутивни директиви
• Взаимодействие с потребителя, декораторите HostListener и HostBinding
• Свойството host
• Параметри на директивите
• Структурни директиви
• Директивата ngIf
• Директивата ngFor
• Директивата ngSwitch
• Използване на звезда
• Създаване на собствена структурна директива

Работа с форми

• Включване на FormsModule
• Директивата ngModel. Реализация на двупосочно свързване на данни
• Обектът ngModel. Получаване и изменение на модела
• Валидиране на форма
• Проверка за коректно въведени данни в полетата за въвеждане
• Стилизация на грешките след валидация
• Изпращане на форма. Директивата ngForm

Потоци

• Вградени потоци
• Параметри на потоците
• Форматиране на дата. Потокът date
• Форматиране на числа. Потокът decimal
• Форматиране на валута. Потокът currency
• Вериги потоци
• Създаване на собствени потоци

Сървиси

• Въведение в сървисите
• Внедряване на зависимости. Декораторът @Injectable()
• Декораторът Optional
• Използване на сървиси в дъщерни компоненти
• Йерархия на сървисите
• Глобално ниво
• Ниво на модул
• Ниво на компонент

Маршрутизация. Създаване на многостранично приложение

• Подготовка на проекта
• Определяне на маршрутите
• Добавяне на маршрути. Модулът RouterModule
• Поредност на маршрутите
• Преадресация на заявките
• Връзки вътре в приложението
• Параметри на маршрута
• Параметри на низа на заявката
• Програмна навигация
• Предаване на параметри от форма

Http сървис

• Подготовка за използване на HttpClient
• Изпращане на прости заявки
• Създаване на сървис за получаване на данни
• Зареждаме сложни данни
• Обектът Observable
• Обработка на грешки
• Предаване на параметри в заявката
• HTTP методи и обработка на отговор
• Работа с база данни MySQL
• Междудомейнни заявки

Публикуване на приложението на уеб сървър

• Бързо сглобяване и публикуване на проекта
• Режим watch
• Автоматично разгръщане
• Опции на командата ng build
• Конфигурация на сървъра

Материален дизайн. Разработка на потребителски интерфейс

• Въведение в материалния дизайн
• Изграждане на приложение с поддръжка на Angular Material
• Навигационен панел
• Таблица с данни
• Изучаваме документацията

Тестване на Angular приложението

• Инструменти за тестване
• Инструменти за тестване на Angular
• Jasmine
• Karma
• Protractor
• Стартиране на модулно тестване

Реално приложение или събиране на всичко в едно

• Създаване на приложение. Включване на необходимите библиотеки
• Създаване на компонент на страницата
• Сървис на съдържание
• Маршрутизация
• Навигиране по страниците на сайта
• Промяна на размера на елемент
• Редактираме таблицата на стиловете
• Вместо заключение

Приложение 1. Основи на HTML

• Структура на HTML документа
• Тагът
• Тагове за заглавия
• Тагове за абзац и подравняване на текста
• Форматиране на текста
• Промяна на шрифта на текста
• Вмъкване на картинки
• Номериран и маркиран списък
• Връзки
• Таблици