angular-cn/public/docs/ts/latest/tutorial/index.jade

83 lines
3.3 KiB
Plaintext
Raw Normal View History

include ../../../../_includes/_util-fns
:marked
2015-11-01 00:13:18 -04:00
# 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.
Well use built-in directives to show/hide elements and display lists of hero data.
Well 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.
Well 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.
Well 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 well find plenty of links
to chapters with greater depth.
.l-main-section
:marked
2015-11-01 00:13:18 -04:00
## The End Game
2015-10-12 21:36:33 -04:00
2015-11-01 00:13:18 -04:00
Here's a visual idea of where we're going in this tour, beginning with the "Dashboard"
view and our most heroic heroes:
2015-11-01 00:13:18 -04:00
figure.image-display
img(src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard")
:marked
2015-11-01 00:13:18 -04:00
Above the dashboard are two links ("Dashboard" and "Heroes").
We could click them to navigate between this Dashboard and a Heroes view.
2015-10-12 21:36:33 -04:00
2015-11-01 00:13:18 -04:00
Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view
of that hero where we can change the hero's name.
2015-11-01 00:13:18 -04:00
figure.image-display
img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app")
:marked
2015-11-01 00:13:18 -04:00
Links at the top can take us to either of the main views.
We'll click the "Back" button which sends us to the "Heroes" master list view with
"Magneta" as the selected hero.
2015-11-01 00:13:18 -04:00
figure.image-display
img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app")
:marked
2015-11-01 00:13:18 -04:00
We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
2015-11-01 00:13:18 -04:00
We click the "View Details" button to drill into the
editable details of our selected hero.
2015-11-01 00:13:18 -04:00
The following diagram captures all of our navigation options.
figure.image-display
img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
:marked
Here's our app in action
figure.image-display
img(src='/resources/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action")
.l-main-section
:marked
2015-11-01 00:13:18 -04:00
## How We Roll
Well 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.
2015-11-01 00:13:18 -04:00
And well meet many of the core fundamentals of Angular along the way.
2015-11-01 00:13:18 -04:00
[Let's get started!](./toh-pt1.html)