include ../../../../_includes/_util-fns

.l-main-section
  :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.

    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.

    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

    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")

  :markdown
    Above the list are two links ("Dashboard" and "Heroes").
    We click them to navigate between this Dashboard view 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")

  :markdown
    Links at the top take us back to either of the main views.
    The "Back" button returns us to the "Dashboard" view.

  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.

    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

    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)