I'm having problems using $ionicHistory on pages where ion-tabs are used. I use this to navigate to the previous view (using goBack()). When I put tabs in a view, the history is wrong, back view is two views before.
To demonstrate this I have create a demo app (plunker here) that has 4 pages/views. Page 1 -> Page 2 -> Page 3 -> Page 4. The last page has tabs on it.
angular
.module("demoapp", ['ionic'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider
.state('first', {
url: '/',
controller: 'firstController',
templateUrl: 'first.html',
})
.state('second', {
url: '/second',
controller: 'secondController',
templateUrl: 'second.html',
})
.state('third', {
url: '/third',
controller: 'thirdController',
templateUrl: 'third.html',
})
.state('fourth', {
url: '/fourth',
controller: 'fourthController',
templateUrl: 'fourth.html',
});
$urlRouterProvider.otherwise("/");
}])
.factory("historyFactory", ['$ionicHistory', function($ionicHistory){
var show = function() {
var text = "";
var vh = $ionicHistory.viewHistory();
if(vh !== null) {
text += "VIEWS=" + JSON.stringify(vh.views);
text += "BACK=" + JSON.stringify(vh.backView);
}
return text;
}
return {
show : show,
}
}])
.controller("firstController", [
'$scope',
'$location',
function($scope, $location){
$scope.next = function() {
$location.path("/second");
};
}])
.controller("secondController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/third");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("thirdController", [
'$scope',
'$location',
'$ionicHistory',
'historyFactory',
function($scope, $location, $ionicHistory, historyFactory){
$scope.next = function() {
$location.path("/fourth");
};
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}])
.controller("fourthController", [
'$scope',
'$ionicHistory',
'historyFactory',
function($scope, $ionicHistory, historyFactory){
$scope.prev = function() {
$ionicHistory.goBack();
};
var init = function() {
$scope.data = historyFactory.show();
};
init();
}]);
This is how the view with tabs looks like:
<ion-view>
<ion-tabs class="tabs-balanced">
<ion-tab title="Tab One">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 1</h1>
</ion-header-bar>
<ion-content class="has-header">
<h3>History</h3>
<p>{{data}}</p>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
On the second page, the view history looks like this:
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":null,"stateId":"second","stateName":"second","url":"/second"}}
BACK=
{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"}
On the third page, one more view is added:
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
But on the fourth page, with the ion-tabs the view history remains the same.
VIEWS=
{"002":{"viewId":"002","index":0,"historyId":"root","backViewId":null,"forwardViewId":"003","stateId":"first","stateName":"first","url":"/"},
"003":{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"},
"004":{"viewId":"004","index":2,"historyId":"root","backViewId":"003","forwardViewId":null,"stateId":"third","stateName":"third","url":"/third"}}
BACK=
{"viewId":"003","index":1,"historyId":"root","backViewId":"002","forwardViewId":"004","stateId":"second","stateName":"second","url":"/second"}
Is this a bug with $ionicHistory when using ion-tabs or am I doing something wrong in the tabs view?
Try to wrap ion-tabs to avoid this problem
<ion-view>
<div>
<ion-tabs class="tabs-balanced">
<ion-tab title="Tab One">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 1</h1>
</ion-header-bar>
<ion-content class="has-header">
<h3>History</h3>
<p>{{data}}</p>
</ion-content>
</ion-tab>
<ion-tab title="Tab Two">
<ion-header-bar class="bar-balanced">
<div class="buttons">
<button class="button button-icon ion-ios-arrow-back" ng-click="prev()"></button>
</div>
<h1 class="title">Page 4 - Tab 2</h1>
</ion-header-bar>
<ion-content class="has-header">
<p>Content of tab 2.</p>
</ion-content>
</ion-tab>
</ion-tabs>
</div>
</ion-view>
http://plnkr.co/edit/pVDu9e7QZHzMt3A154i7?p=preview
The ion-tabs introduce parallel stacks to maintain history of each tab and so the $ionicHistory.goBack changes the history state in the current stack. You can solve your issue by removing the tab or adding tabs to all views. There is an excellent explanation for this in this SO post: https://stackoverflow.com/a/31385026/3878940
What worked for me was adding an empty ion-view above ion-tabs at the very top of the page.
I guess this 'tricked' the $ionicHistory into believing that my page was rendering a regular view rather than a tabbed view.
Related
my js:
var app = angular.module("dashboardApp", ["ngMaterial", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngAria", "ui.router", "datatables", "gridshore.c3js.chart"]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/systems');
$stateProvider
.state('systems',{
url:"/systems",
templateUrl: 'pages/systems.html'
})
.state('summary', {
url:"/summary",
controller:"maxeCtrl",
templateUrl: 'pages/summary.html'
});
});
app.run(function($rootScope, $location, $anchorScroll, $stateParams, $timeout) {
$rootScope.$on('$stateChangeSuccess', function(newRoute, oldRoute) {
$timeout(function() {
$location.hash($stateParams.scrollTo);
$anchorScroll();
}, 100);
});
});
Here i am trying to inject $anchorScroll and it will scroll you to any element with the id found in $location.hash() ----> which in case here is incident.
page1:
<div class="system_row2">
<div class="col-sm-3">Today Incident's:</div>
<div class="col-sm-9 ">
<div class="col-sm-12">
<a ui-sref="summary({scrollTo:'incident'})">
</a>
</div>
Page2: i am using accordion here and providing id="incident" which will scroll to this element.
<div id="abc">
this is div 1
</div>
<div uib-accordion-group id="incident" class="panel-default">
<uib-accordion-heading>
<div class="accordion_heading">Incidents</div>
</uib-accordion-heading>
<uib-accordion-body> </uib-accordion-body>
<table>
</table>
</div>
Mycontroller:
app.controller("maxeCtrl", ["$scope", "MAXeService", "DTOptionsBuilder", "$timeout", function($scope, MAXeService, DTOptionsBuilder, $timeout) {
console.log("Angular: MAXeCtrl in action")
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isSecondOpen: true
};
I want div id="incident" to be displayed when user clicks on "summary({scrollTo:'incident'})" and the other div with id="abc" should hide.
Appreciate any kind of help in advance.
I think you are looking for named views. Check here
https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Sample from above link
<!-- index.html -->
<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body>
Routing
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
})
for ui-router >=1.0 check here https://ui-router.github.io/guide/views#multiple-named-uiviews
My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...
If anybody could tell me what's wrong, I would really appreciate it.
tab-feed.html
<ion-view view-title="Feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!-- <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
tabs.html
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Feed Tab -->
<!-- <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
<ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.event-detail', {
url: '/feed/:eventId',
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
...
$urlRouterProvider.otherwise('/tab');
});
controllers.js
.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
$scope.info = {};
$scope.events = getLocalStorage.getEvents();
$scope.clearSelected = function() {
$scope.events = $scope.events.filter(function(item) {
return !item.selected;
});
getLocalStorage.updateEvents($scope.events);
};
$scope.addEvent = function() {
$scope.events.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateEvents($scope.events);
$scope.info = {};
};
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.name;
$scope.event = getLocalStorage.getEvent(eventId);
})
Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in tab-feed.html.
app.js
.state('tabs.event-detail', {
url: '/feed/:eventId', // <-- The parameter is defined as eventId
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
controller.js
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.eventId; // <-- here you request the parameter
$scope.event = getLocalStorage.getEvent(eventId);
})
And last you also need to correct the href-attribute in
tab-feed.html
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">
Of course, you also can use the name as parameter, but you have to be consistent.
I have created following main screen. On clicking each link it has to open corresponding view.
So far I have written:
index.html
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
</ion-content>
</ion-pane>
</body>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('PaymentListCtrl', function ($scope) {
$scope.productItems = [
{
name: 'Product 1',
price: '$50.00'
},
{
name: 'Product 2',
price: '$45.00'
}
]
})
Please note I am new in both Ionic and Angular. If you can provide a simple to use method then would be greatful
try to define state and redirect your view
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Checkout</h1>
</ion-header-bar>
<ion-content>
<div class="row blue-bg">
<div class="col col-50 white">
<ul class="list-inline">
<li>Catalog</li>
<li>Inventory</li>
<li>Dashboard</li>
<li>Transaction</li>
</ul>
</div>
<div class="col col-40 white">Logo</div>
<div class="col col-10 .col-offset-25 white">Right</div>
</div>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
Define your view in another page
view1.html
<ion-view view-title="Admin">
<ion-content class="padding text-center">
//define your content here
</ion-content>
</ion-view>
in app.js define state like this
.state('main', {
url: '/index',
abstract: true,
templateUrl: '{{yourpath}}/index.html'
})
.state('main.view', {
url: '/view',
templateUrl: '{{yourpath}}/admin.html',
})
may be this can help you
I just made a simple and clear demo.
Index.html:
<body ng-controller="MainCtrl">
<!-- Make a fancy menu here -->
Welcome
Exit
<!-- The templates will be inserted here -->
<ng-view></ng-view>
</body
App.js:
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'welcome.tmpl.html',
controller: 'welcomeCtrl'
}).
when('/goodbye', {
templateUrl: 'goodbye.tmpl.html',
controller: 'goodbyeCtrl'
});
}]);
app.controller('MainCtrl', function($scope) {
//Code goes here
});
app.controller('welcomeCtrl', function($scope) {
$scope.welcome = "Welcome to the 'Welcome' page";
});
app.controller('goodbyeCtrl', function($scope) {
$scope.goodbye = "Goodbye? I guess?";
});
And ofcourse we need the template to insert and those are just 2 simple .html files which not containt <html>, <head> and <body>.
Hope you got enough information, if not jus let me know.
You can get some help from this JSFiddle
Actually copied from this JSFiddle
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope, $ionicModal) {
////.....
$scope.triggerViewUpdate = function() {
// JSFiddle didn't seem to like ng-template script tags...
$ionicModal.fromTemplate('<ion-modal-view>...Content...</ion-modal-view>').show();
};
})
HTML:
<button class="button button-positive button-block button-outline" ng-click="triggerViewUpdate()">Trigger View update</button>
would anyone be able to help me on this issue I am having?
I have a NavCtrl for manage my active tag, I was able to change the active tab when click on the menu item, however when I click on the link in the body views, it take me to the page I want to, but the active tag is not change.
//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
$scope.LogOut = auth.logOut;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.tab = $rootScope.navTav;
$scope.toTop = function(){
$window.scrollTo(0, 0);
};
}]);
I try to use the $rootScope to set the navTab, but it's still not working
//setting root scope
sp.run(function($rootScope) {
$rootScope.navTav = 1;
})
ui-Router
.state('qaanswer', {
url: '/qa/{quesId}',
views: {
view50': {
templateUrl: './qa/qaanswer.html',
controller: 'QAAnswerCtrl'
},
'view60': {
templateUrl: './shareviews/activityupdates.html',
controller: 'HomeCtrl'
}
},
onEnter:['$rootScope',function($rootScope){
$rootScope.navTav = 5;
}]
Thank you so much for the help
Update HTML :
<body ng-controller="NavCtrl">
<!-- Desktop Menu -->
<div>
<div>
<ul>
<a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
<li>Home</li>
</a>
<a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
<li>QA</li>
</a>
</ul>
</div>
</div>
<div>
<div>
<div class="row">
<div ui-view="view50"></div>
<div ui-view="view60"></div>
</div>
</div>
</div>
</body>
Working plunker
You can simplify your implementation and have no issues. Simply use the $rootScope variable directly in your template along side ng-class like so:
<body ng-controller="NavCtrl">
<a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
<a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
<div ui-view></div>
</body>
Then update $rootScope in your controllers.
.controller('NavCtrl', function($scope, $rootScope) {});
.controller('FirstCtrl', function($scope, $rootScope) {
$rootScope.navTab = 0;
});
.controller('SecondCtrl', function($scope, $rootScope) {
$rootScope.navTab = 1;
});
Your states get to stay relatively simple:
.state('first', {
url: '/first',
templateUrl: 'first.html',
controller: 'FirstCtrl'
})
.state('second', {
url: '/second',
templateUrl: 'second.html',
controller: 'SecondCtrl'
})
plunker
Ideally you would make a directive for such a task, and avoid using $rootScope. A simple way to do this is to broadcast a message whenever you land on a new page, then listen on that event in your tab directive and flip the correct tab as active.
I'm creating a cordova app with ionic framework, i created a blank app with CLI, in my index.html i have a slide box, in which i have a button in the last slide.
I have registered a click event in that button, in click in the button i would like to navigate to templates/projects.html.
I hope my problem is clear.
Thanks
index.html file
<body ng-app="starter" class="platform-android platform-cordova platform-webview">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">BabyLapse</h1>
</ion-header-bar>
<ion-content>
<ion-slide-box style="height:100%" on-slide-changed="slideHasChanged($index)">
<ion-slide >
<div style="height:100%" class="box blue"><h1>BLUE</h1>
<img src="img/tutorial_img1.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1>
<img src="img/tutorial_img2.jpg">
</div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1>
<img src="img/tutorial_img3.jpg" class="image">
</div>
</ion-slide>
<ion-slide>
<div class="box blue"><h1>BLUE</h1>
<img src="img/tutorial_img4.jpg">
</div>
</ion-slide>
<ion-slide ng-controller="FirstSlideCtrl">
<div class="box yellow"><h1>YELLOW</h1>
<!-- <img src="img/tutorial_img5.jpg" >-->
<button style="z-index:1000;height:100px;width:100px" ng-click="go('app.projects');">Créer Projet</button>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-pane>
app.js file
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "index.html",
controller: 'StarterCtrl'
})
.state('app.projects', {
url: "/projects",
views: {
'projects': {
templateUrl: "templates/projects.html",
controller: 'ProjectsCtrl'
}
}
});
//$urlRouterProvider.otherwise('/projects');
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
})
});
controllers.js
angular.module('starter.controllers', ['ui.router'])
.controller("StarterCtrl", function($scope) {
$scope.data = {
numViewableSlides: 0,
slideIndex: 0,
initialInstruction: true,
secondInstruction: false
};
$scope.slideHasChanged = function(index) {
$scope.data.slideIndex = index;
};
$scope.go = function(route) {
alert('1');
$state.go(route);
};
})
.controller("ProjectsCtrl", function($scope) {
$scope.playlists = [{
title: 'Reggae',
id: 1
}, {
title: 'Chill',
id: 2
}, {
title: 'Dubstep',
id: 3
}, {
title: 'Indie',
id: 4
}, {
title: 'Rap',
id: 5
}, {
title: 'Cowbell',
id: 6
}];
})
.controller("FirstSlideCtrl", function($scope, $state) {
$scope.go = function(route) {
alert(route);
$state.go('app.projects');
};
});
I cannot follow your code so I'll try to recreate.
In Ionic/Cordova you should have an index.html which would be your entry for the application.
This is the place where you bind your HTML with the angular app and where your reference your scripts.
It should have a body with the main nav-view <ion-nav-view>:
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
My ng-app is called app but you can easily replace it with starter.
Then you would have separate "pages" for different views. I can imagine in your situation you would have one view for the slider and the second one for the project's creation.
Each view must be defined in a <ion-view> where you're going to a have a content <ion-content>.
I imagine you're going to need to states:
.state('main', {
url: '/main',
templateUrl: 'main.html',
controller: 'mainController',
})
.state('projects', {
url: '/projects',
templateUrl: 'projects.html',
controller: 'projectsController',
});
if you want to go to projects from the slider page you simply have to:
$state.go('projects')
This is the end result in a plunker.
As you can see I got read of the abstract view cause it seems to me that you don't really need it as you're not using any base template: side-menu or tabs.
You can always add it but your abstract should never refer the index.html file.