Підручник: Тур Героїв

Наш генеральний план - створити застосунок щоб допомоги кадровому агенству знаходити роботу для своїх героїв.

Звичайно ж, ми зробимо лише невеличкий прогрес в цьому підручнику, але тут буде багато можливостей, які зазвичай очікують побачити у повнофункціональному застосунку: отримання та показ списку героїв, редагування даних вибраних героїв, та навігація між різними візуальними поданнями інформації про героїв.

Тур Героїв охопить фундаментальне ядро Angular. Ми використаємо директиви для показу/приховування елементів та для відображення списку героїв. Ми створимо один компонент для показу докладної інформації героїв, а інший - для показу списку героїв. Ми використаємо одно-напрямлену прив'язку до даних. Ми додаватимемо поля, дані в яких можна редагувати, у них буде дво-напрямлена прив'язка до даних. Ми будемо прив'язувати методи компонентів до подій, створених користувачами, наприклад до ведення текста та клацань. Ми вивчатимемо як можна вибрати героя з основного списку, та як редагувати дані цього героя у візуальнрму поданні з детальною інформацією. Ми будемо форматувати дані через pipes. Ми створимо спільний сервіс для централізованого збереження даних наших героїв. Ми будемо використовувати маршрутизацію для навігації між різними візуальними поданнями та їхніми компонентами.

Ми вивчемо ядро Angular на достатньому рівні щоб почати роботу та почуватись впевненими, що Angular справиться з тими завданнями, які на нього покладено. Ми охопимо багато основ на початковому рівні, але ми надамо багато лінків на розділи з хорошим поглибленням.

Живий приклад того, що буде.

Кінець гри

Ось візуальна ідея того, куди ми прийдемо в цьому турі. Тут є "Dashboard" (панель керування) та наші найбільш героїчні герої:

Output of heroes dashboard

Вгорі, на панелі керування є два лінка ("Dashboard" та "Heroes"). Ми можемо їх використовувати для навігації між візуальними поданнями Dashboard та Heroes.

Коли ж ми клацнемо героя з іменем "Magneta", маршрутизатор перекине нас у візуальне подання "Hero Details", де ми побачимо детальнішу інформацію про цього героя, тут ми можемо змінювати його дані.

Details of hero in app

Клацнувши на кнопці "Back", нас поверне назад до "Dashboard". Лінки вгорі можуть нас провести на якусь із головних сторінок. Клацнемо "Heroes". Застосунок покаже нам сторінку зі списком героїв.

Output of heroes list app

Клацаючи на різних героях у списку, нам показується міні-уточнююча інфомація про вибраних героїв внизу під списком.

Клацнувши на кнопку "View Details", ми провалюємось у візуальне подання з детальною інформацією, тут ми можемо змінювати дані вибраного героя.

Наступна діаграма демонструє усі наші навігаційні можливості.

View navigations

Тут наш застосунок в дії

Tour of Heroes in Action

Йдемо далі

Ми будуватимемо цей Тур Героїв разом, крок за кроком. В нас буде мотивація пройти кожен крок дотримуючись необхідних вимог, які ми зустрінемо колись в безлічі застосунків. Усе має сенс.

На цьому шляху, ми пізнаємо багато чого фундаментального із Angular.

Наступний крок

Редактор Героїв