Angular 2.0 Application with Bable, ECMAScript 6 and JSPM

I am using JSPM as my package manager.
Using Bable as my transpiler.
ES6 as my language.

Here's are the steps:

• Make sure you have node already installed on your system. If you are not using nvm or n, you should consider using them.
• Install JSPM. You have the option to install it globally or local for each project. I will install it globally.
  npm install -g jspm
• Create an empty directory (i.e. sample)
  mkdir sample
• Configure the project on that directory
  cd sample
  jspm init
  
  JSPM will guide you through the steps to configure your application. I used all the default in my simple app.
• First, you need to install your application dependencies -mainly angular 2.
  
  jspm install angular2 reflect-metadata crypto zone.js
  
  Typically you would only install angular2, but -as of the time being- the others are required for your application to work successfully.
• Create a directory to contain your JS file (i.e. app)
  mkdir app && cd app
• Now create your First component (i.e. app.js).
  
  import {Component} from 'angular2/core';
  
  
  @Component({
      selector: 'test-app',
      template: `Hello {{name}}`
  
  })
  
  
  export class TestApp {
      constructor(){
          this.name = 'Name';
          setTimeout(() => {this.name = 'Changed Name'}, 2000);
      }
  }
• Create your main javascript that bootstraps the application (i.e. main.js).
  
  import 'zone.js';
  import 'reflect-metadata';
  import {bootstrap}  from 'angular2/platform/browser';
  import {TestApp} from "./app.js";
  
  
  bootstrap(TestApp);
• Create the index.html file (In the parent directory) to put it all together.
  
     
     
     

    Still Loading !!!

In the config.js file contains your application configuration options. For example, we need to tell the transpiler (i.e. babel) to use decorators. We will add es7.decorators under babelOptions. Without that option added, you will not be able to run the application as we are already using the decorators (aka: annotations) in our app.js file.

One last configuration step. Register your application in the config.js file. Sibling to paths and map add the following:

packages: {

    "app": {

      "main": "main",

      "defaultExtension": "js"

    }

  },

Now, you can run your application. Simply start an http server instance to serve the resource in your path (i.e. sample directory). You may use python or node to do this. Here's the python command:

Python -m SimpleHTTPServer 8000

Congratulations!! You now have your first angular application running now.