https://github.com/nonblocking/liferay-angularjs-es2015-portlet
AngularJS 1 Liferay Portlet with ES2015
https://github.com/nonblocking/liferay-angularjs-es2015-portlet
Last synced: 11 months ago
JSON representation
AngularJS 1 Liferay Portlet with ES2015
- Host: GitHub
- URL: https://github.com/nonblocking/liferay-angularjs-es2015-portlet
- Owner: nonblocking
- Created: 2016-05-01T18:05:37.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-19T09:50:33.000Z (almost 10 years ago)
- Last Synced: 2024-10-05T22:04:17.697Z (almost 2 years ago)
- Language: JavaScript
- Size: 15.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
AngularJS Portlet Demo ES2015
=============================
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:
1. A [Spring Portlet MVC](http://docs.spring.io/spring/docs/4.0.x/spring-framework-reference/html/portlet.html) backend that handles all AJAX requests as resource requests.
It leverages the [thymeleaf](http://www.thymeleaf.org/) HTML5 template engine to pass the resource URL and other parameters as JavaScript variables to the frontend.
2. An [AngularJS](https://angularjs.org/) frontend that can also be run **standalone with node.js**, which can greatly accelerate the development.
## Build
### Prerequisites
* [Maven](https://maven.apache.org/) build tool (should come with your favorite IDE)
* [node.js](http://nodejs.org/) and [Gulp](http://gulpjs.com/) to build and run the HTML5/JavaScript code
* [SASS](http://sass-lang.com/) to compile the Sassy CSS into CSS
### Create the WAR file
Just run **mvn package** on the command line.
## Run
### On a Liferay 6.2 Portal
Drop the generated _liferay-angularjs-es2015-portlet-*.war_ file in the_target_ directory into the *{liferay-home}/deploy* folder.
Alternatively execute on the command line: **mvn liferay:deploy -D\**
### Standalone
Run **npm install** and **gulp watch** in the root directory of the project. The webapp will be available on *localhost:9000*.
## Notes
* This portlet is pretty similar to [liferay-angularjs-portlet](https://github.com/nonblocking/liferay-angularjs-portlet), except:
* ES2015 is used. Tanspiled to JavaScript with [Babel](https://babeljs.io/)
* [browserify](http://browserify.org/) is used to package the modules
* The build is done with *gulp* instead of *grunt*
* Where ever possible the *component()* helper introduced in AngularJS 1.5 is used. Together with a simple component based router.
* In a real world app **don't forget Java and JavaScript unit tests**!