June 24, 2021

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”

Install Angular

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 :

Install nodeJS

Right Click on your Project properties and verify the angular plugin

Angular-module

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.

Set your Script path:

scrpt-path

Settings of AngularJS Directives Syntax

Angular is using several syntax of declaring directives like starting with ‘x-‘, ‘data-‘ and use ‘:’, ‘-‘, ‘_’ delimiters.

directives

Here ,we have finished to configure AngularJS IDE Plugin, now it’s time to write the code and start your first web application with Liferay.

Leave a Reply

Your email address will not be published. Required fields are marked *