130 lines
5.1 KiB
Plaintext
130 lines
5.1 KiB
Plaintext
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>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.
|
|
: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 Overview](architecture.html) 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 setup 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.
|
|
|
|
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.
|
|
|
|
## References
|
|
|
|
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
|
|
|
|
The [Glossary](glossary.html) defines terms that Angular developers should know.
|
|
|
|
The [API Guide](../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
|