Ionic template does not work on mobile

问题

I have been making an app in AngularJS with Angular-ui-router based on Ionic Framework. It works perfect on the desktop in every web browser, but it does not show anything on my mobile (after build I run it on 2 devices). The problem is that it doesn't load template inside ui-view.

I have got an index.html file, the body section is below (in head section there is everything included):

<body ng-app="starter">
    <div ui-view=""></div>
</body>

And the part of app.js - run and config.

angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])
.run(function($ionicPlatform, $rootScope, $location) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });

    history = [];

    $rootScope.$on('$routeChangeSuccess', function() {
        history.push($location.$$path);
    });

    $rootScope.back = function () {
        history.back();
    };
})
.config(function($stateProvider, $urlRouterProvider) {
    "use strict";
    $stateProvider
    .state('connectionCheck', {
         url: '/',
         controller: ['$scope', '$location', '$http',
            function($scope, $location, $http) {
                $http.get('http://pingurl.com')
                    .success(function(data) {
                        jdata = data;
                        if (data.status === "success") {
                            $location.path('/login');
                        }else{
                            $location.path('/error');
                        }
                    })
                    .error(function() {
                        $location.path('/error');
                    });

                $scope.retry = function() {
                    $location.path('/');
                };
            }
        ]
    })
    .state('login', {
        url: '/login',
        templateUrl: 'login.html'
    })
    .state('main', {
        url: '/main',
        templateUrl: 'main.html',
        controller: ['$scope', '$location', '$localStorage',
            function($scope, $location, $localStorage) {
                $scope.username = $localStorage.username;
                $scope.token = $localStorage.token;
                $scope.email = $localStorage.email;
                $scope.goToAlerts = function() {
                    $location.path('/alerts');
                };
                $scope.goToSettings = function() {
                    $location.path('/settings');
                };
                $scope.goToLocation = function() {
                    $location.path('/location');
                };
                $scope.goToSymptoms = function() {
                    $location.path('/symptoms');
                };
                $scope.getClass = function(path) {
                    if ($location.path().substr(0, path.length) == path) {
                      return "active"
                    } else {
                      return ""
                    }
                };
            }
        ]
    })
    .state('error', {
        url: '/error',
        templateUrl: 'error.html'
    })
    .state('register', {
        url: '/register',
        templateUrl: 'register.html',
    })
    .state('push', {
        url: '/push',
        templateUrl: 'push.html',
    })
    .state('alerts', {
        url: '/alerts',
        templateUrl: 'alerts.html'
    })
    .state('newSymptom', {
        url: '/newSymptom',
        templateUrl: 'newsymptom.html'
    })
    .state('symptoms', {
        url: '/symptoms',
        templateUrl: 'symptoms.html'
    })
    .state('newAlert', {
        url: '/newalert',
        templateUrl: 'newalert.html'
    })
    .state('settings', {
        url: '/settings',
        templateUrl: 'settings.html'
    })
    .state('location', {
        url: '/location',
        templateUrl: 'location.html'
    });

    $urlRouterProvider.otherwise('/');
}).
//some controllers goes here

What I have already checked/tried to do?

I put example content to index.html - it worked.
I tried chanage the name of ui-view and add them in templateURL values of each state.
I changed the .html files to exlude error in them, but it did not helped.

Can anyone more experienced with Ionic/Angular give me a hint what is wrong here?

回答1:

I seem to notice that it's often due to the modules you're loading in. So It's likely in this line.

angular.module('starter', ['ionic', 'ngStorage', 'ngAnimate', 'naif.base64', 'ui.router'])

Try checking each module by making sure:

You added it to your index.html
it's being called correctly
it's up to date You can figure out by removing each, one at a time and then seeing if it works on the device.

Also know that AngularJS out of the box uses AngularUI Router and this uses a thing called routing for views. The UI-Router uses a thing called states that is the most used but the unofficial way for AngularJS and Ionic uses their own view state system that is basically the same thing as the UI-Router just with the Ionic namespace. So that is something you need to look up or you may find yourself running into a lot of walls during you builds because you are calling ui.router and I bet it's what's confusing your app, so remove it.

来源：https://stackoverflow.com/questions/32074979/ionic-template-does-not-work-on-mobile

标签

javascript

angularjs

ionic-framework

ionic