| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  | 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
										 |  |  |   We are on a journey together to understand how Angular works and, more importantly, | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   how to make it work for us.  This overview begins the journey. | 
					
						
							| 
									
										
										
										
											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 | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   The documentation is divided into major thematic sections, each | 
					
						
							|  |  |  |   a collection of chapters 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 | 
					
						
							|  |  |  |   tr(style=top) | 
					
						
							|  |  |  |     td <b>Tutorial</b> | 
					
						
							|  |  |  |     td | 
					
						
							|  |  |  |       :marked | 
					
						
							|  |  |  |         A step-by-step, immersive approach to learning Angular.  | 
					
						
							|  |  |  |         It begins with the [QuickStart](../quickstart.html),  | 
					
						
							|  |  |  |         the foundation for every chapter and sample in this documentation, | 
					
						
							|  |  |  |         followed by the [*Tour of Heroes* tutorial](../tutorial) 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>Reference</b> | 
					
						
							|  |  |  |     td | 
					
						
							|  |  |  |       :marked | 
					
						
							|  |  |  |         Angular-specific reference material, most notably the [API Guide](../api) | 
					
						
							|  |  |  |         with its authoritative details about each member in the Angular libraries. | 
					
						
							|  |  |  |   tr(style=top) | 
					
						
							|  |  |  |     td <b>Resources</b> | 
					
						
							|  |  |  |     td | 
					
						
							|  |  |  |       :marked | 
					
						
							|  |  |  |         Other places to go for help and information. | 
					
						
							| 
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 |  |  | :marked | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   # Learning Path | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |   We don't have to read the guide straight through.  Most chapters stand on their own.  | 
					
						
							|  |  |  |     | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   We recommend a learning path for those new to Angular.  | 
					
						
							| 
									
										
										
										
											2016-03-06 15:12:22 +01:00
										 |  |  |   Most of that path runs through the *Basics* section: | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  | 
 | 
					
						
							|  |  |  |   1. Read the [Architecture Overview](architecture.html) to get the big picture. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   1. Try the [QuickStart](../quickstart.html). The QuickStart is the "Hello, World" of Angular 2.  | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |   It shows us how to setup the libraries and tools we'll need to write *any* Angular app.  | 
					
						
							|  |  |  |    | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   1. Take the *Tour of Heroes* [Tutorial](../tutorial) which picks up from where the QuickStart leaves off  | 
					
						
							|  |  |  |   and builds a simple data-driven app.  | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   Simple, yes, but with the essential characteristics we'd expect of a professional application: | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |   a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.  | 
					
						
							|  |  |  |    | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |     Return to the *Basics* section and continue in the suggested order: | 
					
						
							| 
									
										
										
										
											2015-11-30 14:13:24 -08:00
										 |  |  |      | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   1. [Displaying Data](displaying-data.html) explains how to get information on to the screen. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   1. [User Input](user-input.html) covers the basics of responding to user behavior. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   1. [Forms](forms.html) handle user data entry and validation within the UI. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   1. [Dependency Injection](dependency-injection.html) is the way we build large, maintainable applications | 
					
						
							|  |  |  |   from small, single purpose parts. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML.  | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   With this foundation, we can read and understand any chapter in the guide. | 
					
						
							| 
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 |  |  | // #enddocregion how-to-read-2 | 
					
						
							|  |  |  | // #docregion the-rest | 
					
						
							|  |  |  | :marked | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   # Code Samples | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |    | 
					
						
							|  |  |  |   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. | 
					
						
							|  |  |  |    | 
					
						
							|  |  |  |   Look for a link to a running version of that sample near the top of each page | 
					
						
							|  |  |  |   such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter. | 
					
						
							|  |  |  |    | 
					
						
							|  |  |  |   The link launches a browser-based code editor where we can inspect, modify, save, and download the code. | 
					
						
							|  |  |  |    | 
					
						
							|  |  |  |   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 live link. | 
					
						
							|  |  |  |    | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   ## References | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |      | 
					
						
							|  |  |  |   The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios. | 
					
						
							| 
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 |  |  |      | 
					
						
							|  |  |  |   The [Glossary](glossary.html) defines terms that Angular developers should know. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |   The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries. | 
					
						
							|  |  |  |   | 
					
						
							| 
									
										
										
										
											2016-02-05 23:27:06 -08:00
										 |  |  |   # Feedback | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |   We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner. | 
					
						
							| 
									
										
										
										
											2015-11-28 20:43:09 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |   Post *documentation* issues and pull requests on the  | 
					
						
							|  |  |  |   [angular.io](https://github.com/angular/angular.io) github repository. | 
					
						
							| 
									
										
										
										
											2015-12-11 15:37:35 -08:00
										 |  |  |    | 
					
						
							| 
									
										
										
										
											2016-01-18 00:32:36 -08:00
										 |  |  |   Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository. | 
					
						
							| 
									
										
										
										
											2016-02-25 09:03:50 -08:00
										 |  |  | // #enddocregion the-rest |