I have seen many webpages with a similar topic, but complex while we try to replicate it in our local environment. Some times they don't work or quite tough to make it work. Here I am going to take you through an easy Angular JS integration with Sightly.
Note: Please ensure you verify the angular syntax using any online tool when you update the code because angular is strict on syntax.
What is angular JS?
Angular JS is a JavaScript library that simplifies the creation of powerful components, by extending HTML vocabulary for your application.
Why Angular JS with AEM HTL?
Angular JS is the current trend. When we need to declare dynamic views in web applications to make it extraordinarily powerful, we need Angular JS.
What is the aim of this sample?
Through this demo, you will know how to create a simple angular JS Component which performs below tasks,
- Takes user input and display through angular JS tags
- Takes user click and show an element using angular JS
- User click invokes a backend WCMUse Java file and displays the data through HTL + Angular JS
Create a template
Create a new template as shown below at /apps/htl/templates
Create a folder 'page' at /apps/htl/components
Create a new component at /apps/htl/components/page as shown below
Update the 'templateHTL.jsp' file content at /apps/htl/components/page/templateHTL/templateHTL.jsp with below code.
<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is your Angular HTL Component</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>
Create and render component that uses the template
Create a component as shown below
Go to path /apps/htl/components/angular/angular.html and modify the 'angular.html' with below code
<div ng-app>
<p>Enter a value: <input type="text" ng-model="name">
<p ng-bind="name"></p>
<div ng-view></div>
<ul class="menu">
<li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>
<li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
</ul>
<div ng-view></div>
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
<script type="text/ng-template" id="/tpl1.html">
<p> First name: <input type="text" ng-model="firstname"/>
Last name: <input type="text" ng-model="lastname"/>
</p>
<p>First name:<p ng-bind="firstname"></p>
<p>Last name:<p ng-bind="lastname"></p>
</script>
<script type="text/ng-template" id="/tpl2.html" data-sly-
include="template.html">
</script ></div>
Create a 'template.html' at path /apps/htl/components/angular
<div data-sly-use.vehicleService="com.aem.VehicleService" >
<div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
<ul data-sly-list.keyName="${myClass.getVehicleDetails}">
<li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
</ul>
</div>
</div>
Create a dialog (create dialog option) at path /apps/htl/components/angular with label 'dialog'
Client Library Creation for AngularJS framework
Create a folder 'clientlibs' at /apps/htl/components/angular and Add below two properties to it.
(name:categories, Type:String[], value:cq.widget)
(name:dependencies, Type:String[], value:angularjs)
- Download the latest 'angular.min.js' from angular JS Site
- Create a file 'angular.min.js' in folder /apps/htl/components/angular/clientlibs; copy paste the downloaded angular.min.js content to this file.
- Now you have angular JS at your crx in location /apps/htl/components/angular/clientlibs/angular.min.js
- Create a new file js.txt at /apps/htl/components/angular/clientlibs; open the file 'js.txt' and paste 'angular.min.js' (without quotes) and save it.
- Now you have a new client library for angular JS.
- Add this in your page , open file /apps/htl/components/page/templateHTL/templateHTL.jsp and add new client library to it by adding line
- <cq:includeClientLib categories="cq.widgets" />
Create a WCMUse class for data.
We are creating a map with a set of vehicles and populating it using HTL.The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.
Create a page that uses AngularJS functionality; Code execution
Open site admin and create a page with template 'templateHTL'. Open it in edit mode.
Drag and drop the 'angular' component to the newly created page.
Once you reload the page and start entering anything at 'Enter a Value', you can see the inline option working through angular.
Code executed: <p ng-bind="name"></p>
When you click on the 'Template Load example', you can see the new templates on the bottom.
Code executed:
'On Click' is added at line,
<li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>
A template place holder is at line,
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
Script executed when the teplate got clicked,
<script type="text/ng-template" id="/tpl1.html">
<p> First name: <input type="text" ng-model="firstname"/>
Last name: <input type="text" ng-model="lastname"/>
</p>
<p>First name:<p ng-bind="firstname"></p>
<p>Last name:<p ng-bind="lastname"></p>
</script>
You can also see, on entering first name and second name, again inline in action.
When you clicked on 'Show the list of cars'
We have the Data coming from the WCMUse class now as shown below.
Code executed 'On Click' is added at line,
<li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
A template place holder is at line,
<div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
Which in turn calls the script for template selection from
<script type="text/ng-template" id="/tpl2.html" data-sly-include="template.html">
</script >
This executes the template.html at path /apps/htl/components/angular/template.html
The template.html executes the WCMUse class and processes the data from the below code.
<div data-sly-use.vehicleService="com.aem.VehicleService" >
<div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
<ul data-sly-list.keyName="${myClass.getVehicleDetails}">
<li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
</ul>
</div>
</div>
The template.html executes the WCMUse class and processes the data from the below code.
<div data-sly-use.vehicleService="com.aem.VehicleService" >
<div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
<ul data-sly-list.keyName="${myClass.getVehicleDetails}">
<li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
</ul>
</div>
</div>
No comments:
Post a Comment
If you have any doubts or questions, please let us know.