10

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:

Empty Divs

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!

3
  • Hello, How did you set the bootstrap of Cordova? Maybe You have to check it!, It causes conflict with Angular library because is not deviceready. Also Ripple emulator is obselete! try to run the app on a device and check the LogCat. I'm going to put a solution that I saw in a in a post. Feb 18, 2014 at 17:16
  • Im having trouble understanding what you're getting at here. The deviceready call gets handled correctly as I was using this to store images locally via the Phonegap FileSystem API. The migration from angular's standard router to ui-router is what caused this. Trying to debug through LogCat is a good point though, I'll look into that.
    – msandt3
    Feb 18, 2014 at 21:50
  • Sorry, I was thinking your problem was a conflict with the device ready, because I had same problem and AngularJs throw exceptions, so I solved handling it in a service.I don't know if is a problem of Build Service. Try to compile locally and debug in a device Feb 18, 2014 at 22:29

2 Answers 2

20

Quick awnser: The problem is the initial slash in your template urls. Remove all initial slashes and you should be good to go.

Example: the excerpt below from your code

templateUrl:'/views/login.header.html'

Should be changed to:

templateUrl:'views/login.header.html'

Explanation: The initial slash makes the path relative to the root. When you are testing on the browser the index.html is probably on http://localhost/index.html, so the request to /views/login.header.html resolves to http://localhost/views/login.headers.html which is ok.

In the other hand, when you are testing on the app generated by phonegap, the index.html is probably on file:///android_asset/www/index.html, so the request resolves to file:///views/login.headers.html wich doesn't exist. If you remove the initial slash from the url the path becomes relative to where you are and the request will resolve to file:///android_asset/www/views/login.headers.html and it should work.

1
  • Thanks Eduardo, I had figured this out earlier but completely forgot to update my thread. This is indeed the correct answer!
    – msandt3
    Feb 28, 2014 at 16:03
5

I know the answer was accepted but I want to add another possible cause of the problem: Make sure you are not enabling html5Mode, and not playing with the Prefix on your config(). This was the issue for me.

2
  • This answer needs to be more out there. I'm not using phonegap, just the cordova cli. The project has angular 1.5.2 with ui-router and other stuff. This saved me. Mar 28, 2016 at 15:58
  • Saved me as well. Sep 21, 2017 at 17:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.