Hi,,
Am working up on angularjs single page application in aem.so created a app.js that has routeprovider function.
my code. app.js
(function(){
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/ideas", {
templateUrl: '/auth/apps/todo-sample/components/pages/ideas.html',
controller: 'ideacontroller'
})
.when("/people", {
templateUrl : "/auth/apps/todo-sample/components/pages/people.html",
controller: 'peoplecontroller'
})
.when('/whatwedo', {
templateUrl: '/auth/apps/todo-sample/components/pages/whatwedo.html',
controller: 'whatwedocontroller'
})
.when('/', {
templateUrl: '/auth/apps/todo-sample/components/pages/home.html',
controller: 'homecontroller'
});
});
Also tried directives and controllers
app.controller('ideacontroller', function($scope) {
$scope.message="Ideas Page";
});
app.controller('peoplecontroller', function($scope) {
$scope.message="People PAge";
});
app.controller('whatwedocontroller', function($scope) {
$scope.message="whatWedo Page";
});
app.controller('homecontroller', function($scope) {
$scope.message="home Page";
});
app.controller('mycontroller', function($scope) {
$scope.message="My Page";
});
app.directive('mydirective',function(){
return{
restrict: 'E',
templateUrl: '/auth/apps/todo-sample/components/pages/directive.html',
controller: 'mycontroller'
}
});
})();
the functions are working correctly.
MY page template is
<div ng-app="myApp">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Morgan Stanley</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a href="#ideas">Ideas</a></li>
<li><a href="#people">People</a></li>
<li><a href="#whatwedo">what we Do</a></li>
</ul>
</div>
</nav>
<div ng-view></div>
<cq:include path="par" resourceType="foundation/components/parsys" />
<cq:include path="par1" resourceType="foundation/components/parsys" />
</div>
So the issues here is :
when the components (i.e., text and image) are added up inthe parsys in page template .the component are displaying in all sub pages (i.e.,tabs in routing).SO how to restrict the component to page-specific here in angular.
