Step by step guidance to generate Angular 2 through Yoeman

Introduction

Angular 2 is an open source JavaScript framework to build web applications. Yoeman is the scaffolding tool for modern webapps. In this step by step article we will look into generating Angular 2 application through Yoeman.

Straight to Experiment

Step 1: Install latest Node.js for windows

The first step is to download the latest Node.JS and install into the system. We have installed node-v6.9.1-x64.msi for this article.

Step 2: Install Yoeman

Open a console window and install Yoeman using node package manager(npm) as under

npm install -g yo

After successful installation we will receive something as under

Step 3: Install Yoeman generator for Angular 2

As a third step, we need a Yoeman generator for Angular 2. It can be done either by

1. Issuing the command

   yo -v

   

   In which case we need to specify the Angular2 by using the up/down arrow key of the keyboard following by pressing the Enter button

2. Install both Yeoman and this generator globally by issuing the command.

   npm install -g yo generator-angular2

   

Step 4: Run the generator in our desired folder

Create a folder say C:\FirstAngularJS2Application and run the below command

yo angular2

After successful installation we will receive

If we now look inside C:\FirstAngularJS2Application, we can find

Visit the src folder to find

Step 5: Modify the content of first-angular-js-2-application.html

Open first-angular-js-2-application.html found inside the src folder and modify it as under

<h1><b><font color="blue">Hello Angular JS2 - From RNA team</font></b></h1>

Step 6: Run the application

From the command line issue the below command

npm start

The output is as under

N.B.~ While performing the experiment, we have observed a cool feature. If we have done some mistake while designing our template, it will be caught immediately. To illustrate our statement, let us make the below changes in the first-angular-js-2-application.html(we have deliberately didn't close the end font tag)

<h1><b><font color="blue">Hello Angular JS2 - From RNA team</b></h1>	

Now run the application

The template parser woks as expected and notifies the error nicely!!!

Reference

Conclusion

Angular 2 is a nice modern web framework. Being a successor of AngularJS, it has brought into it many cool features. We will explore them in future article(s). Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.