Я новичок в Angular, и я пытаюсь сделать простое ионное приложение.ion-nav-view не рендеринг на Android
Я использую приложение Ionic View (http://view.ionic.io/) для запуска приложения на своем телефоне Samsung Galaxy S3 под управлением Android 4.4.4.
Мое приложение довольно простое. Он состоит из одного экрана со списком категорий-кнопок, и нажатие кнопки категории открывает список подпунктов, относящихся к соответствующей категории.
В моем index.html содержится только один элемент с ионом-навигацией, который должен загрузить html из файла шаблона html, soundCategories.tmpl.html. Однако, когда приложение запускается на моем устройстве Samsung Galaxy S3, ион-навигационный просмотр не отображается, и вместо этого я получаю свой резервный текст (ион-навигационное представление не поддерживается).
Мой index.html выглядит следующим образом:
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/css/ionic.min.css">
<link rel="stylesheet" href="assets/css/drexler.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body>
<ion-nav-view name="soundCategories">ion-nav-view is not supported</ion-nav-view>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic-angular.min.js" charset="utf-8"></script>
<script src="app/eggly-app.js"></script>
<script src="app/soundCategories/soundCategories.js"></script>
<script src="app/soundCategories/soundbites/soundbites.js"></script>
<script src="app/common/models/soundBites-model.js"></script>
<script src="app/common/models/soundCategories-model.js"></script>
</body>
</html>
Вот eggly-app.js, где определен мой главный модуль:
angular.module('Eggly', [
'ionic',
'soundCategories'
])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
//abstract state serves as a PLACEHOLDER or NAMESPACE for application states
.state('eggly', {
url: '',
abstract: true
})
;
$urlRouterProvider.otherwise('/');
})
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs).
// The reason we default this to hidden is that native apps don't usually show an accessory bar, at
// least on iOS. It's a dead giveaway that an app is using a Web View. However, it's sometimes
// useful especially with forms, though we would prefer giving the user a little more room
// to interact with the app.
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// Set the statusbar to use the default style, tweak this to
// remove the status bar on iOS or change it to use white instead of dark colors.
StatusBar.styleDefault();
}
});
});
;
А вот soundCategories.js, где контроллер ссылается в ионно-нав -view определяется:
angular.module('soundCategories', [
'eggly.models.soundCategories'
])
.config(function ($stateProvider) {
$stateProvider
.state('eggly.soundCategories', {
url: '/',
views: {
//target the ui-view named 'soundCategories' in ROOT state (eggly)
'[email protected]': {
controller: 'SoundCategoriesListCtrl as soundCategoriesListCtrl',
templateUrl: 'app/soundCategories/soundCategories.tmpl.html'
},
//target the ui-view named 'soundbites' in ROOT state (eggly)
//to show all soundbites for all soundCategories
'[email protected]': {
controller: 'SoundbitesListCtrl as soundbitesListCtrl',
templateUrl: 'app/soundCategories/soundbites/soundbites.tmpl.html'
}
}
})
;
})
.controller('SoundCategoriesListCtrl', function SoundCategoriesListCtrl($scope, SoundCategoriesModel) {
(...)
});
;
Когда я запускаю приложение в браузере или эмуляторе, на экране отображается содержимое моего шаблона soundCategories, soundCategories.tmpl.html.
Однако, когда я запускаю приложение на своем устройстве S3, шаблон не отображается.
Я попытался загружая мое приложение через приложение View Ionic, а также построил его с
ionic build android
и переехал в результате .apk на устройство вручную. В обоих случаях изображение ion-nav-view не будет отображаться.
Могу ли я пропустить шаг или пропустить жизненно важный?
Пс. Некоторые люди могут заметить, что мое приложение основано на приложении Eggly от Egghead.io, и так оно и есть. Я использовал приложение Eggly в качестве базы.