Rework the "Quick Start" (in essence: 100% rewrite)

ghost commented 7 years ago

A newcomer hits soon on this document:

https://angular.io/docs/ts/latest/quickstart.html

But the title is misleading: it is not(!) a quickstart, but something like a strage "quick incomplete intro".

A "Quick Start" allows for a quick start (e.g.: Prerequisites, installation some cli commands which produce and start an app).

The document presented as a "Quick Start" does not much more than "shooting terms":

component, @Component decorator, metadata object, component class, selector, property, tag, Plunker, Typescript"

Where it should be something like this:

(I'm aware that there is additionally a cli-quickstart doc, but it's too big. This here demonstrates how compact this should be)

Angular Quick Start

So, lets just start, quick!

Prerequisites

You need node.js and npm on your machine, which you can download here:

https://nodejs.org/en/download/

Once you have them installed, open a command-window, and verify the versions with:

node -v
npm -v

Node should be version X.X.X or greater, npm should v X.X.X or greater.

Angular Installation

Use npm (node package manager) to install angular and the angular-cli globally on your machine:

npm install -g angular @angular/cli

Setup a project

ng new myapp
cd myapp
ng serve --open

The above 3 commands should result in your browser opening at

http://localhost:4200

with a message like "App works!"

Edit Some Files

(edit the application title etc., simple stuff to show the reloading, so user is happy!)

Going On

As a next step, take the Basic Tutorial, which showcases the creation of a simple application. The tutorial is ideal for beginners. It is then extended by an Advanced Tutorial, where more advanced concepts are demonstrated.

For the case you are curious about the files within your project, they are explained within Project Structure.

Feedback & Help

If you spotted a flaw in the documentation, please file an issue within:

https://github.com/angular/angular.io/issues/new

The easiest way to get help, is to ask a questions on SO

<SO link>

Additionally, you can get (if you're lucky) direct help on the xyz chat:

<chat link>

Enjoy your work with Angular!

wardbell commented 7 years ago

We plan to show a cli-based quick start. Thanks for suggesting a way to do so.

ghost commented 7 years ago

@wardbell , some of the documentation needs much time to be reworked (essentially, a newcomer must learn it, the document it). But the setup & quick-starts etc. are quite easy, so I can provide them, even fully worked out.

More important is the landing-page of the docs, and the menus (see angular/angular#15774)

As s tiny OT sidenote: Angular made it to no.1 of my evaluation (with Vue being no. 2), but I've decided to start my project with a commercial toolset. I'll still keep an eye on Angular and contribute a little bit (awaiting the aio migration first).

angular / angular.io