Ионный шаблон не работает на мобильном телефоне

Я делаю приложение в AngularJS с помощью Angular-ui-router на основе Ionic Framework. Он отлично работает на рабочем столе в каждом веб-браузере, но он ничего не показывает на моем мобильном устройстве (после сборки я запускаю его на 2 устройства). Проблема в том, что он не загружает шаблон внутри ui-view.Ионный шаблон не работает на мобильном телефоне

Я получил файл index.html, секция тела ниже (в головной секции есть все включено):

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

И часть app.js - запуск и конфигурации.

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

Что я уже проверил/пытался сделать?

Я разместил пример содержимого index.html - он сработал.
Я попробовал chanage имя ui-view и добавил их в значения templateURL каждого состояния.
Я изменил .html-файлы, чтобы исключить ошибку в них, но это не помогло.

Может ли кто-нибудь более опытный с Ионным/Угловым дать мне подсказку, что здесь не так?

источник

2015-08-18 Sebastian Miecielica

Пожалуйста, обновите ваш код index.html, как: <тело нг-приложение = "стартер">< ионно-нав-зрения> –

вы можете сделать код ручку? что облегчит отладку и работу через –

@ Анилкумар, он не работал на мобильных устройствах. На рабочем столе он просто добавил анимацию между представлениями. –

Я, кажется, замечаю, что это часто происходит из-за модулей, в которые вы загружаете. Так что, вероятно, в этой строке.

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

Попробуйте проверить каждый модуль, убедившись:

Вы добавили его в index.html
его называют правильно
это до даты Вы можете выяснить, удалив каждый, по одному, а затем видя, работает ли он на устройстве.

Также известно, что AngularJS из коробки использует AngularUI Router, и это использует вещь, называемую маршрутизацией для просмотров. UI-Router использует вещь, называемую состояниями, которая является наиболее используемой, но неофициальный способ для AngularJS и Ionic использует свою собственную систему состояний представления, которая в основном такая же, как UI-Router, только с Ионным пространством имен. Так что вам нужно искать, или вы можете столкнуться с множеством стен во время сборки, потому что вы звоните ui.router, и я уверен, что это то, что вводит в заблуждение ваше приложение, поэтому удалите его.

источник

2015-09-14 06:16:51 garrettmac

Ионный шаблон не работает на мобильном телефоне

ответ

Смежные вопросы