0
我正在嘗試使用angular來製作PhoneGap webapp。我有這三個文件。通過Phonegap在deviceready上執行AngularJS
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li><a href="#">Home</a></li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
它在瀏覽器上正常工作。警報在控制器中觸發得很好。但是當我在Phonegap上編譯它時，AngularJS沒有初始化。
我讀過你需要在'deviceready'之後執行代碼才能工作。我看着這個quetions這裏：
Angular ng-view/routing not working in PhoneGap
，並嘗試使用它。但它似乎沒有做任何事情。我無法理解爲什麼，或者我可能會錯過某些事情來做到這一點，以及我的ng-app有一個特定的名稱，並附加到應用程序變量，如圖所示。
請幫忙。