Angular 2 Getting Started

We will show you how to install angular 2 and getting started with the development of the first project.

angular 2 getting started
angular 2 getting started

Install nodeJs and npm. By the way when you install nodeJS automatically npm is installed.

live example at the end of the article and Resources (Code Source)

angular 2 getting started
angular 2 getting started

 

if you do not have nodeJs read the tutorial in this link and come back here:

Follow this link to see how to install nodeJS and npm on your computer.

Install nodeJS npm on your computer

 

angular 2 hello world
angular 2 hello world

 

Create a folder where to place our files: myFirstAngular2Project

  • Inside the root folder add a file and give it the name index.html.
  • inside the root folder we create a folder called app.
  • Inside the app folder add three files.
  • The first file : main.ts
  • The second file : angular-2-hello-world.component.ts
  • The third file :angular-2-hello-world-app.component.ts

In this example we write our code with the programming langue: Typescript (with typescript we can write object oriented JavaScript code).

Configure typescript
Configure typescript

 

Typescript itself can’t run on the Browser. We must convert it into JavaScript.

To convert Typescript into JavaScript we need a Compiler. (The compiler called tsc)

  • Add this file to the root folder:  tsconfig.json
  • Copy and paste this code:
 {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
      },
      "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
      ]
    }
Project dependencies
Project dependencies

We need to install all the dependencies needed to make our project work, it’s easy

  • Add a file this file to the root folder: package.json
  • Copy and paste this code:

    {
      "name": "angulartypescript.com",
      "version": "x.0.0",
      "scripts": {
        "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
        "lite": "lite-server",
        "postinstall": "typings install",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "typings": "typings"
      },
      "license": "ISC",
      "dependencies": {
        "@angular/common":  "2.X.X",
        "@angular/compiler":  "2.X.X",
        "@angular/core":  "2.X.X",
        "@angular/http":  "2.X.X",
        "@angular/platform-browser":  "2.X.X",
        "@angular/platform-browser-dynamic":  "2.X.X",
        "@angular/router":  "2.X.X",
        "@angular/router-deprecated":  "2.X.X",
        "@angular/upgrade":  "2.X.X",
        "systemjs": "X.X.X",
        "core-js": "x.x.x",
        "reflect-metadata": "x.x.x",
        "rxjs": "x.x.x",
        "zone.js": "x.x.x",
        "angular2-in-memory-web-api": "x.x.x",
        "bootstrap": "x.x.x"
      },
      "devDependencies": {
        "concurrently": "x.x.x",
        "lite-server": "x.x.x",
        "typescript": "x.x.x",
        "typings":"x.x.x"
      }
    }
Install dependencies
Install dependencies

We add new file typings.json : this file contains the Typescript definition files.


{
"ambientDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}

the last file is : systemjs.config.js , this file to configure SystemJS.


/**
* System configuration for Angular 2 Hello World
* Adjust if necessary !.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app':                        'app', // 'dist',
'@angular':                   'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs':                       'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app':                        { main: 'main.js',  defaultExtension: 'js' },
'rxjs':                       { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
System.config(config);
})(this);

To install all the dependiecien all we need is to run this command, from the command line (terminal) in the current folder:

npm install

Give it time, depending on your internet speed; the install will take some minutes.

all files from here : angular 2 start project (setup / install / app)

angular 2 start

That’s all start you first project : ) from here: Angular 2 Hello World