I am building Hybrid mobile app (Cordova + Ionic + Angularjs + ui-router) with three pages:
-menuContent
-InProgTickets.html (landing page)
-details
-CompletedTickets.html
-detailsCompleted
-Setting
Notice that I am using the default side menu templates provided by Ionic. Here is the complete routing code:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.setting', {
url: "/setting",
views: {
'menuContent': {
templateUrl: "templates/setting.html",
controller: "SettingsCtlr"
}
}
})
.state('app.InProgTickets', {
url: "/InProgTickets",
views: {
'menuContent': {
templateUrl: "templates/InProgTickets.html",
controller: "InProgTicketsCtrl"
}
}
})
.state('app.details', {
url: "/details/:id",
views: {
'menuContent': {
templateUrl: "templates/details.html",
controller: "InProgTicketsCtrl"
}
}
})
.state('app.CompletedTickets', {
url: "/CompletedTickets",
views: {
'menuContent': {
templateUrl: "templates/CompletedTickets.html",
controller: "CompletedCtrl"
}
}
})
.state('app.detailsCompleted', {
url: "/detailsCompleted/:id",
views: {
'menuContent': {
templateUrl: "templates/detailsCompleted.html",
controller: "CompletedCtrl"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/InProgTickets');})
My issue is that the app works just as expected in the ripple chrome simulator but it shows a white blank screen on android mobile device. I can’t find any issue with my ui-routing code and I have been playing around with few scenarios without any success, but I saw a related issue here, here and here.