Below are the route configurations in app.js:
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'signupCtrl'
})
.state('profile', {
url: '/profile',
abstract: true,
templateUrl: 'templates/profile.html',
})
.state('profile.init', {
url: '/profile-init',
templateUrl: 'templates/profile-init.html'
})
In the signup page, I have created a button that, when clicked, should navigate the user to the profile-init page using the code - $state.go('profile.init')
In profile.html, I have added:
<ion-content style="background: #c3c3c3"></ion-content>
In the profile-init.html page, the following content is present:
<ion-header-bar class="bar-positive">
<h1 class="title">Profile</h1>
</ion-header-bar>
<div class="row">
<div class="col col-10"></div>
<div class="col col-80 padding">
Thanks for showing your interest
</div>
<div class="col col-10"> </div>
</div>
<ion-footer-bar class="bar-stable">
<button class="button button-clear" ng-click="hello()">Forward</button>
</ion-footer-bar>
However, upon clicking the button, the navigation is not working as expected. The page redirects to /#/profile/profile-starter and only shows a background color with no text visible. Even though the template is loading without errors in the console, there seems to be an issue. Please help me identify what I am doing wrong here.