block includes
  include ../_util-fns

figure
  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")

:marked
  This is a practical guide to Angular for experienced programmers who
  are building client applications in HTML and #{_Lang}. <br class="l-clear-left">

  ## Organization

  The documentation is divided into major thematic sections, each
  a collection of pages devoted to that theme.

block js-alert

- var __lang = _docsFor || current.path[1] || 'ts';
- var guideData = public.docs[__lang].latest.guide._data;
- var advancedLandingPage = '';
- for(var page in guideData) {
-   if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; }
- }
- var advancedUrl = './' + advancedLandingPage + '.html'
- var top="vertical-align:top"
table(width="100%")
  col(width="15%")
  col
  tr(style=top)
    td <b><a href="../quickstart.html">QuickStart</a></b>
    td
      :marked
        The foundation for every page and sample in this documentation.
  tr(style=top)
    td <b><a href="./">Guide</a></b>
    td
      :marked
        The essential ingredients of Angular development.
  tr(style=top)
    td <b><a href="../api">API Reference</a></b>
    td
      :marked
        Authoritative details about each member of the Angular libraries.
  tr(style=top)
    td <b><a href="../tutorial">Tutorial</a></b>
    td
      :marked
        A step-by-step, immersive approach to learning Angular that
        introduces the major features of Angular in an application context.
  tr(style=top)
    td <b><a href="!{advancedUrl}">Advanced</a></b>
    td
      :marked
        In-depth analysis of Angular features and development practices.
  tr(style=top)
    td <b><a href="../cookbook">Cookbook</a></b>
    td
      :marked
        Recipes for specific application challenges, mostly code snippets with a minimum of exposition.

:marked
  ## Learning path
  
  You don't have to read the guide straight through.  Most pages stand on their own.

  For those new to Angular, the recommended learning path runs through the *Guide* section:

  1. For the big picture, read the [Architecture](architecture.html) overview.

  1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
  It shows you how to set up the libraries and tools you'll need to write *any* Angular app.

  1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off,
  and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application:
  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.

  1. [Displaying Data](displaying-data.html) explains how to display information on the screen.

  1. [User Input](user-input.html) covers how Angular responds to user behavior.

  1. [Forms](forms.html) handles user data entry and validation within the UI.

  1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
  from small, single-purpose parts.

  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.

  After reading the above sections, you can skip to any other pages on this site.

  ## Code samples

  Each page includes code snippets that you can reuse in your applications.
  These snippets are excerpts from a sample application that accompanies the page.

  Look for a link to a running version of that sample near the top of each page,
  such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
  <p if-docs="ts">
  The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
  </p>

  A few early pages are written as tutorials and are clearly marked as such.
  The rest of the pages highlight key points in code rather than explain each step necessary to build the sample.
  You can always get the full source through the #{_liveLink}.

  ## Reference pages

  - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
  - The [Glossary](glossary.html) defines terms that Angular developers should know.
  - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.

  ## We welcome feedback! 

  - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests.
  - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself.
