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.
