使用带有Phonegap的Angular UI-Router
msa*_*dt3 10 angularjs cordova phonegap-build angular-ui-router
我目前有一个使用Angular构建的项目,我正在部署到Phonegap Build服务来创建iOS和Android发行版.最初,我使用的是Angular的内置路由服务.但是,嵌套多个视图的需要促进了我对Angular UI-Router的采用.我已经构建了一个简单的路由系统,可以在通过Web浏览器本地测试并使用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',
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服务会生成完全空白的iOS和Android发行版.使用Phonegap Build的调试器检查html标记显示标题和内容的div最终为空.
见下图:
我还研究了UI-Router的github repo上的问题并提出了这个问题.虽然看起来它只与ui-sref元素相关,而不是与ui-view元素相关.有没有其他人遇到这个问题或类似的？使用传统的角度条件逻辑重构以呈现不同的标题将是一种痛苦似乎使代码不易读/可持续.谢谢!
Edu*_*osa 20
快速扫描:问题是模板网址中的初始斜杠.删除所有初始斜线,你应该好好去.
示例:下面的代码摘录
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并且它应该起作用.