|
| 1 | +block includes |
| 2 | + include ../_util-fns |
| 3 | + |
| 4 | +:marked |
| 5 | + # Tour of Heroes: the vision |
| 6 | + |
| 7 | + Our grand plan is to build an app to help a staffing agency manage its stable of heroes. |
| 8 | + Even heroes need to find work. |
| 9 | + |
| 10 | + Of course we'll only make a little progress in this tutorial. What we do build will |
| 11 | + have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying |
| 12 | + a list of heroes, editing a selected hero's detail, and navigating among different |
| 13 | + views of heroic data. |
| 14 | + |
| 15 | + The Tour of Heroes covers the core fundamentals of Angular. |
| 16 | + We’ll use built-in directives to show/hide elements and display lists of hero data. |
| 17 | + We’ll create a component to display hero details and another to show an array of heroes. |
| 18 | + We'll use one-way data binding for read-only data. We'll add editable fields to update a model |
| 19 | + with two-way data binding. We'll bind component methods to user events like key strokes and clicks. |
| 20 | + We’ll learn to select a hero from a master list and edit that hero in the details view. We'll |
| 21 | + format data with pipes. We'll create a shared service to assemble our heroes. And we'll use routing to navigate among different views and their components. |
| 22 | + |
| 23 | + We’ll learn enough core Angular to get started and gain confidence that |
| 24 | + Angular can do whatever we need it to do. |
| 25 | + We'll be covering a lot of ground at an introductory level but we’ll find plenty of links |
| 26 | + to chapters with greater depth. |
| 27 | + |
| 28 | + Run the <live-example name="toh-6"></live-example>. |
| 29 | + |
| 30 | +.l-main-section |
| 31 | +:marked |
| 32 | + ## The End Game |
| 33 | + |
| 34 | + Here's a visual idea of where we're going in this tour, beginning with the "Dashboard" |
| 35 | + view and our most heroic heroes: |
| 36 | + |
| 37 | +figure.image-display |
| 38 | + img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard") |
| 39 | + |
| 40 | +:marked |
| 41 | + Above the dashboard are two links ("Dashboard" and "Heroes"). |
| 42 | + We could click them to navigate between this Dashboard and a Heroes view. |
| 43 | + |
| 44 | + Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view |
| 45 | + of that hero where we can change the hero's name. |
| 46 | + |
| 47 | +figure.image-display |
| 48 | + img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app") |
| 49 | + |
| 50 | +:marked |
| 51 | + Clicking the "Back" button would return us to the "Dashboard". |
| 52 | + Links at the top can take us to either of the main views. |
| 53 | + We'll click "Heroes". The app takes to the "Heroes" master list view. |
| 54 | + |
| 55 | +figure.image-display |
| 56 | + img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app") |
| 57 | + |
| 58 | +:marked |
| 59 | + We click a different hero and the readonly mini-detail beneath the list reflects our new choice. |
| 60 | + |
| 61 | + We click the "View Details" button to drill into the |
| 62 | + editable details of our selected hero. |
| 63 | + |
| 64 | + The following diagram captures all of our navigation options. |
| 65 | + |
| 66 | +figure.image-display |
| 67 | + img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations") |
| 68 | + |
| 69 | +:marked |
| 70 | + Here's our app in action |
| 71 | + |
| 72 | +figure.image-display |
| 73 | + img(src='/resources/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action") |
| 74 | + |
| 75 | +.l-main-section |
| 76 | +:marked |
| 77 | + ## Up Next |
| 78 | + |
| 79 | + We’ll build this Tour of Heroes together, step by step. |
| 80 | + We'll motivate each step with a requirement that we've |
| 81 | + met in countless applications. Everything has a reason. |
| 82 | + |
| 83 | + And we’ll meet many of the core fundamentals of Angular along the way. |
| 84 | + |
| 85 | + [Let's get started!](./toh-pt1.html) |
0 commit comments