March 31, 2015 Harmeet Singh

How to configure AngularJS Plugin in Liferay

AngularJS IDE plugin is based on tern.java to manage powerful completion on HTML files (AngularsJS Expression, directive, modules) and Javascripts files.

Configure AngularJS Plugin in Liferay

AngularJS IDE Plugin help you to extend Liferay web development tool and enhance the capabilities of UI development in liferay:

HTML editor which supports AngularJS expression and directive.

Angular Explorer view which displays modules, controllers of your project in a tree structure.

Javascript editor which supports AngularJS features (modules, etc).

Follow this below steps to configure the angularjs plugin in liferay

Go to : Help > Click on Install New Software

Copy and paste this URL in Work with textbox “Anularjs – http://oss.opensagres.fr/angularjs-eclipse/0.7.0/”

Anularjs – http://oss.opensagres.fr/angularjs-eclipse/0.7.0/

We need to select only those components who are not installed on you Liferay Developer Studio.

Click on checkbox “Hide items that already installed”

Click on Next Button.

After installation of all the components you can convert your Project.

Right click on your project > Configure > Convert to AngularJS Project

AngularJS Eclipse is based on the javascript inference engine tern.js is written in JavaScript. To use it You must configure node.js. You can also do it this with Rhino but it’s too slow for that .To do that you can :

Now Go to Window > Prefrences > Select Tern:

when the native node is selected, in default folders installation, it explores node binary (ex : “C:\Program Files\nodejs\node.exe” for Windows) and if it doesn’t locate, it seeks in your node in your “PATH” environment. For that you have to set PATH enviroment in your system.

You can download node.js from this link. you must install the node.js according your OS Configuration :

Right Click on your Project properties and verify the angular plugin

Angular plugin will offer you to recover controllers,module, (custom) directives while writing a code. Here you can also see the list of other modules are available which we can select and enable as per the project requirement.