В настоящее время у меня есть проект, построенный с помощью Angular, который я развертываю в службе Phonegap Build для создания дистрибутивов iOS и Android. Первоначально я использовал встроенную службу маршрутизации Angular. Однако необходимость встраивания нескольких видов облегчила мое принятие Angular UI-Router. Я создал простую систему маршрутизации, которая работает при локальном тестировании через веб-браузер и использует Ripple Emulator.Использование Углового UI-маршрутизатора с телефоном
index.html получается следующим образом:
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/photo-slider.css" />
<link rel="stylesheet" type="text/css" href="css/spin.css" />
<title>App Title</title>
</head>
<body>
<div class="loader" id='ajax-loader'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- View Container for the Header -->
<div ui-view="header"></div>
<!-- View Container for the Content -->
<div ui-view="content"></div>
<!-- Angular Libraries -->
<script src="lib/angular.js"></script>
<script src="lib/angular-resource.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/angular-touch.js"></script>
<!-- UI Router -->
<script src="lib/angular-ui-router.js"></script>
<!-- Bootstrap Angular Directives -->
<script src='js/ui-bootstrap-tpls-0.10.0.js'></script>
<!-- Peristence js -->
<script src="lib/persistence.js"></script>
<script src="lib/persistence.store.sql.js"></script>
<script src="lib/persistence.store.websql.js"></script>
<script src="lib/persistence.store.memory.js"></script>
<!-- imgcache & jquery -->
<script src='lib/jquery-2.1.0.min.js'></script>
<script src='lib/imgcache.js'></script>
<!-- Local Scripts -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<!-- Phonegap Dependencies -->
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
И код маршрутизации
var myApp = angular.module('myApp',[
'ui.router',
'ngTouch',
'ui.bootstrap',
'Controllers',
'Services'
]);
myApp.config(function($stateProvider,$urlRouterProvider,$compileProvider){
//$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$urlRouterProvider.otherwise('/login');
$stateProvider.
state('login',{
url:'/login',
views:{
'[email protected]':{
templateUrl:'/views/login.header.html'
},
'[email protected]':{
templateUrl:'/views/login.html',
controller: 'LoginController'
}
}
}).
state('tours',{
url:'/tours',
views:{
'header':{
templateUrl:'/views/tours.header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/tours.html',
controller: 'ToursController'
}
}
}).
state('tour',{
url:'/tours/:tourId',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl: '/views/tour.html',
controller: 'TourController'
}
}
}).
state('buildingTour',{
url:'/buildingTour/:tourId',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'views/building_tour.html',
controller:'BuildingTourController'
}
}
}).
state('buildingTourNotes',{
url:'/buildingTour/:tourId/notes',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl: 'views/notes.html',
controller: 'NotesController'
}
}
}).
state('buildingTourPhotos',{
url:'/buildingTour/:tourId/photos',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/photos.html',
controller:'PhotosController'
}
}
}).
state('buildingTourDocuments',{
url:'/buildingTour/:tourId/documents',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/documents.html',
controller:'DocumentsController'
}
}
}).
state('buildingTourFloorplans',{
url:'/buildingTour/:tourId/floorplans',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/floorplans.html',
controller:'FloorplansController'
}
}
}).
state('buildingTourRatings',{
url:'/buildingTour/:tourId/ratings',
views:{
'header':{
templateUrl:'/views/header.html',
controller: 'HeaderController'
},
'content':{
templateUrl:'/views/ratings.html',
controller:'RatingsController'
}
}
});
});
Однако с помощью PhoneGap Build Service производит IOS и Android распределения, которые полностью пустой. Проверка разметки html с помощью отладчика Phonegap Build показывает, что div для заголовка и содержимого заканчивается пустым.
Смотрите изображение ниже:
Я также посмотрел на вопросы, на GitHub репо для UI-маршрутизатора и придумать this. Хотя похоже, что это относится только к элементам ui-sref, а не к элементам ui-view. Кто-нибудь еще сталкивается с этой проблемой или похожей? Рефакторинг с использованием традиционной угловой условной логики для визуализации различных заголовков будет, по-видимому, болью, что делает код менее удобочитаемым/устойчивым. Благодаря!
Привет, Как вы установили бутстрап Кордовы? Может быть, вы должны проверить это !, Это вызывает конфликт с Angular library, потому что это не deviceready. Также эмулятор Ripple является obselete! попробуйте запустить приложение на устройстве и проверить LogCat. Я собираюсь поставить решение, которое я видел в сообщении. – schwertfisch
У меня возникли проблемы с пониманием того, что вы получаете здесь. Вызов deviceready обрабатывается правильно, поскольку я использовал это для хранения изображений локально через API PhoneGap FileSystem. Это вызвало переход от стандартного маршрутизатора углового к ui-router. Попытка отладки через LogCat является хорошим моментом, хотя, я буду смотреть на это. – msandt3
Извините, я думал, что ваша проблема была связана с готовностью устройства, потому что у меня была такая же проблема, и у AngularJs были исключения, поэтому я решил обработать ее в службе. Я не знаю, является ли проблема службы сборки. Попробуйте компилировать локально и отлаживать в устройстве – schwertfisch