$state.go don't work in ionic framework - javascript

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.

Related

How to show one div on click and hide others on click using ui-route?

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

Ionic routing with tabs and side menu

I want to build an app that uses both tab interface and side menu for going to states.
Now what I want is that side menu linked views also have original tabs under their selected tabs, once on those new views.
router.js
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "js/base/menu.html"
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'js/base/tabs.html',
controller: 'TabsController as tabsController'
}
}
})
.state('app.tabs.old', {
url: '/old',
views: {
'old': {
templateUrl: 'js/old/old.html',
}
}
})
.state('app.tabs.new', {
url: '/new',
views: {
'new': {
templateUrl: 'js/new/new.html',
}
}
})
.state('app.tabs.profile', {
url: '/profile',
views: {
'profile': {
templateUrl: 'js/profile/profile.html'
}
}
});
$urlRouterProvider.otherwise('/app/tabs');}
Here old and new are in tabs, while profile should be accessed from side menu, and also have old and new tabs on bottom on its view.
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="header-style">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-content>
<ion-list>
<!--THE MOST IMPORTANT PART-->
<ion-item nav-clear class="item item-avatar" href="#/profile">
<img src="../images/img/avatar/header-avatar-2.png">
<h2 class="item-text-center">{{user}}'s Profile</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Now the most important is in ion-item, I tried everything, from
href
onclick
ng-click to go to state
ui-sref
and obviously did not do it right.
Any suggestions how to connect the profile view to the app?

Ionic: How to Open a view on click?

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>

ionic routing not working like what I expected

The structure of my app:
The main app.js at root:
angular.module('app', ['ionic',
'app.intro',
'app.main',
'app.services'
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
......
});
})
.config(function($stateProvider, $urlRouterProvider) {
});
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
alert('app.intro');
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
});
$urlRouterProvider.otherwise('/');
});
app/intro/controller.js
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
It works fine. The intro page being shown correctly until I add the main module which is a sidemenu.
app/main/main.js:
angular.module('app.main',['app.main.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/menu.html',
controller: 'MainCtrl'
})
.state('main.news', {
url: '/news',
views: {
'menuContent': {
templateUrl: 'app/main/news.html'
}
}
})
.state('main.share', {
url: '/share',
views: {
'menuContent': {
templateUrl: 'app/main/share.html'
}
}
});
$urlRouterProvider.otherwise('/main/news');
});
The intro page will not be shown anymore. Instead the news page will always be shown when app starts. I'm very new to ionic so that I'm not very familiar with the url routing. Can anybody tell what I did wrong? Thanks.
Edit:
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/main/news">News</ion-item>
</ion-list>
<ion-list>
<ion-item menu-close ng-click="logout()">Logout</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

I believe the issue is the "." in your route names, this bit me too but i believe this refers to a substate and wont do a full route transition. If you remove the dots it should work properly.
Also, $urlRouterProvider.otherwise('/main/news'); will default pages to news

$ionicHistory does not work with ion-tabs

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.

Categories