Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit e016f3f

Browse files
chalinwardbell
authored andcommitted
docs(tutorial): don't use shredder for intro page (#2388)
An initial multilang cleanup for ng2.io
1 parent d26007a commit e016f3f

File tree

3 files changed

+91
-8
lines changed

3 files changed

+91
-8
lines changed
+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
include ../_util-fns
1+
extends ../../../ts/_cache/tutorial/index.jade
22

3-
+includeShared('{ts}', 'intro')
4-
+includeShared('{ts}', 'main')
3+
block includes
4+
include ../_util-fns
55

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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)

public/docs/ts/latest/tutorial/index.jade

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
include ../_util-fns
1+
block includes
2+
include ../_util-fns
23

3-
// #docregion intro
44
:marked
55
# Tour of Heroes: the vision
66

@@ -26,8 +26,7 @@ include ../_util-fns
2626
to chapters with greater depth.
2727

2828
Run the <live-example name="toh-6"></live-example>.
29-
// #enddocregion intro
30-
// #docregion main
29+
3130
.l-main-section
3231
:marked
3332
## The End Game
@@ -84,4 +83,3 @@ figure.image-display
8483
And we’ll meet many of the core fundamentals of Angular along the way.
8584

8685
[Let's get started!](./toh-pt1.html)
87-
// #enddocregion main

0 commit comments

Comments
 (0)