我目前有一个使用Angular构建的项目,我正在部署到Phonegap Build服务来创建iOS和
Android发行版.最初我正在使用Angular的内置路由服务.然而,嵌套多个视图的需要有助于我采用
Angular UI-Router.我已经构建了一个简单的路由系统,通过网络浏览器和
Ripple Emulator在本地测试时可以工作.
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:{
'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','content':{
templateUrl: '/views/tour.html',controller: 'TourController'
}
}
}).
state('buildingTour',{
url:'/buildingTour/:tourId','content':{
templateUrl:'views/building_tour.html',controller:'BuildingTourController'
}
}
}).
state('buildingTourNotes',{
url:'/buildingTour/:tourId/notes','content':{
templateUrl: 'views/notes.html',controller: 'NotesController'
}
}
}).
state('buildingTourPhotos',{
url:'/buildingTour/:tourId/photos','content':{
templateUrl:'/views/photos.html',controller:'PhotosController'
}
}
}).
state('buildingTourDocuments',{
url:'/buildingTour/:tourId/documents','content':{
templateUrl:'/views/documents.html',controller:'DocumentsController'
}
}
}).
state('buildingTourFloorplans',{
url:'/buildingTour/:tourId/floorplans','content':{
templateUrl:'/views/floorplans.html',controller:'FloorplansController'
}
}
}).
state('buildingTourRatings',{
url:'/buildingTour/:tourId/ratings','content':{
templateUrl:'/views/ratings.html',controller:'RatingsController'
}
}
});
});
但是,使用Phonegap Build服务可以生成完全空白的iOS和Android发行版.使用Phonegap Build的调试器检查html标记显示标题和内容的div为空.
见下图：
我还研究了UI路由器的github repo的问题,并提出了this.虽然这似乎只适用于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可能位于文件：///android_asset/www/index.html,因此请求将解析为file：/// views / login. headers.html不存在.如果从url中删除初始斜线,路径将相对于您所在的位置,并且该请求将解析为file：///android_asset/www/views/login.headers.html,它应该可以正常工作.
