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

Commit 91ef5de

Browse files
committed
docs(quickstart): faster to setup and the learning path
1 parent b7a9a45 commit 91ef5de

File tree

2 files changed

+20
-14
lines changed

2 files changed

+20
-14
lines changed

public/docs/ts/latest/guide/setup.jade

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ a#develop-locally
2020
Setting up a new project on your machine is quick and easy with the **QuickStart seed**,
2121
maintained [on github](!{_qsRepo} "Install the github QuickStart repo").
2222

23+
.l-sub-section
24+
:marked
25+
The <live-example title="QuickStart Seed in Plunker">QuickStart seed live-example</live-example> is QuickStart
26+
_plus_ the `app.module.ts` and `main.ts` application files ([described below](#app-files "QuickStart application files")) that facilitate richer application examples.
27+
28+
:marked
2329
Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?").
2430
Then ...
2531
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").
5662

5763
block qs-seed
5864
:marked
59-
The **QuickStart seed** contains the same application as the QuickStart playground
60-
and even has <live-example>its own _playground_</live-example>
61-
that accomodates development of richer examples in a live coding environment.
62-
65+
The **QuickStart seed** contains the same application as the QuickStart playground.
6366
But it's true purpose is to provide a solid foundation for _local_ development.
6467
Consequently, there are _many more files_ in the project folder on your machine,
6568
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
6669

6770
block core-files
71+
a#app-files
6872
:marked
6973
Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder.
7074

@@ -123,7 +127,7 @@ table(width="100%")
123127
:marked
124128
### Next Step
125129

126-
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html).
130+
If you're new to Angular, we recommend staying on the [learning path](learning-angular.html "Angular learning path").
127131

128132
br
129133
br
@@ -155,7 +159,7 @@ block install-tooling
155159
:marked
156160
## Appendix: Why develop locally
157161

158-
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
162+
<live-example title="QuickStart Seed in Plunker">Live coding</live-example> in the browser is a great way to explore Angular.
159163

160164
Links on almost every documentation page open completed samples in the browser.
161165
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
171175
* transpiling TypeScript in the browser is slow
172176
* the type support, refactoring, and code completion only work in your local IDE
173177

174-
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
178+
Use the <live-example title="QuickStart Seed in Plunker"><i>live coding</i></live-example> environment as a _playground_,
175179
a place to try the documentation samples and experiment on your own.
176180
It's the perfect place to reproduce a bug when you want to
177181
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or

public/docs/ts/latest/quickstart.jade

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
block includes
22
include _util-fns
3-
- var _on_Plunkr = 'on Plunkr';
3+
- var _on_Plunkr = 'on Plunker';
44

55
:marked
66
Angular applications are made up of _components_.
77
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:
88

99
+makeExample('app/app.component.ts')(format='.')
1010

11-
:marked
12-
You can try this out without installing anything. Open the <live-example>QuickStart example !{_on_Plunkr}</live-example> in another tab
13-
and follow along.
1411

12+
.l-sub-section
13+
:marked
14+
Try this **<live-example>QuickStart example !{_on_Plunkr}</live-example>** without installing anything.
15+
Try it locally with the [***QuickStart seed***](guide/setup.html "Setup for local development with the QuickStart seed")
16+
and prepare for development of a real Angular application.
17+
18+
:marked
1519
Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained')
1620
<span if-docs="ts">function</span> that
1721
<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
3943
:marked
4044
### Next step
4145

42-
To learn how to write a real application, your next step is to set up a local development
43-
environment and begin exploring with code. The [**Developer Guide**](guide/index.html)
44-
shows you how.
46+
Start [**learning Angular**](guide/learning-angular.html "Learning Angular").
4547

0 commit comments

Comments
 (0)