移動Angular ng視圖在PhoneGap App上不起作用

我正在嘗試使用Mobile Angular和PhoneGap來完成我的第一個移動應用程序。移動Angular ng視圖在PhoneGap App上不起作用

現在的問題是模板文件不會在手機上的PhoneGap測試應用程序的ng-view中加載。

我知道這已經早些時候已高達：

https://stackoverflow.com/a/15648056/616341

但我已嘗試添加aHrefSanitizationWhitelist()，並沒有幫助。

編輯：

該文件目前看起來是這樣的：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 

    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 

    <!-- This is a wide open CSP declaration. To lock this down for production, see below. --> 
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> 

    <link rel="stylesheet" href="./css/mobile-angular-ui-hover.min.css" /> 
    <link rel="stylesheet" href="./css/mobile-angular-ui-base.min.css" /> 
    <link rel="stylesheet" href="./css/mobile-angular-ui-desktop.min.css" /> 

    <link rel="stylesheet" type="text/css" href="./css/index.css" /> 

    <title>Hello World</title> 

</head> 

<body ng-app="myApp"> 

    <div class="app"> 

     <!-- Top Navbar --> 

     <div class="navbar navbar-app navbar-absolute-top"> 

       <div class="btn-group justified"> 
       <a href="#/page1" class="btn btn-navbar">Page 1</a> 
       </div> 

     </div> 

     <!-- Bottom Navbar --> 

     <div class="navbar navbar-app navbar-absolute-bottom"></div> 

     <!-- App Body --> 
     <div class="app-body"> 

      <div class="app-content"> 

       <ng-view></ng-view> 

      </div> 

     </div> 

    </div><!-- ~ .app --> 

    <!-- Modals and Overlays --> 
    <div ui-yield-to="modals"></div> 

</body> 

<!-- Libs --> 
<script src="cordova.js"></script> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script> 

<script src="/js/mobile-angular-ui.min.js"></script> 
<script src="/js/mobile-angular-ui.gestures.min.js"></script> 

<!-- App --> 
<script> 
var app = { 
    initialize: function() 
    { 
     this.bindEvents(); 
    }, 
    bindEvents: function() 
    { 
     document.addEventListener('deviceready', this.onDeviceReady, true); 
    }, 

    onDeviceReady: function() 
    { 
     angular.element(document).ready(function() 
     { 
      angular.bootstrap(document, ['myApp']); 
     }); 
    }, 
}; 


angular.module('myApp', ['ngRoute']).config(function($routeProvider) 
{ 
    $routeProvider 
    .when('/', { 
     templateUrl: './views/page1.html' 
    }) 
    .when('/page1', { 
     templateUrl: './views/page1.html' 
    }); 

}); 

app.initialize(); 
</script> 

</html>

來源

2016-11-22 Peter Westerlund

解決！：

我發現了自己的問題。如果angular甚至被加載，我開始測試。它不在移動設備上。這幫助了我很多，因爲我現在知道這個問題不是關於路由的，而是關於未被加載的角度。

，將溶液添加https:前//：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>

編輯：

你也可以把它地方：

<script src="js/angular.min.js"></script> 
<script src="js/angular-route.min.js"></script>

來源

2016-11-24 12:04:50

會建議，以保持庫文件的本地 – Lakshay

這也是一個有效的選擇。 –

是的，即使您的手機處於在線狀態，這種情況也會更好bcs文件需要時間才能加載和phonegap應用程序崩潰發出警報無法加載資源 – Lakshay

移動Angular ng視圖在PhoneGap App上不起作用

回答

相關問題