docs(quickstart): faster to setup and the learning path (#2946)

This commit is contained in:
Ward Bell 2016-12-15 11:53:45 -08:00 committed by GitHub
parent b7a9a4524f
commit 0d6483c5a5
2 changed files with 20 additions and 14 deletions

View File

@ -20,6 +20,12 @@ a#develop-locally
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
.l-sub-section
:marked
The <live-example title="QuickStart Seed in Plunker">QuickStart seed live-example</live-example> is QuickStart
_plus_ the `app.module.ts` and `main.ts` application files ([described below](#app-files "QuickStart application files")) that facilitate richer application examples.
:marked
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
Then ...
1. Create a project folder (you can call it `quickstart` and rename it later).
@ -56,15 +62,13 @@ code-example(language="sh" class="code-shell").
block qs-seed
:marked
The **QuickStart seed** contains the same application as the QuickStart playground
and even has <live-example>its own _playground_</live-example>
that accomodates development of richer examples in a live coding environment.
The **QuickStart seed** contains the same application as the QuickStart playground.
But it's true purpose is to provide a solid foundation for _local_ development.
Consequently, there are _many more files_ in the project folder on your machine,
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
block core-files
a#app-files
:marked
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
@ -123,7 +127,7 @@ table(width="100%")
:marked
### Next Step
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html "Angular learning path").
br
br
@ -155,7 +159,7 @@ block install-tooling
:marked
## Appendix: Why develop locally
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
<live-example title="QuickStart Seed in Plunker">Live coding</live-example> in the browser is a great way to explore Angular.
Links on almost every documentation page open completed samples in the browser.
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
@ -171,7 +175,7 @@ block install-tooling
* transpiling TypeScript in the browser is slow
* the type support, refactoring, and code completion only work in your local IDE
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
Use the <live-example title="QuickStart Seed in Plunker"><i>live coding</i></live-example> environment as a _playground_,
a place to try the documentation samples and experiment on your own.
It's the perfect place to reproduce a bug when you want to
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or

View File

@ -1,6 +1,6 @@
block includes
include _util-fns
- var _on_Plunkr = 'on Plunkr';
- var _on_Plunkr = 'on Plunker';
:marked
Angular applications are made up of _components_.
@ -8,10 +8,14 @@ block includes
+makeExample('app/app.component.ts')(format='.')
:marked
You can try this out without installing anything. Open the <live-example>QuickStart example !{_on_Plunkr}</live-example> in another tab
and follow along.
.l-sub-section
:marked
Try this **<live-example>QuickStart example !{_on_Plunkr}</live-example>** without installing anything.
Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
and prepare for development of a real Angular application.
:marked
Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
<span if-docs="ts">function</span> that
<span if-docs="ts">takes a _metadata_ object. The metadata object</span> describes how the HTML template and component class work together.
@ -39,7 +43,5 @@ block includes
:marked
### Next step
To learn how to write a real application, your next step is to set up a local development
environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
shows you how.
Start [**learning Angular**](guide/learning-angular.html "Learning Angular").