76 lines
3.1 KiB
Plaintext
76 lines
3.1 KiB
Plaintext
include ../../../../_includes/_util-fns
|
||
|
||
.l-main-section
|
||
:markdown
|
||
# Tour of Heroes: the vision
|
||
|
||
Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
|
||
Even heroes need to find work.
|
||
|
||
Of course we'll only make a little progress in this tutorial. What we do build will
|
||
have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying
|
||
a list of heroes, editing a selected hero's detail, and navigating among different
|
||
views of heroic data.
|
||
|
||
The Tour of Heroes covers the core fundamentals of Angular.
|
||
We’ll use built-in directives to show/hide elements and display lists of hero data.
|
||
We’ll create a component to display hero details and another to show an array of heroes.
|
||
We'll use one-way data binding for read-only data. We'll add editable fields to update a model
|
||
with two-way data binding. We'll bind component method to user events like key strokes and clicks.
|
||
We’ll learn to select a hero from a master list and edit that hero in the details view. We'll
|
||
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.
|
||
|
||
We’ll learn enough core Angular to get started and gain confidence that
|
||
Angular can do whatever we need it to do.
|
||
We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
|
||
to chapters with greater depth.
|
||
|
||
.l-main-section
|
||
:markdown
|
||
## The End Game
|
||
|
||
Here's a visual idea of where we're going in this tour, beginning with the "Dashboard"
|
||
view and our most heroic heroes:
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard")
|
||
|
||
:markdown
|
||
Above the list are two links ("Dashboard" and "Heroes").
|
||
We click them to navigate between this Dashboard view and a Heroes view.
|
||
|
||
We can click a hero to be transitioned by the router to a "Hero Details" view,
|
||
where we can change the hero's name.
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app")
|
||
|
||
:markdown
|
||
Links at the top take us back to either of the main views.
|
||
The "Back" button returns us to the "Dashboard" view.
|
||
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
|
||
|
||
:markdown
|
||
Above the Dashboard are two links ("Dashboard" and "Heroes").
|
||
We click them to navigate between a Dashboard view and this Heroes view.
|
||
|
||
We can click the "Heroes" link and be wisked away by the router to
|
||
a "Heroes" view where we can see a list of our heroes.
|
||
|
||
We can click a hero and have the router race us over to a "Hero Details" view
|
||
again.
|
||
|
||
.l-main-section
|
||
:markdown
|
||
## How We Roll
|
||
|
||
We’ll build this Tour of Heroes together, step by step.
|
||
We'll motiviate each step with a requirement that we've
|
||
met in countless applications. Everything has a reason.
|
||
|
||
And we’ll meet many of the core fundamentals of Angular along the way.
|
||
|
||
[Let's get started!](./toh-pt1.html)
|