|
| 1 | +block includes |
| 2 | + include ../_util-fns |
| 3 | + |
| 4 | +figure |
| 5 | + img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px") |
| 6 | + |
| 7 | +:marked |
| 8 | + This is a practical guide to Angular for experienced programmers who |
| 9 | + are building client applications in HTML and #{_Lang}. <br class="l-clear-left"> |
| 10 | + |
| 11 | + ## Organization |
| 12 | + |
| 13 | + The documentation is divided into major thematic sections, each |
| 14 | + a collection of pages devoted to that theme. |
| 15 | + |
| 16 | +block js-alert |
| 17 | + |
| 18 | +- var __lang = _docsFor || current.path[1] || 'ts'; |
| 19 | +- var guideData = public.docs[__lang].latest.guide._data; |
| 20 | +- var advancedLandingPage = ''; |
| 21 | +- for(var page in guideData) { |
| 22 | +- if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; } |
| 23 | +- } |
| 24 | +- var advancedUrl = './' + advancedLandingPage + '.html' |
| 25 | +- var top="vertical-align:top" |
| 26 | +table(width="100%") |
| 27 | + col(width="15%") |
| 28 | + col |
| 29 | + tr(style=top) |
| 30 | + td <b><a href="../quickstart.html">QuickStart</a></b> |
| 31 | + td |
| 32 | + :marked |
| 33 | + The foundation for every page and sample in this documentation. |
| 34 | + tr(style=top) |
| 35 | + td <b><a href="./">Guide</a></b> |
| 36 | + td |
| 37 | + :marked |
| 38 | + The essential ingredients of Angular development. |
| 39 | + tr(style=top) |
| 40 | + td <b><a href="../api">API Reference</a></b> |
| 41 | + td |
| 42 | + :marked |
| 43 | + Authoritative details about each member of the Angular libraries. |
| 44 | + tr(style=top) |
| 45 | + td <b><a href="../tutorial">Tutorial</a></b> |
| 46 | + td |
| 47 | + :marked |
| 48 | + A step-by-step, immersive approach to learning Angular that |
| 49 | + introduces the major features of Angular in an application context. |
| 50 | + tr(style=top) |
| 51 | + td <b><a href="!{advancedUrl}">Advanced</a></b> |
| 52 | + td |
| 53 | + :marked |
| 54 | + In-depth analysis of Angular features and development practices. |
| 55 | + tr(style=top) |
| 56 | + td <b><a href="../cookbook">Cookbook</a></b> |
| 57 | + td |
| 58 | + :marked |
| 59 | + Recipes for specific application challenges, mostly code snippets with a minimum of exposition. |
| 60 | + |
| 61 | +:marked |
| 62 | + ## Learning path |
| 63 | + |
| 64 | + You don't have to read the guide straight through. Most pages stand on their own. |
| 65 | + |
| 66 | + For those new to Angular, the recommended learning path runs through the *Guide* section: |
| 67 | + |
| 68 | + 1. For the big picture, read the [Architecture](architecture.html) overview. |
| 69 | + |
| 70 | + 1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular. |
| 71 | + It shows you how to set up the libraries and tools you'll need to write *any* Angular app. |
| 72 | + |
| 73 | + 1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off, |
| 74 | + and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application: |
| 75 | + a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. |
| 76 | + |
| 77 | + 1. [Displaying Data](displaying-data.html) explains how to display information on the screen. |
| 78 | + |
| 79 | + 1. [User Input](user-input.html) covers how Angular responds to user behavior. |
| 80 | + |
| 81 | + 1. [Forms](forms.html) handles user data entry and validation within the UI. |
| 82 | + |
| 83 | + 1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications |
| 84 | + from small, single-purpose parts. |
| 85 | + |
| 86 | + 1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML. |
| 87 | + |
| 88 | + After reading the above sections, you can skip to any other pages on this site. |
| 89 | + |
| 90 | + ## Code samples |
| 91 | + |
| 92 | + Each page includes code snippets that you can reuse in your applications. |
| 93 | + These snippets are excerpts from a sample application that accompanies the page. |
| 94 | + |
| 95 | + Look for a link to a running version of that sample near the top of each page, |
| 96 | + such as this <live-example name="architecture"></live-example> from the [Architecture](architecture.html) page. |
| 97 | + <p if-docs="ts"> |
| 98 | + The link launches a browser-based code editor where you can inspect, modify, save, and download the code. |
| 99 | + </p> |
| 100 | + |
| 101 | + A few early pages are written as tutorials and are clearly marked as such. |
| 102 | + The rest of the pages highlight key points in code rather than explain each step necessary to build the sample. |
| 103 | + You can always get the full source through the #{_liveLink}. |
| 104 | + |
| 105 | + ## Reference pages |
| 106 | + |
| 107 | + - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios. |
| 108 | + - The [Glossary](glossary.html) defines terms that Angular developers should know. |
| 109 | + - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries. |
| 110 | + |
| 111 | + ## We welcome feedback! |
| 112 | + |
| 113 | + - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests. |
| 114 | + - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself. |
0 commit comments