include ../_util-fns

:marked
  This Developers Guide is a practical guide to Angular for experienced programmers who
  are building client applications in HTML and Dart.
figure
  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
:marked
  We are on a journey together to understand how Angular works and, more importantly,
  how to make it work for us. We look at our application requirements and we see problems to solve.
  <br clear="all">

  * How do we get data onto the screen and handle user interactions?
  * How do we organize our code into manageable, cohesive chunks of functionality that work together?
  * What are the essential Angular building blocks and how do they help?
  * How do we minimize routine, mechanical coding in favor of declarative, higher level constructs without losing control?

  This chapter begins the journey.

<a id="how-to-read"></a>
:marked
  # How to read this guide
  Each chapter of this guide targets an Angular feature,
  showing how to use it to solve a programming problem.

  All the chapters include code snippets ... snippets we can reuse in our own applications.
  Typically, these snippets are excerpts from a sample application that accompanies the chapter.

  **All the source files** for each sample app are displayed together at the **end of each chapter.**

  <!-- Although a few early chapters are written as tutorials, most later chapters
  don't explain how to build the accompanying sample.
  These non-tutorial chapters highlight key points in code but generally don't include the entire source. -->

  <!-- We don't have to read this guide straight through. -->
  <!-- The "[Cheat Sheet](cheatsheet.html)" is a handy map to Angular overall. -->
  <!-- A few early chapters are arranged sequentially and best read together to establish a foundation in Angular.
  But most chapters stand on their own. We can browse to any of them as our interest or some necessity moves us. -->

  Here is a learning path we might follow:

  1. First, be familiar with Dart programming and with web concepts such as
  the DOM, HTML, and CSS. Dart tutorials such as
  [Get Started](https://www.dartlang.org/docs/tutorials/get-started/) and
  [Connect Dart & HTML](https://www.dartlang.org/docs/tutorials/connect-dart-html/)
  are a great way to start.

  1. Follow the [QuickStart](../quickstart.html), which is the "Hello, World" of Angular 2.
  It shows how to set up the libraries and tools needed to write *any* Angular app.
  It ends with a "proof of life", a running Angular app.

  1. Next, read the Developers Guide chapters in order:
    <!-- TODO: adjust this text once we have non-introductory/tutorial chapters -->
    1. The rest of this chapter, especially the Architecture overview
    1. [Displaying Data](displaying-data.html)
    1. [User Input](user-input.html)
    1. [Forms](forms.html)
    <!-- add dependency injection when it exists -->
    <!-- add text about template syntax, once that exists -->

  1. Consider hopping over to the [TypeScript docs](/docs/ts/latest/)
     since they're currently ahead of the Dart docs. (We're working on that!)
     Especially check out the [Tutorial](/docs/ts/latest/tutorial/) and
     [Cheat Sheet](/docs/ts/latest/guide/cheatsheet.html), and the guide chapters
     [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html)
     and [Template Syntax](/docs/ts/latest/guide/template-syntax.html).

  <!-- Follow your own star from there, wherever it leads. -->

  Don't miss the [Cheat Sheet](cheatsheet.html), a handy map to Angular.

<a id="toh"></a>
.l-main-section
:marked
  # Appendix: The Hero Staffing Agency

  There's a backstory to the <!-- the "Tour of Heroes" and --> samples in this guide.

  The world is full of crises large and small.
  Fortunately, courageous heroes are prepared to take on every challenge.
  The shadowy Hero Staffing Agency matches crises to heroes.

  We are contract developers, hired by the Agency to build an application to manage their operations.
  The Agency maintains a stable of heroes with special powers.
  Ordinary humans submit crises as job requests. The heroes bid to take the job, and the Agency
  assigns each job accordingly.

  Our application handles every detail of recruiting, tracking, and job assignment.
  For example, the [Forms](forms.html) chapter features a screen for
  entering personal information about heroes:

figure.image-display
  img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")