diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index cd44206d55..a85f3bc74e 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -1196,7 +1196,7 @@ code-example(format="" language="html"). ## Template Expression Operators The template expression language employs a subset of JavaScript syntax supplemented with some special operators - for specific scenarios. We'll' cover two of them: "pipe" and "Elvis". + for specific scenarios. We'll cover two of them, "pipe" and "Elvis". ### The Pipe Operator ( | ) diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade index c86bbd6d05..c999b5f195 100644 --- a/public/docs/ts/latest/tutorial/index.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -1,75 +1,76 @@ include ../../../../_includes/_util-fns -.l-main-section - :markdown - # Tour of Heroes: the vision +: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. + 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. + 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. + 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. + 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 +: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: + 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") +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. +:markdown + Above the dashboard are two links ("Dashboard" and "Heroes"). + We could click them to navigate between this Dashboard 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") + 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") - :markdown - Links at the top take us back to either of the main views. - The "Back" button returns us to the "Dashboard" view. +:markdown + 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. - figure.image-display - img(src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app") +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. +:markdown + 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") - 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 +: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. + 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) + And we’ll meet many of the core fundamentals of Angular along the way. + + [Let's get started!](./toh-pt1.html) diff --git a/public/resources/images/devguide/toh/heroes-dashboard-1.png b/public/resources/images/devguide/toh/heroes-dashboard-1.png index 41c4c35944..10881654c6 100644 Binary files a/public/resources/images/devguide/toh/heroes-dashboard-1.png and b/public/resources/images/devguide/toh/heroes-dashboard-1.png differ diff --git a/public/resources/images/devguide/toh/nav-diagram.png b/public/resources/images/devguide/toh/nav-diagram.png new file mode 100644 index 0000000000..196f0b54fa Binary files /dev/null and b/public/resources/images/devguide/toh/nav-diagram.png differ