I currently have a project built with Angular that I'm deploying to the Phonegap Build service to create iOS and Android distributions. Originally, I was using Angular's built in routing service. However, the need to nest multiple views facilitated my adoption of the Angular UI-Router. I've built a simple routing system that works when testing locally via a web browser and using Ripple Emulator.
The 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>
</head>
<body>
<div class="loader" id='ajax-loader'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- View Container for the Header -->
<div ui-view="header"></div>
<!-- View Container for the Content -->
<div ui-view="content"></div>
<!-- Angular Libraries -->
<script src="lib/angular.js"></script>
<script src="lib/angular-resource.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-touch.js"></script>
<!-- UI Router -->
<script src="lib/angular-ui-router.js"></script>
<!-- Bootstrap Angular Directives -->
<script src='js/ui-bootstrap-tpls-0.10.0.js'></script>
<!-- Peristence js -->
<script src="lib/persistence.js"></script>
<script src="lib/persistence.store.sql.js"></script>
<script src="lib/persistence.store.websql.js"></script>
<script src="lib/persistence.store.memory.js"></script>
<!-- imgcache & jquery -->
<script src='lib/jquery-2.1.0.min.js'></script>
<script src='lib/imgcache.js'></script>
<!-- Local Scripts -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<!-- Phonegap Dependencies -->
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
And the code for the routing
var myApp = angular.module('myApp',[
'ui.router',
'ngTouch',
'ui.bootstrap',
'Controllers',
'Services'
]);
myApp.config(function($stateProvider,$urlRouterProvider,$compileProvider){
//$compileProvider.aHrefSanitizationWhitelist(/^s*(https?|ftp|mailto|file|tel):/);
$urlRouterProvider.otherwise('/login');
$stateProvider.
state('login',{
url:'/login',
views:{
'header@':{
templateUrl:'/views/login.header.html'
},
'content@':{
templateUrl:'/views/login.html',
controller: 'LoginController'
}
}
}).
state('tours',{
url:'/tours',
views:{
'header':{
templateUrl:'/views/tours.header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/tours.html',
controller: 'ToursController'
}
}
}).
state('tour',{
url:'/tours/:tourId',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl: '/views/tour.html',
controller: 'TourController'
}
}
}).
state('buildingTour',{
url:'/buildingTour/:tourId',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'views/building_tour.html',
controller:'BuildingTourController'
}
}
}).
state('buildingTourNotes',{
url:'/buildingTour/:tourId/notes',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl: 'views/notes.html',
controller: 'NotesController'
}
}
}).
state('buildingTourPhotos',{
url:'/buildingTour/:tourId/photos',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/photos.html',
controller:'PhotosController'
}
}
}).
state('buildingTourDocuments',{
url:'/buildingTour/:tourId/documents',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/documents.html',
controller:'DocumentsController'
}
}
}).
state('buildingTourFloorplans',{
url:'/buildingTour/:tourId/floorplans',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/floorplans.html',
controller:'FloorplansController'
}
}
}).
state('buildingTourRatings',{
url:'/buildingTour/:tourId/ratings',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/ratings.html',
controller:'RatingsController'
}
}
});
});
However, using the Phonegap Build service produces iOS and Android distributions that are completely blank. Inspecting the html markup with Phonegap Build's debugger shows that the div's for the header and the content end up blank.
See the image below:
I've also looked into issues on the github repo for UI-Router and come up with this. Though that seems like it only pertains to ui-sref elements as opposed to ui-view elements. Has anyone else run into this issue or one similar? Refactoring using traditional angular conditional logic to render different headers will be a pain seems to make the code less readable/sustainable. Thanks!
See Question&Answers more detail:os
