So in my index.html file, I have the following code, essentially linking two external html pages.
<!--First Template-->
<script id="views/profileView.html" type="text/ng-template">
<div ng-include="'./views/profileView.html'"></div>
</script>
<!--Second Template-->
<script id="views/callView.html" type="text/ng-template">
<div ng-include="'./views/callView.html'"></div>
</script>
The first template to load is profileView, which loads fine. In that template I have a button, on click will load the state of the second template. The second page doesn't load completely. Its a partial transition. I noticed this problem is because I was trying to load a state of another external template. If I was to not exclude the content into an external template and just write it out in the index file itself, I don't get this problem. Have anyone experienced such issues when navigating from one external page to another? Are there any solutions?
if i were you i would use the angular $stateProvider, so you would have something like this
var app = angular.module('myapp', ['ionic']);
app.config('$stateProvider', function($stateProvder){
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
}).state('pageone', {
url: '/pageone',
templateUrl: 'templates/pageone.html'
});
});
Then in your index.html you just have an ion nav view like so:
<ion-nav-view animation="no-animation"></ion-nav-view>
then to navigate states in your controller you just include $state like you would $scope call this for example: $state.go('home')
you can read more about it and see more examples here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/