A Liferay portlet that just list all users and shows how AngularJS and Spring Portlet MVC can be used to create single page HTML5 portlets.
The demonstrator consists of two parts:
- A Spring Portlet MVC backend that handles all AJAX requests as resource requests. It leverages the thymeleaf HTML5 template engine to pass the resource URL and other parameters as JavaScript variables to the frontend.
- An AngularJS frontend that can also be run standalone with node.js, which can greatly accelerate the development.
- Maven build tool (should come with your favorite IDE)
- node.js and Grunt to build and run the HTML5/JavaScript code
- SASS to compile the Sassy CSS into CSS
Just run mvn package on the command line.
Drop the generated liferay-angularjs-portlet-*.war file in the_target_ directory into the {liferay-home}/deploy folder. Alternatively execute on the command line: mvn liferay:deploy -D<base_path_of_your_lifery_installation>
Run npm install and grunt server in the root directory of the project. The webapp will be available on localhost:9000.
- To run the portlet on a Liferay 6.1 portal two files need to be changed:
- In liferay-portlet.xml change the doctype from 6.2.0.dtd to 6.0.0.dtd and remove the line <requires-namespaced-parameters>false</requires-namespaced-parameters>
- In liferay-plugin-package.properties change the liferay-versions property to 6.1.0+,6.1.2+
- The AngularJS portlet in this demonstrator is instanceable, which means that you can place it multiple times on a single portal page
- In order to allow multiple angular based portlets on a page angular-route cannot be used
- If you plan to make a whole suite of AngularJS portlets you should put all JavaScript base libraries and base modules into your theme (instead of shipping it with every single portlet).
- In the standalone version live-reload is activated, so whenever you change a SASS or JS file the browser will refresh automatically.
- In a real world app don't forget Java and JavaScript unit tests!
