docs(quickstart): QuickStart reboot #2762

wardbell · 2016-11-06T07:15:26Z

A complete overhaul of the QuickStart and setup process ... an overhaul intended to make discovering Angular quicker, easier, less frightening and more pleasant.

This PR was merged and then reversed for further review. Successor PR is #2854

Todos:

Complete draft of "Setup Anatomy" for SystemJS (Ward)
Add "Setup ..." for Web Pack (need @Foxandxss help)
Full review for tone, typos, coverage, and substance.
Approval from Angular team leads.

Foxandxss · 2016-11-07T12:13:11Z

public/docs/_examples/quickstart/ts/app/app.module.ts

+  template: `<h1>Hello Angular!</h1>`,
+  selector: 'my-app'
+})
+export class AppComponent { }


On the one hand, exporting this here for a hello world can be confusing but on the other hand, removing it could confuse users as well.

I went back and forth on this. I decided to keep export even though not needed rather than have this be a difference later or make you wonder why AppModule is exported and AppComponent is not.

It is extra, and if you truly want minimal, then I think removing the export is smart. Otherwise, the the educated eye it will make them look for where it is used. This is not a tool to build on, right? If it was, we would make multiple files in the first place. I think, rather, that we want a simple starting point to explain A2 at the most simplest level. In that case, I think removing export works. Thoughts?

Two votes to remove export on component class to my one; you both win.

Foxandxss

Absolutely brilliant Ward. That Setup guide is a masterpiece.

On the other hand, I feel like the quickstart is too short. Shortstart? :P

Foxandxss · 2016-11-07T12:14:50Z

public/docs/ts/latest/quickstart.jade


- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files'
+  The `AppModule` tells Angular<br>
+  &nbsp;&nbsp;***what you need*** &mdash; _imports_ the `BrowserModule` to display the application in the browser.<br>


to display. What do you think about "To use the application in the browser".

Agree needed better verb. I went with "run" instead of "display" or "use"

Foxandxss · 2016-11-07T12:17:08Z

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

+  As much fun as this is
+  * you can't ship your app in plunker.
+  * development in the browser is slow.
+  * you aren't always online


Missing dot.

Removed all periods from these bullets for consistency (rather than make them all sentences.)

Foxandxss · 2016-11-07T12:18:19Z

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

+  * you aren't always online
+  * the type support, refactoring, and code completion only work in your local IDE.
+
+  # Setup a local develoment environment


development

Foxandxss · 2016-11-07T12:23:36Z

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

+.l-sub-section
+  :marked
+    ### Next step
+    [The _Tour of Heroes_ tutorial](../tutorial)


We trigger a "next step" automagically for the basic guides so this will trigger two next steps. No bueno.

Wrote:

.l-sub-section :marked ### Next step [The _Tour of Heroes_ tutorial](../tutorial)

The forced magic generated "next step" bothers me. I want to say what the next step is. Can't control it now. Would have modified the magic but didn't have time. This was a placeholder. But I think I'll delete it for now

wardbell · 2016-11-07T17:45:46Z

Thanks @Foxandxss. Will fix typos. I feel QuickStart is appropriately brief but let's find out what others think

DeborahK · 2016-11-07T23:49:19Z

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

+  * you aren't always online
+  * the type support, refactoring, and code completion only work in your local IDE.
+
+  # Setup a local develoment environment


Will all devs know what an IDE is?

DeborahK · 2016-11-07T23:56:45Z

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

+  1. [install the `npm` packages](#install-node "What if you don't have node?")
+  1. run it
+
+  ## What's different?


I thought at first this was telling me what's different between the zip and the git. May want to be more specific about what this is referring to.

DeborahK · 2016-11-08T00:03:09Z

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

+:marked
+  ## Prerequisites: _node_ and _npm_
+
+    Node.js and npm are essential tools in modern web development. Angular developers need them too.


Can we say why we need node and npm in one sentence?

In two short sentences, yes

johnpapa · 2016-11-08T01:15:51Z

public/docs/_examples/quickstart/ts/app/app.module.ts

+  template: `<h1>Hello Angular!</h1>`,
+  selector: 'my-app'
+})
+export class AppComponent { }


It is extra, and if you truly want minimal, then I think removing the export is smart. Otherwise, the the educated eye it will make them look for where it is used. This is not a tool to build on, right? If it was, we would make multiple files in the first place. I think, rather, that we want a simple starting point to explain A2 at the most simplest level. In that case, I think removing export works. Thoughts?

johnpapa · 2016-11-08T01:16:59Z

public/docs/_examples/quickstart/ts/app/main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule } from './app.module';
-// #enddocregion import

 const platform = platformBrowserDynamic();
 platform.bootstrapModule(AppModule);


why not platformBrowserDynamic().bootstrapModule(AppModule); ?

less code, simpler.

Fixed platformBrowserDynamic().boot..
Dropped "!". Now just "Hello Angular"

johnpapa · 2016-11-08T01:17:53Z

public/docs/_examples/quickstart/ts/app/app.module.ts

+  template: `<h1>Hello Angular!</h1>`,
+  selector: 'my-app'
+})
+export class AppComponent { }


filipesilva · 2016-11-15T12:14:43Z

I like it. Was quite surprised at how small the new quickstart and the new setup chapter are combined.

naomiblack · 2016-11-18T02:42:00Z

This is on hold until @IgorMinar can approve the code / workflow. It would be nice to post soon but not urgent.

…ule and boots it. For specific plunkers, e.g. "QuickStart (reboot edition)" PR angular#2762, that shouldn't have AppModule or main.ts Rescinds the automatic bootstrapping and exclusion of `main.ts` in angular#2786 and angular#2756 Only autoBootstraps when `window.autoBootstrap === true`.

chalin · 2016-11-20T13:53:18Z

public/docs/_examples/quickstart/ts/index.html

  <body>
-    <my-app>Loading...</my-app>
+    <my-app><!-- content managed by Angular --></my-app>


The content of the root component element is actually completely ignored, and so in that sense it would be more accurate to write "content is not managed by Angular" :). Maybe the intent was to write that the content generated by the Angular app gets inserted in the DOM below the root component element? So the remark could be changed to:

<my-app></my-app>

Or

<my-app></my-app>

If this is updated, then index.1.html will need to be updated (actually, it would be nice to be able to get rid of index.1.html altogether).

Good idea. Done.

chalin · 2016-11-21T03:31:41Z

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

  ## Setup a local development environment
+  The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.


Hmm, I think that quotes are needed, i.e.: <live-example name="quickstart">.

This reverts commit 8ccc33e.

googlebot added the CLA: yes label Nov 6, 2016

wardbell self-assigned this Nov 6, 2016

wardbell force-pushed the quickstart-reboot branch 2 times, most recently from 149a496 to cd73078 Compare November 6, 2016 20:33

Foxandxss reviewed Nov 7, 2016

View reviewed changes

Foxandxss approved these changes Nov 7, 2016

View reviewed changes

wardbell force-pushed the quickstart-reboot branch from cd73078 to 987345f Compare November 7, 2016 20:09

DeborahK reviewed Nov 7, 2016

View reviewed changes

DeborahK reviewed Nov 8, 2016

View reviewed changes

wardbell force-pushed the quickstart-reboot branch from 987345f to 3408b72 Compare November 8, 2016 00:34

johnpapa reviewed Nov 8, 2016

View reviewed changes

wardbell force-pushed the quickstart-reboot branch 3 times, most recently from a6b2365 to ea164e6 Compare November 11, 2016 04:03

naomiblack assigned IgorMinar Nov 17, 2016

wardbell force-pushed the quickstart-reboot branch 3 times, most recently from 8ac346b to 950d129 Compare November 18, 2016 02:04

wardbell mentioned this pull request Nov 18, 2016

chore: revise to conform to QS reboot in angular.io PR #2762 angular/quickstart#287

Merged

wardbell force-pushed the quickstart-reboot branch from 950d129 to 0c516a6 Compare November 18, 2016 02:31

wardbell force-pushed the quickstart-reboot branch 2 times, most recently from 7fe1345 to 371fc82 Compare November 18, 2016 22:43

chalin mentioned this pull request Nov 18, 2016

Move lengthy SystemJS description from QuickStart into "Module Bundler Alternatives" #1413

Closed

wardbell force-pushed the quickstart-reboot branch 2 times, most recently from 1ad3b42 to 80a811a Compare November 19, 2016 03:21

chalin reviewed Nov 20, 2016

View reviewed changes

wardbell force-pushed the quickstart-reboot branch from 729ca3b to 51a99ba Compare November 20, 2016 18:14

wardbell added a commit to IdeaBlade/angular.io that referenced this pull request Nov 20, 2016

docs(quickstart): update per @chalin comments in PR angular#2762

51a99ba

wardbell force-pushed the quickstart-reboot branch from 51a99ba to 7d6ef70 Compare November 20, 2016 18:18

wardbell added a commit to IdeaBlade/angular.io that referenced this pull request Nov 20, 2016

docs(quickstart): update per @chalin comments in PR angular#2762

7d6ef70

wardbell force-pushed the quickstart-reboot branch from 7d6ef70 to 08d88b0 Compare November 21, 2016 03:23

wardbell added a commit to IdeaBlade/angular.io that referenced this pull request Nov 21, 2016

docs(quickstart): update per @chalin comments in PR angular#2762

eddb1f7

chalin reviewed Nov 21, 2016

View reviewed changes

wardbell force-pushed the quickstart-reboot branch 6 times, most recently from 72e3e92 to 8fd0235 Compare November 21, 2016 07:27

wardbell added a commit to IdeaBlade/angular.io that referenced this pull request Nov 21, 2016

docs(quickstart): update per @chalin comments in PR angular#2762

1a8de8c

wardbell force-pushed the quickstart-reboot branch 2 times, most recently from 4f227c4 to ef05be8 Compare November 21, 2016 20:15

wardbell added 2 commits November 21, 2016 12:20

docs(quickstart): reboot edition

a5104f0

docs(quickstart): update per @chalin comments in PR angular#2762

66828ed

wardbell force-pushed the quickstart-reboot branch 2 times, most recently from ab6b667 to 01c62b6 Compare November 22, 2016 01:09

docs(quickstart): incorporate more Igor feedback

11636f0

wardbell force-pushed the quickstart-reboot branch from 01c62b6 to 11636f0 Compare November 22, 2016 01:12

wardbell merged commit 8ccc33e into angular:master Nov 22, 2016

wardbell deleted the quickstart-reboot branch November 22, 2016 01:13

wardbell added a commit that referenced this pull request Nov 22, 2016

Revert "[WIP] docs(quickstart): QuickStart reboot (#2762)"

a752572

This reverts commit 8ccc33e.

wardbell restored the quickstart-reboot branch November 22, 2016 01:29

wardbell changed the title ~~[WIP] docs(quickstart): QuickStart reboot~~ docs(quickstart): QuickStart reboot Nov 22, 2016

wardbell added a commit to IdeaBlade/angular.io that referenced this pull request Nov 22, 2016

[WIP] docs(quickstart): QuickStart reboot (angular#2762)

ec2e6cb

wardbell mentioned this pull request Nov 22, 2016

docs(quickstart) reboot 2 #2854

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(quickstart): QuickStart reboot #2762

docs(quickstart): QuickStart reboot #2762

wardbell commented Nov 6, 2016 •

edited

Loading

Foxandxss Nov 7, 2016

wardbell Nov 7, 2016

johnpapa Nov 8, 2016

johnpapa Nov 8, 2016 •

edited

Loading

wardbell Nov 8, 2016

Foxandxss left a comment •

edited

Loading

Foxandxss Nov 7, 2016

wardbell Nov 7, 2016

Foxandxss Nov 7, 2016

wardbell Nov 7, 2016

Foxandxss Nov 7, 2016

Foxandxss Nov 7, 2016

wardbell Nov 7, 2016

wardbell commented Nov 7, 2016

DeborahK Nov 7, 2016

DeborahK Nov 7, 2016

wardbell Nov 8, 2016

DeborahK Nov 8, 2016

wardbell Nov 8, 2016

johnpapa Nov 8, 2016

johnpapa Nov 8, 2016

wardbell Nov 8, 2016 •

edited

Loading

johnpapa Nov 8, 2016 •

edited

Loading

filipesilva commented Nov 15, 2016

naomiblack commented Nov 18, 2016

chalin Nov 20, 2016

wardbell Nov 20, 2016

chalin Nov 21, 2016

		## Setup a local development environment
		The <live-example name=quickstart>QuickStart live-coding</live-example> example is an Angular _playground_.

docs(quickstart): QuickStart reboot #2762

docs(quickstart): QuickStart reboot #2762

Conversation

wardbell commented Nov 6, 2016 • edited Loading

Todos:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

johnpapa Nov 8, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Foxandxss left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardbell commented Nov 7, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardbell Nov 8, 2016 • edited Loading

Choose a reason for hiding this comment

johnpapa Nov 8, 2016 • edited Loading

Choose a reason for hiding this comment

filipesilva commented Nov 15, 2016

naomiblack commented Nov 18, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardbell commented Nov 6, 2016 •

edited

Loading

johnpapa Nov 8, 2016 •

edited

Loading

Foxandxss left a comment •

edited

Loading

wardbell Nov 8, 2016 •

edited

Loading

johnpapa Nov 8, 2016 •

edited

Loading