Using ionic, I have a simple page setup where the controller loads the id="" like so:
<script id="home.html" type="text/ng-template">
<ion-view title="Escapes">
<ion-content padding="true">
<div class="fs-image"><img ng-src="images/128.png"></div>
<div class="card">
<div id="close"><div class="text-center"><i class="icon ion-looping"></i> Finding Your Location...</div></div>
</div>
</div>
</ion-content>
</ion-view>
</script>
<script id="map.html" type="text/ng-template">
<ion-view title="Map">
<ion-content>
<a class="item item-avatar item-text-wrap" href="#">
<img src="images/legend-marker.png">
<h2>Your Location</h2>
<p>Best guess from device.</p>
</a>
<a class="item item-avatar item-text-wrap" href="#">
<img src="images/legend-polygon.png">
<h2>Overlays</h2>
</a>
<div class="item item-body">
<div id="map" style="width:100%;height:60%"></div>
</div>
</ion-content>
</ion-view>
</script>
If I use this setup, I cannot navigate to a website outside of my app and return to the app with the backbutton on Android due to the Uncaught ReferenceError: cordova is not defined
However, if I run this without the "pages within a single .html file" idea shown above, i am able to use the back button and get back to my app. I think it is because the controller is not loading the cordova.js for each 'page' even though it is included in the 'head' section of my document.
How do you make sure cordova is loaded for each template? Is this something Angular is doing?