Angular2 QuickStart Hello World


This post is based on the Angular article called QuickStart that I accessed from the Angular2 website by clicking the “5 min quickatart” link in the second section of the Angular2 website called “Angular2 Tutorials”.

Here are the steps found on the website.

  1. Set up our development environment
  2. Write the Angular root component for our app
  3. Add an Angular Module
  4. Bootstrap it to take control of the main web page
  5. Write the main page (index.html)
  6. Add some CSS (styles.css)

Set up our development environment

  1. Create a new project folder. In this case we call it angular-quickstart.
  2. If necessary, install Node.js and update npm. Do it here.
  3. Add a package.json file to the project folder.
  4. Install these packages by opening a terminal window (command window in Windows), navigating to your project folder (angular-quickstart) and running this npm command: npm install

Here is what our structure will look like when we are done with our “Hello World” example.

Tt’s an index.html, styles.css and three JavaScript files in an app/ folder.

package.json

In the QuickStart guide we are given a package.json file as shown below

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/router": "~3.3.0",
    "@angular/upgrade": "~2.3.0",

    "angular-in-memory-web-api": "~0.1.16",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-rc.4",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2"
  }
}

npm init

The command npm init creates a package.json file for you after you answer a few questions. In our QuickStart example, we are given a package.json file to use so we don’t need to take this step. Running npm init from the command line will create a package.json file for you.

For more information check out the YouTube video called Angular 2 in 60 Minutes by Traversy Media.

Leave a comment

Your email address will not be published. Required fields are marked *