docs(tutorial): don't use shredder for intro page (#2388)
An initial multilang cleanup for ng2.io
This commit is contained in:
parent
d26007aa67
commit
e016f3f31e
|
@ -1,5 +1,5 @@
|
|||
extends ../../../ts/_cache/tutorial/index.jade
|
||||
|
||||
block includes
|
||||
include ../_util-fns
|
||||
|
||||
+includeShared('{ts}', 'intro')
|
||||
+includeShared('{ts}', 'main')
|
||||
|
||||
|
|
|
@ -0,0 +1,85 @@
|
|||
block includes
|
||||
include ../_util-fns
|
||||
|
||||
:marked
|
||||
# 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 methods 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.
|
||||
|
||||
Run the <live-example name="toh-6"></live-example>.
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## 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")
|
||||
|
||||
:marked
|
||||
Above the dashboard are two links ("Dashboard" and "Heroes").
|
||||
We could click them to navigate between this Dashboard and a Heroes view.
|
||||
|
||||
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.
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app")
|
||||
|
||||
:marked
|
||||
Clicking the "Back" button would return us to the "Dashboard".
|
||||
Links at the top can take us to either of the main views.
|
||||
We'll click "Heroes". The app takes to the "Heroes" master list view.
|
||||
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app")
|
||||
|
||||
:marked
|
||||
We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
|
||||
|
||||
We click the "View Details" button to drill into the
|
||||
editable details of our selected hero.
|
||||
|
||||
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
|
||||
## Up Next
|
||||
|
||||
We’ll build this Tour of Heroes together, step by step.
|
||||
We'll motivate 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)
|
|
@ -1,6 +1,6 @@
|
|||
block includes
|
||||
include ../_util-fns
|
||||
|
||||
// #docregion intro
|
||||
:marked
|
||||
# Tour of Heroes: the vision
|
||||
|
||||
|
@ -26,8 +26,7 @@ include ../_util-fns
|
|||
to chapters with greater depth.
|
||||
|
||||
Run the <live-example name="toh-6"></live-example>.
|
||||
// #enddocregion intro
|
||||
// #docregion main
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
## The End Game
|
||||
|
@ -84,4 +83,3 @@ figure.image-display
|
|||
And we’ll meet many of the core fundamentals of Angular along the way.
|
||||
|
||||
[Let's get started!](./toh-pt1.html)
|
||||
// #enddocregion main
|
||||
|
|
Loading…
Reference in New Issue