AngularJS Articles in AEM Mobile
AEM Articles are normal HTML articles and it supports any front end technology, which a normal web page supports.
In this post, we will see how we can create an Angular JS article in AEM Mobile.
What is AngularJS?
Angular JS is a new Javascript technology which can be added to any HTML by adding relevant Angular library inside <script> tag.
Angular adds Directives to HTML page, and binds data to page with Expressions.
How to add AngularJS in an article?
AEM Mobile article structure contains an index.html with js, css, images, lib folders. This structure is used to create .article file using AEM Mobile packager.
Steps to create angular article:
We need to get latest AngularJS library from AngularJS website. Download 'angular.min.js' and any required angular additional libraries to your /js directory in article folder.
Now create a file controller.js in /js folder and add below code.
<!--Your Controller.js-->
var app = angular.module("myFirstAngular",['ngSanitize'], function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
app.controller("controller",function($scope,$window,$sce){
$scope.personsList =[
{name:'John',age:'23'},
{name:'Jannet',age:'24'},
{name:'Mark',age:'25'}
];
}
);
Add angularJS libraries in your index.html. Below we have added sanitizor also which helps to sanitize the urls.
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
</head>
<!-- Body-->
<!-- ng-app defines an AngularJS application below-->
<!-- ng-controller defines the application controller below-->
<body ng-app="myFirstAngular" ng-controller="controller">
<!--ng-repeat repeats a set of HTML, a given number of times-->
<div ng-repeat="person in personsList">
<div class = "your class">
<p class="name">{{person.name}}</p>
<p class="age" >{{person.age}}</p>
</div>
</div>
Save all the files, drag and drop it to AEM Mobile Packager. Your angular '.article' file is ready. Upload this to AEM - On-demand portal.
When you use AngularJS, you may face issue in adding 'navto' as cross browser call.
Just add 'navto' in aHrefSanitizationWhitelist so that it gets white listed.
Various options in AEM integrated with AEM Mobile On-Demand Portal
Add/MAP user to AEM Mobile project
Create Article/Banner from AEM and publish it to AEM Mobile
Integrate AEM with AEM Mobile
Create an APP in AEM And Mapping with AEM Mobile On-Demand
AEM Mobile Interview questions for developers
Adjusting Home Navigation Menu from AEM Mobile On-Demand portal
AEM Articles are normal HTML articles and it supports any front end technology, which a normal web page supports.
In this post, we will see how we can create an Angular JS article in AEM Mobile.
What is AngularJS?
Angular JS is a new Javascript technology which can be added to any HTML by adding relevant Angular library inside <script> tag.
Angular adds Directives to HTML page, and binds data to page with Expressions.
How to add AngularJS in an article?
AEM Mobile article structure contains an index.html with js, css, images, lib folders. This structure is used to create .article file using AEM Mobile packager.
Steps to create angular article:
- Get Angular
We need to get latest AngularJS library from AngularJS website. Download 'angular.min.js' and any required angular additional libraries to your /js directory in article folder.
- Create Controller
Now create a file controller.js in /js folder and add below code.
<!--Your Controller.js-->
var app = angular.module("myFirstAngular",['ngSanitize'], function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
app.controller("controller",function($scope,$window,$sce){
$scope.personsList =[
{name:'John',age:'23'},
{name:'Jannet',age:'24'},
{name:'Mark',age:'25'}
];
}
);
- Update index file of article to involve AngularJS in article
Add angularJS libraries in your index.html. Below we have added sanitizor also which helps to sanitize the urls.
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
</head>
- Define body element which refers the controller and app.
<!-- Body-->
<!-- ng-app defines an AngularJS application below-->
<!-- ng-controller defines the application controller below-->
<body ng-app="myFirstAngular" ng-controller="controller">
- Add AngularJS code (which is of syntax 'ng-')
<!--ng-repeat repeats a set of HTML, a given number of times-->
<div ng-repeat="person in personsList">
<div class = "your class">
<p class="name">{{person.name}}</p>
<p class="age" >{{person.age}}</p>
</div>
</div>
- Save and upload to AEM - On-demand Portal
Save all the files, drag and drop it to AEM Mobile Packager. Your angular '.article' file is ready. Upload this to AEM - On-demand portal.
When you use AngularJS, you may face issue in adding 'navto' as cross browser call.
Just add 'navto' in aHrefSanitizationWhitelist so that it gets white listed.
Read More:
Add/MAP user to AEM Mobile project
Create Article/Banner from AEM and publish it to AEM Mobile
Integrate AEM with AEM Mobile
Create an APP in AEM And Mapping with AEM Mobile On-Demand
AEM Mobile Interview questions for developers
Adjusting Home Navigation Menu from AEM Mobile On-Demand portal
