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

Useful linux commands

Explanation

  • Just open a linux-shell and type in the commands

Change keyboard layout
loadkey de
setxkbmap -layout de

Open textfile with an editor
nano textfile
vi textfile
pico textfile

Show content of file in shell
cat textfile
less textfile
head textfile
tail textfile

Show content of variable
echo $MYVAR

Set content of variable
export MYVAR=someValue

Append value of variable
export MYVAR=$MYVAR" addition"
echo $MYVAR => someValue addition

Execute shellscript
source myscript.sh
. myscript.sh

Show treeview of files and directories
only directories, with max depth of 3, and ignore „target“
tree mydir -d -L 3 -I target
current dir, only dirs, show full path, and dont sort, max Depth 5
tree . -fUd -L 5

Write output of command into file
tree >> test.txt
Note: if the file doesn’t exist, it will be created automatically!

… list will be updated from time to time