ui router shows states on browser and not on device when run with cordova. How do I correct it?

Question

I'm just starting with angularjs so I'm not an expert with ui router as well. I'm developing an app using cordova and ratchet. So right now here's my code

index.html

   <header class="bar bar-nav">
        <h1 class="title">Title</h1>
    </header>

   <div ui-view></div>

app.js

var myApp = angular.module('myApp', ['ngCordova','ui.router','myApp.controllers','myApp.services']);

myApp.config(function($stateProvider,$urlRouterProvider) {

$urlRouterProvider.otherwise('/tab/home');

$stateProvider

.state('tab',{
    url:'/tab',
    abstract:true,
    templateUrl:'/template/tab.html'
})

.state('tab.home', {
    url: '/home',
    templateUrl: '/template/tab-home.html',
    controller:'HomeCtrl',
    controllerAs:'home'
})

.state('tab.history',{
    url: '/history',
    templateUrl:'template/tab-history.html'

})
.state('tab.sponsors',{
    url: '/sponsors',
    templateUrl:'template/tab-sponsors.html'

})
.state('tab.settings',{
    url: '/settings',

    templateUrl:'template/tab-settings.html'

})   
});

The Code seems to be working fine on the browser; but it does not show any views when I use cordova run android. Please tell me what is wrong with the code.

Answer 1

I am not sure but i guess in your index.html you are calling in script files like below :-

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>

..I also had the same issue(This was the problem that i faced).You need to ensure any external paths are absolute

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-cookies.min.js"></script>