Hi,
We are trying to implement the single page application ( which is running on angularjs) into AEM .
We are able to create single page application using angularjs but while implementing that into AEM we are facing some issues like below
1. We are not able to load individual pages without ng-app directive.(we need to load angularjs using ng-app directive in both main page and secondary pages which is not a practice using angularjs)
2.Not able to fetch the scope variable values which are created in main page using ng-controller to secondary pages (which we can fetch using ng-controllers in angularjs)
Please help me in creating single page application using angularjs in AEM and let me know if you need more information.
Views
Replies
Total Likes
Hi,
I personally haven't worked in Angular SPA + AEM but here is one of best approach I can share
http://www.computepatterns.com/1058/javascript-frameworks-powering-single-page-applications-spa/
Though I am still not clear on your question. Can you elaborate a bit more.
Thanks
Views
Replies
Total Likes
Hi ,
We have created one main page and two partial pages (secondary pages).
On main page we have created two tabs for secondary pages. On click of each page it will open content of respective secondary pages on main page with out refreshing the page.
for that we are using below sample code in mainpage component.
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.all @ categories='angularjs'}" />
<body ng-app="myApp">
<h1 style="text-align:center"> Welcome to main page</h1>
<a href="#about">about</a>
<a href="#ideas">ideas</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.controller("jsonCtrl", function($scope, $http) {
$scope.message = 'Look! I am an idea page.';
});
app.controller("test", function($scope, $http) {
$scope.message = 'Look! I am an about page.';
});
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "/content/SPA/home.html",
})
.when("/ideas", {
templateUrl: "/content/SPA/index/ideas.html",
controller: "jsonCtrl"
})
.when("/about", {
templateUrl: "/content/SPA/index/about.html",
controller: "test"
})
});
</script>
<sly data-sly-include="footer.html" data-sly-unwrap/>
</body>
And using above angularjs routing we are able to see content of idea and about pages in main page.
But if I individually open the pages (idea or about pages ) its not loading angularjs as I am not able to fetch {{message }} in individual pages.
Views
Replies
Total Likes
Looks like its a clientlib issue - when you load main page - Ang libs load.
Hi,
if I load main page Angular libs will load.
Views
Replies
Total Likes
Do you have Angular JS loaded in your idea and about pages? Without that you cannot load those pages individually with angular working
Views
Replies
Total Likes
Hi Venkat,
I setup the code which you posted and it works fine for me.
Only thing I changed was:
<a href="#!about">about</a>
<a href="#!ideas">ideas</a>
In the above code, I added bang symbol to href.
Let me know if it works for you.
Views
Likes
Replies
Views
Likes
Replies