使用Angular UI路由器与Phonegap [英] Using Angular UI-Router with Phonegap
问题描述
我目前有一个使用Angular构建的项目，我正在部署到Phonegap Build服务以创建iOS和Android发行版。最初，我使用Angular的内置路由服务。但是，需要嵌套多个视图有助于我采用。虽然这似乎只是属于ui-sref元素，而不是ui-view元素。有没有人遇到这个问题或一个类似？重构使用传统的角度条件逻辑来渲染不同的头将是一个痛苦似乎使代码更不可读/可持续。谢谢！
Quick awnser：问题是模板网址中的初始斜杠。
示例：您的代码
下面的摘录 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 wich不存在。如果从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路由器与Phonegap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
