130 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			130 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
block includes
 | 
						|
  include ../_util-fns
 | 
						|
 | 
						|
// #docregion intro
 | 
						|
- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
 | 
						|
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 #{langName}.
 | 
						|
 | 
						|
  We are on a journey together to understand how Angular works and, more importantly,
 | 
						|
  how to make it work for us.  This overview begins the journey.
 | 
						|
  <br clear="all">
 | 
						|
// #enddocregion intro
 | 
						|
 | 
						|
// #docregion how-to-read-1
 | 
						|
<a id="learning-path"></a>
 | 
						|
:marked
 | 
						|
  # Organization
 | 
						|
 | 
						|
  The documentation is divided into major thematic sections, each
 | 
						|
  a collection of chapters devoted to that theme.
 | 
						|
// #enddocregion how-to-read-1
 | 
						|
// #docregion how-to-read-2
 | 
						|
- var top="vertical-align:top"
 | 
						|
table(width="100%")
 | 
						|
  col(width="15%")
 | 
						|
  col
 | 
						|
  tr(style=top)
 | 
						|
    td <b>QuickStart</b>
 | 
						|
    td
 | 
						|
      :marked
 | 
						|
        The foundation for every chapter and sample in this documentation.
 | 
						|
  tr(style=top)
 | 
						|
    td <b>Tutorial</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>Basics</b>
 | 
						|
    td
 | 
						|
      :marked
 | 
						|
        The essential ingredients of Angular development.
 | 
						|
  tr(style=top)
 | 
						|
    td <b>Developer Guide</b>
 | 
						|
    td
 | 
						|
      :marked
 | 
						|
        In-depth analysis of Angular features and development practices.
 | 
						|
  tr(style=top)
 | 
						|
    td <b>Cookbook</b>
 | 
						|
    td
 | 
						|
      :marked
 | 
						|
        Recipes for specific application challenges, mostly code snippets with a minimum of exposition.
 | 
						|
  tr(style=top)
 | 
						|
    td <b>API Reference</b>
 | 
						|
    td
 | 
						|
      :marked
 | 
						|
        Authoritative details about each member of the Angular libraries.
 | 
						|
:marked
 | 
						|
  # Learning path
 | 
						|
  We don't have to read the guide straight through.  Most chapters stand on their own.
 | 
						|
 | 
						|
  We recommend a learning path for those new to Angular.
 | 
						|
  Most of that path runs through the *Basics* section:
 | 
						|
 | 
						|
  1. Read the [Architecture](architecture.html) overview to get the big picture.
 | 
						|
 | 
						|
  1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2.
 | 
						|
  It shows us how to set up the libraries and tools we'll need to write *any* Angular app.
 | 
						|
 | 
						|
  1. Take the *Tour of Heroes* [Tutorial](../tutorial), which picks up from where the QuickStart leaves off
 | 
						|
  and builds 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.
 | 
						|
 | 
						|
    Return to the *Basics* section and continue in the suggested order:
 | 
						|
 | 
						|
  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.
 | 
						|
// #enddocregion how-to-read-2
 | 
						|
// #docregion the-rest
 | 
						|
:marked
 | 
						|
  # Code samples
 | 
						|
 | 
						|
  Every chapter includes code snippets that we can reuse in our own applications.
 | 
						|
  These snippets are excerpts from a sample application that accompanies the chapter.
 | 
						|
 | 
						|
block example-links
 | 
						|
  :marked
 | 
						|
    Look for a link to a running version of that sample near the top of each page,
 | 
						|
    such as this <live-example></live-example> from the [Architecture](architecture.html) chapter.
 | 
						|
 | 
						|
    The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
 | 
						|
 | 
						|
:marked
 | 
						|
  A few early chapters are written as tutorials and are clearly marked as such.
 | 
						|
  Most chapters are *not* tutorials.
 | 
						|
  They highlight key points in code rather than explain each step necessary to build the sample.
 | 
						|
  We can always get the full source by way of 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.
 | 
						|
 | 
						|
  # Feedback
 | 
						|
 | 
						|
  We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
 | 
						|
 | 
						|
  Post *documentation* issues and pull requests on the
 | 
						|
  [angular.io](https://github.com/angular/angular.io) github repository.
 | 
						|
 | 
						|
  Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
 | 
						|
// #enddocregion the-rest
 |