Embarking on my first mobile app adventure with Mobile Angular and PhoneGap.
The current setback involves the template files not loading in the ng-view of the PhoneGap test app on the phone.
I'm aware this issue has been raised before:
Even after attempting to incorporate aHrefSanitizationWhitelist(), the problem persists.
Edit:
This is how the file appears at present:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- Wide open CSP declaration. Adjust for production. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="./css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="./css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="./css/mobile-angular-ui-desktop.min.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<title>Hello World</title>
</head>
<body ng-app="myApp">
<div class="app">
<!-- Top Navbar -->
<div class="navbar navbar-app navbar-absolute-top">
<div class="btn-group justified">
<a href="#/page1" class="btn btn-navbar">Page 1</a>
</div>
</div>
<!-- Bottom Navbar -->
<div class="navbar navbar-app navbar-absolute-bottom"></div>
<!-- App Body -->
<div class="app-body">
<div class="app-content">
<ng-view></ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>
</body>
<!-- Libs -->
<script src="cordova.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="/js/mobile-angular-ui.min.js"></script>
<script src="/js/mobile-angular-ui.gestures.min.js"></script>
<!-- App -->
<script>
var app = {
initialize: function()
{
this.bindEvents();
},
bindEvents: function()
{
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function()
{
angular.element(document).ready(function()
{
angular.bootstrap(document, ['myApp']);
});
},
};
angular.module('myApp', ['ngRoute']).config(function($routeProvider)
{
$routeProvider
.when('/', {
templateUrl: './views/page1.html'
})
.when('/page1', {
templateUrl: './views/page1.html'
});
});
app.initialize();
</script>
</html>