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

Commit 08d88b0

Browse files
committed
docs(quickstart): incorporate more Igor feedback
1 parent eddb1f7 commit 08d88b0

File tree

8 files changed

+58
-36
lines changed

8 files changed

+58
-36
lines changed

public/docs/_examples/setup/ts/plnkr.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"app/main.ts",
77
"index.html"
88
],
9+
"open": "app/app.component.ts",
910
"tags": ["quickstart setup"]
1011
}

public/docs/ts/latest/guide/learning-angular.jade

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ block includes
22
include ../_util-fns
33

44
figure
5-
img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
5+
img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" )
66
:marked
77
Everyone learns differently.
88
You don't have to read the documentation straight through. Most pages stand on their own.
@@ -16,6 +16,8 @@ figure
1616
to a full-featured example that demonstrates the essential characteristics of a professional application:
1717
a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access.
1818

19+
a#architecture
20+
:marked
1921
1. Read the [Architecture](architecture.html) overview for the big picture.
2022

2123
1. [The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application.

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

+42-28
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,19 @@
11
block includes
22
include ../_util-fns
33

4+
a#develop-locally
45
:marked
5-
## Trying Angular
6-
7-
Live coding [Quickstart](../quickstart.html) in the browser is a great way to explore Angular.
8-
Links on almost every documentation page will open completed samples in the browser where you can
9-
play with the code, share your changes with friends, and download and run the code on your own machine.
10-
11-
As much fun as this is ...
12-
* you can't ship your app in plunker
13-
* you aren't always online when writing code
14-
* transpiling TypeScript in the browser is slow
15-
* the type support, refactoring, and code completion only work in your local IDE
16-
176
## Setup a local development environment
7+
The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.
8+
It's not where you'd develop a real application.
9+
You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular.
1810

19-
Fortunately, setting up a new project in your local development environment is quick and easy
20-
with the [**QuickStart seed**](https://github.com/angular/quickstart "Install the github QuickStart repo"),
21-
a repository on github.
11+
Setting up a new project on your own machine is quick and easy with the **QuickStart seed**
12+
maintained [on github](https://github.com/angular/quickstart "Install the github QuickStart repo").
2213

2314
Make sure you have [node and npm installed](#install-node "What if you don't have node?").
2415
Then ...
25-
1. [clone](#clone) or [download](#download) the **QuickStart seed repository**.
16+
1. [clone](#clone) or [download](#download) the **QuickStart seed** into your project folder.
2617
1. [install the `npm` packages](#install-node "What if you don't have node?")
2718
1. run `npm start` to launch the sample application
2819

@@ -51,9 +42,9 @@ code-example(language="sh" class="code-shell").
5142

5243
.l-main-section
5344
:marked
54-
## What's different about the QuickStart seed?
45+
## What's in the QuickStart seed?
5546

56-
The QuickStart seed contains the same application as the <live-example name="quickstart">QuickStart live example</live-example>.
47+
The **QuickStart seed** contains the same application as the <live-example name="quickstart">QuickStart _playground_</live-example>.
5748
But there are _many more files_ in the project folder on your machine,
5849
most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy").
5950

@@ -76,12 +67,7 @@ code-example(language="sh" class="code-shell").
7667
app/main.ts
7768
`)(format='.')
7869
:marked
79-
The [QuickStart](../quickstart.html "Angular QuickStart") sample only shows the `AppComponent` file.
80-
It creates the equivalent of `app.module.ts` and `main.ts` internally _for that example only_
81-
so the reader can discover Angular without distraction.
82-
83-
All other guides and cookbooks expect you to have defined these three files explicitly.
84-
Each file has a distinct purpose and evolves independently as the application grows.
70+
All guides and cookbooks have _at least these three files_. Each file has a distinct purpose and evolves independently as the application grows.
8571

8672
style td, th {vertical-align: top}
8773
table(width="100%")
@@ -114,11 +100,11 @@ table(width="100%")
114100
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
115101
You'll learn about alternative compiling and deployment options later in the documentation.
116102

117-
.l-main-section
118-
:marked
119-
## Next Step
103+
.l-sub-section
104+
:marked
105+
### Next Step
120106

121-
If you're new to Angular, try the recommended [learning path](learning-path.html).
107+
If you're new to Angular, try the recommended [learning path](learning-angular.html).
122108

123109
a#install-node
124110
.l-main-section
@@ -140,3 +126,31 @@ a#install-node
140126
You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that
141127
use other versions of node and npm.
142128

129+
a#why-locally
130+
.l-main-section
131+
:marked
132+
## Appdendix: Why develop locally
133+
134+
<live-example>Live coding</live-example> in the browser is a great way to explore Angular.
135+
136+
Links on almost every documentation page open completed samples in the browser.
137+
You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
138+
139+
The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file.
140+
It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
141+
so the reader can discover Angular without distraction.
142+
The other samples are based on the QuickStart seed.
143+
144+
As much fun as this is ...
145+
* you can't ship your app in plunker
146+
* you aren't always online when writing code
147+
* transpiling TypeScript in the browser is slow
148+
* the type support, refactoring, and code completion only work in your local IDE
149+
150+
Use the <live-example><i>live coding</i></live-example> environment as a _playground_,
151+
a place to try the documentation samples and experiment on your own.
152+
It's the perfect place to reproduce a bug when you want to
153+
<a href="https://github.com/angular/angular.io/issues/new" target="_blank" title="File a documentation issue">file a documentation issue</a> or
154+
<a href="https://github.com/angular/angular/issues/new" target="_blank" title="File an Angular issue">file an issue with Angular itself</a>.
155+
156+
For real development, we strongly recommend [developing locally](#develop-locally).

public/docs/ts/latest/quickstart.jade

+4-3
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,9 @@ a#typescript
4141
TypeScript compiles into JavaScript that runs on any modern browser.
4242
Most developers find it delightful which is why most Angular developers write applications in TypeScript.
4343
You can write your application in
44-
[other versions of JavaScript](cookbook/ts-to-js.html "TypeScript to JavaScript") or
45-
[Dart](../../dart/latest) if you prefer.
46-
// will be
44+
[other versions of JavaScript](cookbook/ts-to-js.html "TypeScript to JavaScript")
45+
if you prefer.
46+
//
47+
[Dart](../../dart/latest)
4748
<a href="https://github.com/angular/dart/latest" target="_blank" title="Dart">Dart</a> if you prefer.
4849

public/docs/ts/latest/tutorial/index.jade

-2
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,3 @@ figure.image-display
7979
met in countless applications. Everything has a reason.
8080

8181
And we’ll meet many of the core fundamentals of Angular along the way.
82-
83-
[Let's get started!](./toh-pt1.html)

public/docs/ts/latest/tutorial/toh-pt1.jade

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
include ../_util-fns
22

33
:marked
4-
Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
5-
64
## Setup to develop locally
5+
Real application development takes place in a local development environment like your machine.
76

87
Follow the [setup](../guide/setup.html) instructions for creating a new project
98
named <ngio-ex path="angular-tour-of-heroes"></ngio-ex>

public/docs/ts/latest/tutorial/toh-pt6.jade

+7
Original file line numberDiff line numberDiff line change
@@ -618,3 +618,10 @@ block file-summary
618618
hero-search.component.css,
619619
rxjs-extensions.ts`
620620
)
621+
622+
.l-sub-section
623+
:marked
624+
### Next Step
625+
626+
Return to the [learning path](../guide/learning-angular.html#architecture) where
627+
you can read about the concepts and practices you discovered in this tutorial.
Loading

0 commit comments

Comments
 (0)