Getting started AngularJS with Liferay Portal

After reading the title of this post the first question comes in your mind is “Can we use AngularJS with Liferay?”
and my answer is yes we can. Now your thinking why AngularJS? I will give the answer of your all questions in this article.

What is AngularJS?

Angular js is open source web application development framework developed by Misko Hevery and maintained by Google. AngularJS architecture based on MVC(Model – View – Controller). MVC pattern help you to manage separately presentation, data, and logic components. server-side services are offered by Angular, like view-dependent controllers, to client-side web applications.

These are the some remarkable features:

• HTML Declarative approach:This feature help you to declaring dynamic views in static web-applications. For your application, AngularJS facilitates you to extend HTML vocabulary. The consequential ssetting is especially expressive, readable, and quick to develop.
• Easy Data Binding : AngularJS Two-way data binding is its most distinctive feature, and it reduces the amount of write dynamic code.
• Reusable Components: Using AngularJS directives help you to make your component reusable.
• Dependency Injection: You can easily inject dependencies of other modules in your web Application. Dependency injection is also a core to AngularJS.
• End to end Integration Testing / Unit Testing: While writing a code for application, we also need write test cases. Angular is designed makes testing your application easy by using dependency Injection feature that makes testing components much easier then any other frameworks. Jasmine and Karma are the testing tool which we use in angular application
• Routing: This feature allows to make your SPA website much easier.
• Templating: Dynamically creating and updating HTML based on templates.
• Services: you can use server side services in angular to make your web application dynamic.

If you are thinking to develop Angular Web Application in LIferay Developer Studio then Before starting to write a code you must know how to configure AngularJS in your liferay. It’s reduce your efforts to develop and maintain your Angular Web Application in Liferay. You can also write individual portlet in AngularJS. So in this article i am going to make a Independent News List portlet with the help of JSON Array in Angular.

Creating a liferay portlet

• Go to the package Explorer > Right click New > Select Liferay Plugin Project

See Figure 1

If you want to setup AngularJS in Liferay developer studio. Read this article

or you can directly add the AngularJs Library in your theme or You can add directly in your portlet as well.

　　<script src="${themeDisplay.pathThemeJavaScript}/lib/angular.min.js"></script>

Now start write your code in portlet main.js file.

In this article you can see how Angular makes browsers intelligent— without the use of any other third party plugins.

What you Learn in this article:-

• Examples of how to use client-side data binding to build dynamic views of data that change immediately in response to user actions.
• See how Angular sync your data in view without the need for DOM manipulation.
• Learn a better, easier way to create AngularJS based portlet that works independently with your application

Getting Started

AngularJS is using HTML Declarative Approach to write and extend HTML code with custom attributes and elements. It’s also helps you to in Data Binding. You have to create one pure static HTML page then examine how we can convert this HTML code into a template that angular will use to display dynamic data.

So here is Static HTML code:-

<ul>
		<li>
			<a href="#"><img src="" alt="news-img"/></a>
				<div class="news-desc">
					<h4></h4>
					<p></p>
				</div>
			</li>
			<li>
			<a href="#"><img src="" alt="news-img"/></a>
				<div class="news-desc">
					<h4></h4>
					<p></p>
				</div>
		</li>
	</ul>

In AngularJS, the view is a magnification of the model through the HTML template so whenever we change anything in the model angular refreshes the same binding points and updates in the view.

The view component is frame by Angular from this template:

docroot/view.jsp:

<div ng-app="NewsListApp" class="NewsListApp">
	<ul ng-controller="NewsListCtrl">
		<li ng-repeat="news in newslist">
			<a href="{{news.url}}" class="news-img">
				<img src="{{news.img}}" alt="news-img"/></a>
				<div class="news-desc">
					<h4><a href="{{news.url}}">{{news.title}}</a></h4>
					<p>{{news.desc}}</p>
				</div>
			</li>
	</ul>
</div>

We replaced the HTML news list with the ngRepeat directive and Angular expressions:

• The ng-repeat=”news in newslist” attribute in the
• tag is an Angular repeater directive. The repeater tells Angular to create a
• element for each news in the list using the
• tag as the template.
• The expressions wrapped in curly braces {{ }} will be replaced by the value of the expressions.

We have added a new directive, called ng-controller, which attaches a NewsListCtrl controller to the parent tag.

• The expressions in curly braces {{ }} show bindings, which are referring to our NewsListApp model, which is set up in our NewsListCtrl controller.

Now Build your portlet. After completing successful build go to your browser open your localhost site and just drag the portlet in layout to see the result.

Note: We have specified to load Angular Module using ng-app=”NewsListApp”, where NewsListApp is the name of our module. This module will contain the NewsListCtrl.