Hi I'm very new to the ionic framework. I'm trying to build an android app, which will have a sign in page at the beginning after you log in the feeds page will be displayed which has side menus as well. like bellow
<script id="templates/feed.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-calm">
<div class="buttons">
<button class="button icon button-clear ion-navicon-round" ng-click="toggleLeft()"></button>
</div>
<h1 class="title">The Resistance</h1>
</ion-header-bar>
<ion-content>
<div class="list card">
<div class="item item-avatar-left">
<img src="img/ionic.png" alt="">
<h2>John Connor</h2>
<p>02 December 3014 at 12:02am</p>
</div>
<div class="item item-body">
<p>2 T-600's are on their way to our third base. Take cover and destroy them with stealth.</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-minus-circled"></i>
Hide
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-bookmark"></i>
Save
</a>
</div>
</div>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item ng-click="modal.show()">Broadcast Message</ion-item>
</ion-list>
<ion-list>
<ion-item>Saved Messages</ion-item>
</ion-list>
<ion-list>
<ion-item>Logout</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
</script>
angularJS to render it as follows ....
angular.module('ionicApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: '/forgot-password',
templateUrl: '#/templates/forgot-password.html'
})
.state('feeds', {
url: '/feeds',
templateUrl: 'templates/feed.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('/sign-in');
})
.controller('SignInCtrl', function ($scope, $state) {
$scope.signIn = function (user) {
console.log('Sign-In', user);
$state.go('feeds');
};
})
.controller('MainCtrl', function ($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft()
},
$ionicModal.fromTemplateUrl('modal.html', function ($ionicModal) {
$scope.modal = $ionicModal;
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
});
But when I log in the feeds page loads with the ion-content but without the proper side menus content, I mean if I refresh the page then the feeds page will load properly with proper side menu and exactly how i want it. But i don't want to refresh i want it to load at real time without any refreshment.
Please help me.
Thank you