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

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

Open
@ghost

Description

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions