How to add ui-bootstrap in AngularJS Portlet

Platform:
Liferay 6.x, 7.x
AngularJS 1.6.x

To addui-boostrap into AngularJS, we will reuse the AngularJS portlet created earlier with ui-router.

Steps to add ui-bootrap are pretty simple, we just need to import ui-bootstrap-tpls-2.5.0.min.js in view.jsp

<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js" />

and also bootstrap.min.css

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Lastly, we can start using bootstrap components by referring the bootstrap demo page.


Done!!

How to use ui-router in AngularJS Portlet

Platform:
- Liferay 6.x, Liferay 7.0
- AngularJS 1.6.x

In this example, we will also continue from the first angularJS portlet created in earlier post.
the differences with the ngRoute example are main.jsp

Steps
1. create 2 new jsp for the ui-routing example in the same folder with view.jsp
- page1.jsp, with the following content

<h2>This is the page 1.</h2>

- page2.jsp, with the following content

<h2>This is the page 2.</h2> 

How to use ngRoute in AngularJS Portlet

Platform:
- Liferay 6.x, Liferay 7.0
- AngularJS 1.6.x

In this example, we will continue from the angularJS portlet created in earlier post.
1. create 2 new jsp for the routing example in the same folder with view.jsp
- first.jsp, with the following content.

<h2>This is the first page.</h2>

- second.jsp, with the following content

<h2>This is the second page.</h2>

How to create AngularJS portlet in Liferay

Platform:
- Liferay 6.x, 7.0
- AngularJS 1.6.x

Hello World in Liferay Angular Portlet
1. create liferay plugin with liferay mvc portlet tempalte
File > New > Other > Liferay > Liferay Plugin Project > Next

    Fill in "Project name" > Finish.

How to create slanted PREVIEW div

the code below is to create a slanted Preview like the image below.

<div
    style="position: absolute; top: 75px; left: -225px; width: 600px; height: 28px; margin: 0px; padding: 10px; font-size: 24px; text-align: center; color: rgb(255, 255, 255); font-family: &quot;trebuchet ms&quot;,verdana,arial,sans-serif; transform: rotate(-45deg); transform-origin: 50% 0px 0px; border: 1px solid transparent; z-index: 1200; background-color: rgb(0, 0, 0);" >
    Preview
</div>


Done!!