Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

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

Merged
merged 1 commit into from
Dec 15, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions public/docs/ts/latest/guide/setup.jade
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand Down
16 changes: 9 additions & 7 deletions public/docs/ts/latest/quickstart.jade
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
block includes
include _util-fns
- var _on_Plunkr = 'on Plunkr';
- var _on_Plunkr = 'on Plunker';

:marked
Angular applications are made up of _components_.
A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:

+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.
Expand Down Expand Up @@ -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").