My current project is developed using Angular and I'm deploying it to the Phonegap Build service for iOS and Android distributions. Initially, I used Angular's routing service but had to switch to Angular UI-Router due to nesting multiple views requirements. The routing system works well when tested locally in a web browser or using the Ripple Emulator.
The structure of index.html is as follows:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/photo-slider.css" />
<link rel="stylesheet" type="text/css" href="css/spin.css" />
<title>App Title</title>
... (The rest of the code remains the same)
<p></p>
<p>The routing configuration code is as follows:</p>
<pre><code>var myApp = angular.module('myApp',[
'ui.router',
'ngTouch',
'ui.bootstrap',
'Controllers',
'Services'
]);
myApp.config(function($stateProvider,$urlRouterProvider,$compileProvider){
// Routing configurations...
});
However, upon using the Phonegap Build service, the generated iOS and Android distributions are displaying blank screens. The headers and contents turn up empty even though the markup seems correct. Investigating with Phonegap Build's debugger revealed the issue with the div elements for header and content.
Please refer to the image below for more clarity:
I've explored potential solutions on the UI-Router's GitHub repository and found this. However, it appears to address ui-sref elements rather than ui-view elements. Has anyone encountered a similar problem? Restructuring the code to use traditional Angular conditional logic for rendering different headers seems cumbersome and may impact readability and maintainability. Thank you!