angular-cn/public/docs/ts/latest/guide/index.jade

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

:marked
  The Developer Guide is a practical guide to Angular for experienced programmers who
  are building client applications in HTML and JavaScript.
<!-- 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
  The chapters of this guide target an Angular feature and how to use it to solve a programming problem.
  
  ## Chapters
  
  The guide consists of chapters devoted to the challenges of building an application and 
  meeting those challenges with Angular.
  
  A few early chapters are written as tutorials and are clearly marked as such. 
  Most chapters are *not* tutorials and do not explain every step necessary to build the accompanying sample.
  These chapters highlight key points in code but generally don't include the entire source.
  We can get that source by way of the live link to the chapter's code sample.
  
  ## Code Samples
  
  Every chapter includes code snippets ... snippets we can reuse in our own applications. 
  Typically, these snippets are excerpts from a running sample application that accompanies the chapter.
  We usually find a link to a live version of that sample near the top of the chapter ... like this one.
  
  [Live Example](/resources/live-examples/architecture/ts/plnkr.html)
  
  This link opens in a browser and runs the sample code supporting this chapter's architecture overview.
  We can inspect, modify, save, and download the code.
  
  ## Learning Path
  We don't have to read this guide straight through.  Most chapters stand on their own. 
  We can browse to any of them as our interest or some necessity moves us.
  
  But there is a learning path for those of us who are new to Angular.

  1. Read the [Architecture Overview](architecture.html) to get the big picture.
  
  1. Step *outside* the guide and try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2. 
  It shows us how to setup the libraries and tools we'll need to write *any* Angular app. 
  
  1. Follow the [Tutorial](../tutorial). The "Tour of Heroes" tutorial takes us step-by-step from where QuickStart leaves off 
  to a simple data-driven app. 
  Simple, yes, but with the essential characteristics we'd expect of a professional application:
  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. 
  
    The final iteration of the "[Tour of Heroes](#toh)" is a positive answer to that most important question: 
  ***can we build an Angular 2 application that does what we need it to do?***

    Return from the tutorial to the basic chapters of this Developers Guide.
    
  1. [Displaying Data](displaying-data.html) explains how to get information on to the screen.
  
  1. [User Input](user-input.html) covers the basics of responding to user behavior.
  
  1. [Forms](forms.html) handle user data entry and validation within the UI.
  
  1. [Dependency Injection](dependency-injection.html) is the way we build large, maintainable applications
  from small, single purpose parts.
  
  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML. 

  With this foundation, we can read and understand any chapter in the guide.
 
  ## Other Resources
  Don't neglect the other documentation resources. 
  
  The "[Cheat Sheet](cheatsheet.html)" is a handy map to Angular overall.
  
  The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
 
 
<a id="toh"></a>  
.l-main-section
:marked
  # Appendix: The Hero Staffing Agency
  The final phase of the tutorial Tour of Heroes app runs like this.
figure.image-display
  img(src='/resources/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action" height="300px")
:marked
  There's a backstory to the "Tour of Heroes" and every sample in this guide.
  
  The world is full of crises large and small. 
  Fortunately, there are courageous heroes 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 Angular application to manage their operations.
  The Agency maintains a stable of heroes with special powers.
  Ordinary humans call the agency, looking for help with their personal or global crises.
  The Agency triages the crises and turns them into job requests. 
  The heroes on staff bid to take a job and The Agency
  assigns each job accordingly. 
  
  Our application handles every detail of recruiting, tracking and job assignment.