94 lines
4.5 KiB
Plaintext
94 lines
4.5 KiB
Plaintext
include ../_util-fns
|
|
|
|
:marked
|
|
This Developers Guide is a practical guide to Angular for experienced programmers who
|
|
are building client applications in HTML and Dart.
|
|
figure
|
|
img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
|
|
:marked
|
|
We are on a journey together to understand how Angular works and, more importantly,
|
|
how to make it work for us. We look at our application requirements and we see problems to solve.
|
|
<br clear="all">
|
|
|
|
* How do we get data onto the screen and handle user interactions?
|
|
* How do we organize our code into manageable, cohesive chunks of functionality that work together?
|
|
* What are the essential Angular building blocks and how do they help?
|
|
* How do we minimize routine, mechanical coding in favor of declarative, higher level constructs without losing control?
|
|
|
|
This chapter begins the journey.
|
|
|
|
<a id="how-to-read"></a>
|
|
:marked
|
|
# How to read this guide
|
|
Each chapter of this guide targets an Angular feature,
|
|
showing how to use it to solve a programming problem.
|
|
|
|
All the chapters include code snippets ... snippets we can reuse in our own applications.
|
|
Typically, these snippets are excerpts from a sample application that accompanies the chapter.
|
|
|
|
**All the source files** for each sample app are displayed together at the **end of each chapter.**
|
|
|
|
<!-- Although a few early chapters are written as tutorials, most later chapters
|
|
don't explain how to build the accompanying sample.
|
|
These non-tutorial chapters highlight key points in code but generally don't include the entire source. -->
|
|
|
|
<!-- We don't have to read this guide straight through. -->
|
|
<!-- The "[Cheat Sheet](cheatsheet.html)" is a handy map to Angular overall. -->
|
|
<!-- A few early chapters are arranged sequentially and best read together to establish a foundation in Angular.
|
|
But most chapters stand on their own. We can browse to any of them as our interest or some necessity moves us. -->
|
|
|
|
Here is a learning path we might follow:
|
|
|
|
1. First, be familiar with Dart programming and with web concepts such as
|
|
the DOM, HTML, and CSS. Dart tutorials such as
|
|
[Get Started](https://www.dartlang.org/docs/tutorials/get-started/) and
|
|
[Connect Dart & HTML](https://www.dartlang.org/docs/tutorials/connect-dart-html/)
|
|
are a great way to start.
|
|
|
|
1. Follow the [QuickStart](../quickstart.html), which is the "Hello, World" of Angular 2.
|
|
It shows how to set up the libraries and tools needed to write *any* Angular app.
|
|
It ends with a "proof of life", a running Angular app.
|
|
|
|
1. Next, read the Developers Guide chapters in order:
|
|
<!-- TODO: adjust this text once we have non-introductory/tutorial chapters -->
|
|
1. The rest of this chapter, especially the Architecture overview
|
|
1. [Displaying Data](displaying-data.html)
|
|
1. [User Input](user-input.html)
|
|
1. [Forms](forms.html)
|
|
<!-- add dependency injection when it exists -->
|
|
<!-- add text about template syntax, once that exists -->
|
|
|
|
1. Consider hopping over to the [TypeScript docs](/docs/ts/latest/)
|
|
since they're currently ahead of the Dart docs. (We're working on that!)
|
|
Especially check out the [Tutorial](/docs/ts/latest/tutorial/) and
|
|
[Cheat Sheet](/docs/ts/latest/guide/cheatsheet.html), and the guide chapters
|
|
[Dependency Injection](/docs/ts/latest/guide/dependency-injection.html)
|
|
and [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
|
|
|
|
<!-- Follow your own star from there, wherever it leads. -->
|
|
|
|
Don't miss the [Cheat Sheet](cheatsheet.html), a handy map to Angular.
|
|
|
|
<a id="toh"></a>
|
|
.l-main-section
|
|
:marked
|
|
# Appendix: The Hero Staffing Agency
|
|
|
|
There's a backstory to the <!-- the "Tour of Heroes" and --> samples in this guide.
|
|
|
|
The world is full of crises large and small.
|
|
Fortunately, courageous heroes are prepared to take on every challenge.
|
|
The shadowy Hero Staffing Agency matches crises to heroes.
|
|
|
|
We are contract developers, hired by the Agency to build an application to manage their operations.
|
|
The Agency maintains a stable of heroes with special powers.
|
|
Ordinary humans submit crises as job requests. The heroes bid to take the job, and the Agency
|
|
assigns each job accordingly.
|
|
|
|
Our application handles every detail of recruiting, tracking, and job assignment.
|
|
For example, the [Forms](forms.html) chapter features a screen for
|
|
entering personal information about heroes:
|
|
|
|
figure.image-display
|
|
img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
|