2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								block includes
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  include ../_util-fns
							 | 
						
					
						
							
								
									
										
										
										
											2015-08-08 13:55:53 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								// #docregion intro
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-21 06:30:36 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								figure
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
							 | 
						
					
						
							
								
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								:marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  This is a practical guide to Angular for experienced programmers who
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  are building client applications in HTML and #{langName}.
							 | 
						
					
						
							
								
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  <br clear="all">
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								// #enddocregion intro
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion how-to-read-1
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								<a id="learning-path"></a>
							 | 
						
					
						
							
								
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								:marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  # Organization
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  The documentation is divided into major thematic sections, each
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  a collection of pages devoted to that theme.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								// #enddocregion how-to-read-1
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion how-to-read-2
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								- var top="vertical-align:top"
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								table(width="100%")
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  col(width="15%")
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  col
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  tr(style=top)
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    td <b>QuickStart</b>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    td
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								      :marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								        The foundation for every page and sample in this documentation.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  tr(style=top)
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    td <b>Tutorial</b>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    td
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								      :marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								        A step-by-step, immersive approach to learning Angular that
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								        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
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								        In-depth analysis of Angular features and development practices.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  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)
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								    td <b>API Reference</b>
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								    td
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								      :marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								        Authoritative details about each member of the Angular libraries.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								:marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  # Learning path
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  You don't have to read the guide straight through.  Most pages stand on their own.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  For those new to Angular, the recommended learning path runs through the *Basics* section:
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. For the big picture, read the [Architecture](architecture.html) overview.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular 2.
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  It shows you how to set up the libraries and tools you'll need to write *any* Angular app.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  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:
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. [Displaying Data](displaying-data.html) explains how to display information on the screen.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. [User Input](user-input.html) covers how Angular responds to user behavior.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. [Forms](forms.html) handles user data entry and validation within the UI.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  from small, single-purpose parts.
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.
							 | 
						
					
						
							
								
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  After reading the above sections, you can skip to any other pages on this site.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								// #enddocregion how-to-read-2
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion the-rest
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								:marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  # Code samples
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  Each page includes code snippets that you can reuse in your applications.
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  These snippets are excerpts from a sample application that accompanies the page.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								block example-links
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  :marked
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    Look for a link to a running version of that sample near the top of each page,
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								    such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								    The link launches a browser-based code editor where you can inspect, modify, save, and download the code.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								:marked
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  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}.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  # Reference pages
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  The [Glossary](glossary.html) defines terms that Angular developers should know.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries.
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  # Feedback
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  We welcome feedback! 
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  Use the [angular.io Github repo](https://github.com/angular/angular.io) for **documentation** issues and pull requests.
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-18 13:43:02 -07:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							
								
									
										
										
										
											2016-08-29 11:37:39 -04:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  Use the [Angular Github repo](https://github.com/angular/angular) to report issues with **Angular 2** itself.
							 | 
						
					
						
							
								
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								// #enddocregion the-rest
							 |