You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
Copy file name to clipboardExpand all lines: public/docs/ts/latest/tutorial/index.jade
+38-36
Original file line number
Diff line number
Diff line change
@@ -2,80 +2,82 @@ block includes
2
2
include../_util-fns
3
3
4
4
:marked
5
-
Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes.
6
-
Even heroes need to find work.
5
+
The grand plan for this tutorial is to build an app that helps a staffing agency manage its stable of heroes.
7
6
8
-
Of course we'll only make a little progress in this tutorial. What we do build will
9
-
have many of the features we expect to find in a full-blown, data-driven application: acquiring and displaying
7
+
The Tour of Heroes app covers the core fundamentals of Angular. You'll build a basic app that
8
+
has many of the features you'd expect to find in a full-blown, data-driven app: acquiring and displaying
10
9
a list of heroes, editing a selected hero's detail, and navigating among different
11
10
views of heroic data.
12
11
13
-
The Tour of Heroes covers the core fundamentals of Angular.
14
-
We’ll use built-in directives to show/hide elements and display lists of hero data.
15
-
We’ll create a component to display hero details and another to show an array of heroes.
16
-
We'll use one-way data binding for read-only data. We'll add editable fields to update a model
17
-
with two-way data binding. We'll bind component methods to user events like key strokes and clicks.
18
-
We’ll learn to select a hero from a master list and edit that hero in the details view. We'll
19
-
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.
12
+
You'll use built-in directives to show and hide elements and display lists of hero data.
13
+
You'll create components to display hero details and show an array of heroes.
14
+
You'll use one-way data binding for read-only data. You'll add editable fields to update a model
15
+
with two-way data binding. You'll bind component methods to user events, like keystrokes and clicks.
16
+
You'll enable users to select a hero from a master list and edit that hero in the details view. You'll
17
+
format data with pipes. You'll create a shared service to assemble the heroes.
18
+
And you'll use routing to navigate among different views and their components.
19
+
<!-- CF: Should this be a bullet list? -->
20
20
21
-
We’ll learn enough core Angular to get started and gain confidence that
22
-
Angular can do whatever we need it to do.
23
-
We'll be covering a lot of ground at an introductory level but we’ll find plenty of links
24
-
to chapters with greater depth.
21
+
You'll learn enough core Angular to get started and gain confidence that
22
+
Angular can do whatever you need it to do.
23
+
You'll cover a lot of ground at an introductory level, and you'll find many links
24
+
to pages with greater depth.
25
+
26
+
When you're done with this tutorial, the app will look like this <live-example name="toh-6"></live-example>.
25
27
26
-
Run the <live-example name="toh-6"></live-example>.
27
28
28
29
.l-main-section
29
30
:marked
30
-
## The End Game
31
+
## The end game
31
32
32
-
Here's a visual idea of where we're going in this tour, beginning with the "Dashboard"
33
-
view and our most heroic heroes:
33
+
Here's a visual idea of where this tutorial leads, beginning with the "Dashboard"
34
+
view and the most heroic heroes:
34
35
35
36
figure.image-display
36
37
img(src='/resources/images/devguide/toh/heroes-dashboard-1.png'alt="Output of heroes dashboard")
37
38
38
39
:marked
39
-
Above the dashboard are two links ("Dashboard" and "Heroes").
40
-
We could click them to navigate between this Dashboard and a Heroes view.
40
+
Users can click the two links above the dashboard ("Dashboard" and "Heroes")
41
+
to navigate between this Dashboard view and a Heroes view.
41
42
42
-
Instead we click the dashboard hero named "Magneta" and the router takes us to a "Hero Details" view
43
-
of that hero where we can change the hero's name.
43
+
If a user clicks the dashboard hero "Magneta," the router opens a "Hero Details" view
44
+
where the user can change the hero's name.
44
45
45
46
figure.image-display
46
47
img(src='/resources/images/devguide/toh/hero-details-1.png'alt="Details of hero in app")
47
48
48
49
:marked
49
-
Clicking the "Back" button would return us to the "Dashboard".
50
-
Links at the top can take us to either of the main views.
51
-
We'll click "Heroes". The app takes to the "Heroes" master list view.
50
+
Clicking the "Back" button returns users to the Dashboard.
51
+
Links at the top take them to either of the main views.
52
+
If a user clicks "Heroes," the app displays the "Heroes" master list view.
52
53
53
54
figure.image-display
54
55
img(src='/resources/images/devguide/toh/heroes-list-2.png'alt="Output of heroes list app")
56
+
// CF: The ability to add heroes isn't shown in the images or discussed in this page. Should that be added?
55
57
56
58
:marked
57
-
We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
59
+
When a user clicks a different hero name, the read-only minidetail beneath the list reflects the new choice.
58
60
59
-
We click the "View Details" button to drill into the
60
-
editable details of our selected hero.
61
+
Users can click the "View Details" button to drill into the
62
+
editable details of the selected hero.
61
63
62
-
The following diagram captures all of our navigation options.
64
+
The following diagram captures all of the navigation options.
0 commit comments