Учебник: Путешествие по героям

Учебник «Путешествие по героям» проведет вас по шагам создания приложения Angular на TypeScript.

Главная цель этого учебника — создать приложение, которое поможет агентству по подбору персонала управлять своим набором героев.

Приложение «Путешествие по героям» охватывает основные принципы Angular. Вы создадите базовое приложение, которое имеет множество функций, которые вы, вероятно, ожидали бы найти в полноценном приложении с обработкой данных: получение и отображение списка героев, редактирование подробностей выбранного героя и навигация между различными представлениями данных о героях.

Вы будете использовать встроенные директивы для отображения и скрытия элементов и отображения списков данных героев. Вы будете создавать компоненты для отображения подробностей героев и отображения массива героев. Вы будете использовать одностороннюю привязку данных для чтения данных. Вы добавите поля для редактирования, чтобы обновить модель с двусторонней привязкой данных. Вы будете привязывать методы компонентов к пользовательским событиям, таким как нажатия клавиш и щелчки. Вы сможете позволить пользователям выбирать героя из основного списка и редактировать этого героя в представлении подробностей. Вы будете форматировать данные с помощью фильтров. Вы создадите общий сервис для сборки героев. И вы будете использовать маршрутизацию для навигации между различными представлениями и их компонентами.

Вы изучите достаточно основных принципов Angular, чтобы начать работу и убедиться, что Angular может сделать все необходимое. Вы пройдете большой путь на начальном уровне, и вы найдете много ссылок на страницы с большей глубиной.

После завершения этого учебника приложение будет выглядеть следующим образом.

Конечная цель

Вот визуальное представление того, к чему приведет этот учебник, начиная с представления «Панель управления» и самых героических героев:

Вы можете щелкнуть по двум ссылкам над панелью управления («Панель управления» и «Герои»), чтобы перейти между представлением «Панель управления» и представлением «Герои».

Если вы щелкнете по герою на панели управления «Магнет», маршрутизатор откроет представление «Подробности героя», где вы сможете изменить имя героя.

Нажатие кнопки «Назад» возвращает вас на панель управления. Ссылки вверху ведут к одному из основных представлений. Если вы нажмёте «Герои», приложение отобразит представление «Список героев».

При нажатии на другое имя героя, мини-представление подробностей под списком, которое только отображает информацию, отразит новый выбор.

Вы можете нажать кнопку «Просмотреть подробности», чтобы перейти к редактируемым деталям выбранного героя.

Следующая диаграмма отображает все варианты навигации.

Вот приложение в действии:

Далее

Вы будете пошагово создавать приложение «Путешествие по героям». Каждый шаг мотивирован требованием, которое вы, вероятно, удовлетворили во многих приложениях. Всё имеет свою причину.

По пути вы ознакомитесь со многими основными принципами Angular.

Следующий шаг

Редактор героя