Build and Run a simple Angular2 Application

Angular2 is a structural framework for building dynamic web applications client-side for desktop and mobile. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. In this article, I’ll show you how to create a simple application which has the structure of a real-world Angular application and displays the simple message.

This application is using Angular 2, TypeScript, Angular CLI Node, NPM Java EE, Eclipse Neon and Google Chrome.

Prerequisites

  • Download and Install Java JDK latest version & Eclipse Neon as an IDE.

Environment Setup & Steps To Run Angular2 Application in ‘Eclipse’ IDE:

  1. Install the latest versions of Node.js & NPM which acts as JavaScript runtime environment and its package manager.
  2. Install Angular CLI which acts as a command line interface for Angular.
  3. Drag & Drop Angular2 Eclipse plugin (which internally packed with below plugins) from below https://marketplace.eclipse.org/content/angular2-eclipse#group-external-install-button

  1. File>New>Dynamic Web Project>Name it and click Finish.
  2. Now Angular-CLI comes into picture -which generates Angular 2 components, services and allows you to work with Angular 2 application out-of-the-box.
  3. Right click on the Project>select Show in Local Terminal>Terminal.

Inside the terminal, execute,  ng init  which takes couple of minutes to complete, post completion refresh the Project in Eclipse (Observe the src folder which is updated with an app folder and several other files like app.components, index.html, main.ts and many other dependent files).

Observe the Final Project folder Structure over here.

Running the App

If you want a customize the default welcome message just open app.component.ts and write up you wish to…

It’s time to run the app!!! Run the command  npm start / you can run directly run from UI via Right Click on Project -> Run As- Run on Server(configured if any) or simply just click on ng serve  and

Observe the terminal for build logs which displays as in follows.

Finally open Chrome browser and type the url:  http://localhost:4200/

You’ll see a “Loading…” message for a second and then the below customized welcome message.

Advertisements