docs(quickstart): faster to setup and the learning path (#2946)
This commit is contained in:
parent
b7a9a4524f
commit
0d6483c5a5
@ -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
|
||||
|
@ -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").
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user