将 Angular UI-Router 与 Phonegap 一起使用 [英] Using Angular UI-Router with Phonegap
问题描述
我目前有一个使用 Angular 构建的项目，我将其部署到 Phonegap Build 服务以创建 iOS 和 Android 发行版.最初，我使用的是 Angular 的内置路由服务.然而，嵌套多个视图的需要促进了我采用 .虽然这似乎只适用于 ui-sref 元素，而不是 ui-view 元素.有没有其他人遇到过这个问题或类似的问题?使用传统的角度条件逻辑进行重构以呈现不同的标头将是一种痛苦，这似乎会使代码的可读性/可持续性降低.谢谢！
Quick awnser: 问题是你的模板 url 中的初始斜线.删除所有初始斜线，你应该很高兴.
示例:以下代码摘录
templateUrl:'/views/login.header.html'应改为:
templateUrl:'views/login.header.html'解释:初始斜线使路径相对于根.当您在浏览器上进行测试时，index.html 可能在 http://localhost/index.html 上，因此对 /views/login 的请求.header.html 解析为 http://localhost/views/login.headers.html 没问题.
另一方面，当您在 phonegap 生成的应用程序上进行测试时，index.html 可能在 file:///android_asset/www/index.html，因此请求解析为不存在的 file:///views/login.headers.html.如果您从 url 中删除初始斜杠，则路径将相对于您所在的位置，并且请求将解析为 file:///android_asset/www/views/login.headers.html 并且它应该可以工作.
I currently have a project built with Angular that I'm deploying to the Phonegap Build service to create iOS and Android distributions. Originally, I was using Angular's built in routing service. However, the need to nest multiple views facilitated my adoption of the Angular UI-Router. I've built a simple routing system that works when testing locally via a web browser and using Ripple Emulator.
The index.html is as follows:
<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>
And the code for the routing
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:{
'header@':{
templateUrl:'/views/login.header.html'
},
'content@':{
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'
}
}
});
});
However, using the Phonegap Build service produces iOS and Android distributions that are completely blank. Inspecting the html markup with Phonegap Build's debugger shows that the div's for the header and the content end up blank.
See the image below:
I've also looked into issues on the github repo for UI-Router and come up with this. Though that seems like it only pertains to ui-sref elements as opposed to ui-view elements. Has anyone else run into this issue or one similar? Refactoring using traditional angular conditional logic to render different headers will be a pain seems to make the code less readable/sustainable. Thanks!
Quick awnser: The problem is the initial slash in your template urls. Remove all initial slashes and you should be good to go.
Example: the excerpt below from your code
templateUrl:'/views/login.header.html'
Should be changed to:
templateUrl:'views/login.header.html'
Explanation: The initial slash makes the path relative to the root. When you are testing on the browser the index.html is probably on http://localhost/index.html, so the request to /views/login.header.html resolves to http://localhost/views/login.headers.html which is ok.
In the other hand, when you are testing on the app generated by phonegap, the index.html is probably on file:///android_asset/www/index.html, so the request resolves to file:///views/login.headers.html wich doesn't exist. If you remove the initial slash from the url the path becomes relative to where you are and the request will resolve to file:///android_asset/www/views/login.headers.html and it should work.
这篇关于将 Angular UI-Router 与 Phonegap 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
