Lets try Tutorial of angularjs 2

Angular team has released a tutorial on how to get started, where they explain how to setup the project and run a simple Hello World example.

We will follow the same here. The tutorial they have provided is quite self explanatory with some “Googling”.

To get started, create a new folder named ng2 and open a new terminal/prompt here.

Make sure you have Git installed, and run

git clone https://github.com/angular/quickstart.git hello2ng2

This will clone the quick start project to hello2ng2 folder.

The project consists of the following libs (as of today)

  • Pre-built ES5 version of Angular 2 alpha-11
  • Pre-built ES5 version of rtts-assert alpha-6
  • The es6-shim, which includes Traceur, ES6 Module Loader, System, Zone, and Traceur options for meta-data annotations.

Do notice the directory structure

├── angular2
│   └── src
│       ├── change_detection
│       │   ├── parser
│       │   └── pipes
│       ├── core
│       │   ├── annotations
│       │   ├── compiler
│       │   │   ├── pipeline
│       │   │   ├── shadow_dom_emulation
│       │   │   └── xhr
│       │   ├── dom
│       │   ├── events
│       │   ├── life_cycle
│       │   └── zone
│       ├── di
│       ├── directives
│       ├── dom
│       ├── facade
│       ├── forms
│       ├── mock
│       ├── reflection
│       └── test_lib
├── dist
└── rtts_assert
    └── src

Build the App

The Angular tutorial suggests to create the project related files at the root of the directory. With so much going on at the root of the directory, I found it easy to maintain the files inside a folder named app. This situation is temporary till Angular 2.0 moves to a stable release.

So, create a new folder named app at the root of the project. Create a file named index.html inside the app folder. And update it as below

<html>


<head>


    <title>Angular 2 Hello World!</title>


    <script src="/dist/es6-shim.js"></script>


</head>




<body>




    <my-app></my-app>


    <script>


    // Rewrite the paths to load the files


    System.paths = {


        'angular2/*': '/angular2/*.js', // Angular


        'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions


        'app': 'app.es6' // The my-app component


    };




    // Kick off the application


    System.import('app');


    </script>


</body>




</html>