Angular ng view/routing在PhoneGap中不起作用

我在PhoneGap中遇到ngView問題。Angular ng view/routing在PhoneGap中不起作用

一切似乎加載得很好，我甚至可以得到一個基本的控制器使用NG控制器工作。但是當我嘗試使用ngView進行路由時，沒有任何反應。

的index.html

<!doctype html> 
<html ng-app> 
<head> 
    <script type="text/javascript" src="lib/cordova-2.4.0.js"></script> 
    <script type="text/javascript" src="lib/angular-1.0.4.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
</head> 
<body> 

<a href="#/test">Test</a> 

<div ng-view></div> 

</body> 
</html>

app.js

angular.module('App', []).config(function ($routeProvider) { 

    $routeProvider.when('/test', { 
     controller: TestCtrl, 
     template: '<h1> {{ test }} </h1>'   
    }); 

}); 

function TestCtrl($scope) { 
    $scope.test = "Works!"; 
}

Eclipse的記錄顯示onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)我點擊鏈接每一次，並試圖不#只是引發錯誤的路徑無法找到。

從我已經準備好的其他地方，這應該是工作。任何幫助將不勝感激。

來源

2013-02-27 thewildpendulum

您應該使用'NG-href'，而不是正常的'href'所以角可以正確地重寫這些URL。 – 2015-03-03 00:40:36

回答幾個問題和論壇搜索後，我終於得到它工作可靠。這是我從一個乾淨的PhoneGap項目中運行它所需要的。

的index.html

<!DOCTYPE html> 
<html ng-app="App"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <title>Hello World</title> 
</head> 
<body> 

    <a href="#/">Main View</a> 
    <a href="#/view">New View</a> 

    <div ng-view></div> 

    <!-- Libs --> 
    <script type="text/javascript" src="lib/cordova-2.5.0.js"></script> 
    <script type="text/javascript" src="lib/angular-1.0.5.js"></script> 

    <!-- App --> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/routers.js"></script> 
    <script type="text/javascript" src="js/controllers.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html>

注意<html ng-app="App">標籤。該應用程序不會加載沒有該指令的值，所以請確保您包含一個。

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); 
     }); 
    }, 
};

在這個文件中，我們手動自舉角時的PhoneGap將觸發'ondeviceready'事件。

routers.js

angular.module('App', []) 
.config(function ($compileProvider){ 
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); 
}) 
.config(function ($routeProvider) { 

    $routeProvider 
    .when('/', { 
     controller: TestCtrl, 
     templateUrl: 'partials/main.html' 
    }) 
    .when('/view', { 
     controller: ViewCtrl, 
     templateUrl: 'partials/view.html' 
    }); 
});

這個文件有兩個重要的東西在裏面。首先，我們在<html np-app="App">中創建與之前使用的名稱相同的模塊。其次，我們需要將路由器配置爲將文件URI列入白名單。我個人並不需要這個，但有幾個人似乎遇到了這個問題，所以我把它包括進去了。

controllers.js

function TestCtrl($scope) { 
    $scope.status = "It works!"; 
} 

function ViewCtrl($scope) { 
    $scope.status = "Also totally works!"; 
}

最後，只是一些基本的控制器。

我創建了一個github回購，所有這一切here。

希望這可以幫助別人。

來源

2013-03-26 21:50:56 thewildpendulum

+18

如果其他人遇到這種情況，urlSanitizationWhitelist是在更新版本的Angular – 2013-09-11 06:07:10

中的hrefSanitizationWhitelist在這裏我們是一年後：我注意到在科爾多瓦這種引導角度產生這個錯誤：'''錯誤：ng：btstrpd 應用程序已經引導與這個元素的'文檔'''' - 表明角度已經加載。 – ericpeters0n 2014-04-28 23:44:44

我遇到了類似的錯誤。如果您調用angular.bootstrap，則解決方案不會將「ng-app」屬性添加到HTML中。你可以做一個或另一個，但不能同時做。 – hawkharris 2014-06-17 18:26:22

我的問題是域白名單。

基本上你的.config需要看起來像這樣：

angular.module('App', []).config(function ($routeProvider, $compileProvider) { 

    $routeProvider.when('/test', { 
     controller: TestCtrl, 
     template: '<h1> {{ test }} </h1>'   
    }); 
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); 
});

來源

2013-03-13 00:04:36 forrestranger

角1。2不提供方法

$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)

無論如何，現在看來似乎沒有必要了。我在我的手機上測試過它，它沒有工作。

來源

2013-08-15 18:47:50 akohout

嘗試aHrefSanitizationWhitelist – 2015-06-28 13:52:32

我能夠通過在Google Chrome中禁用本地訪問策略標誌來解決問題。

$ open -a Google\ Chrome --args --disable-web-security for Mac OS.

這裏是link到如何禁用本地訪問文件策略。

來源

2013-08-28 21:18:43

FWIW - 這裏是我的2美分，這一問題：

上述所有似乎工作，促進我推向一個工作應用程序，但我仍然無法得到$ routeprovider頁面間導航...

我的最終問題是 - 我有一個包含在jqueryMobile庫的腳本標記內，它在Angular掌握它們之前劫持URL請求。當我刪除它時，導航請求最終將它傳遞給$ routeprovider，現在一切正常。

希望這可以幫助別人......

來源

2014-10-04 11:44:14 roy650

Angular ng view/routing在PhoneGap中不起作用

回答

相關問題