HowTo: Angular.js with Eclipse, 2017

  1. Downloads and Installations
    • Node.js and NPM
    • Angular.js
    • Eclipse
    • Angular with Eclipse Support
  2. Create a test app
    • Using Angular command line interface to create the app
    • Open the angular project in eclipse
    • Install missing angular features

 

1. Downloads and Installations

Node.js and NPM

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js‘ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

So Node.js is software which can execute JavaScript like web browsers can do.

The recommended way to install and setup your angular.js coding environment is via NPM, the package manager of Node.js.

Download and install Node.js and npm

Angular.js

You can read what angular is here. Once you have installed node.js and npm you can open your console in linux or mac, in windows its the command prompt, and type:

npm install -g angular

This will install Angular.js globally.

You can test which packages are globally installed with: npm list -g –depth=0. angular should be in the list now.

 

Eclipse

go to https://www.eclipse.org/downloads/? and install the latest version of eclipse, which is oxygen.

This will download the eclipse installer. Open the installer and choose

Eclipse IDE for JavaScript and Web Developers

eclipse-web

Angular.js support in Eclipse

After eclipse is installed we have to add Angular.js and TypeScript support for eclipse.

Open eclipse, then open the website https://marketplace.eclipse.org/content/angularjs-eclipse in your browser and drag the Install button into eclipse.

Unbenannt

2 Create and view a test app

Using Angular command line interface to create the app

Now its time to create a test app via angular CLI.

First, create an folder for your app, then switch into that folder via cd <path-to-your-folder>.

Now type in the following command in your console to create an app:

ng new test-app

You can test if the creation was successfull and if your setup is ok by going into that test-app dir and type ng serve to start the app.

Open the angular project in eclipse

In eclipse, go to

File->Open projects from File System… 

and choose the newly created test-app.

Open the Angular Perspective

At the top right of eclipse, click on the perspectives button and open choose the Angular Perspective:

perspectivesbutton

angular-persp

Install missing angular features

Now expand the project folder and open src->app folder to see the generated files:

open-ts-file

Double click the app.module.ts or any other .ts file. Eclipse will inform you that there is an editor for TypeScript files available at the marketplace. Follow the suggestions of eclipse and install them.

If you get warning messages like „cannot install all required features because of some versions missing“ then choose the option „install required versions to install all features“ or something like that.

After that everything should be setup for developing Angular.js applications in eclipse!

You can test if it works by right clicking the project and then choosing Run As->Angular Web Application.

 

The End! Hopefully this guide helped you!

Advertisements