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**,
|
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").
|
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}?").
|
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
|
||||||
Then ...
|
Then ...
|
||||||
1. Create a project folder (you can call it `quickstart` and rename it later).
|
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
|
block qs-seed
|
||||||
:marked
|
:marked
|
||||||
The **QuickStart seed** contains the same application as the QuickStart playground
|
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.
|
|
||||||
|
|
||||||
But it's true purpose is to provide a solid foundation for _local_ development.
|
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,
|
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").
|
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
|
||||||
|
|
||||||
block core-files
|
block core-files
|
||||||
|
a#app-files
|
||||||
:marked
|
:marked
|
||||||
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
|
||||||
|
|
||||||
@ -123,7 +127,7 @@ table(width="100%")
|
|||||||
:marked
|
:marked
|
||||||
### Next Step
|
### 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
|
||||||
br
|
br
|
||||||
@ -155,7 +159,7 @@ block install-tooling
|
|||||||
:marked
|
:marked
|
||||||
## Appendix: Why develop locally
|
## 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.
|
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.
|
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
|
* transpiling TypeScript in the browser is slow
|
||||||
* the type support, refactoring, and code completion only work in your local IDE
|
* 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.
|
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
|
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
|
<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
|
block includes
|
||||||
include _util-fns
|
include _util-fns
|
||||||
- var _on_Plunkr = 'on Plunkr';
|
- var _on_Plunkr = 'on Plunker';
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular applications are made up of _components_.
|
Angular applications are made up of _components_.
|
||||||
@ -8,10 +8,14 @@ block includes
|
|||||||
|
|
||||||
+makeExample('app/app.component.ts')(format='.')
|
+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')
|
Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
|
||||||
<span if-docs="ts">function</span> that
|
<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.
|
<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
|
:marked
|
||||||
### Next step
|
### Next step
|
||||||
|
|
||||||
To learn how to write a real application, your next step is to set up a local development
|
Start [**learning Angular**](guide/learning-angular.html "Learning Angular").
|
||||||
environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
|
|
||||||
shows you how.
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user