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)我点击链接每一次，并试图不#只是引发错误的路径无法找到。

从我已经准备好的其他地方，这应该是工作。任何帮助将不胜感激。

您应该使用'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。

希望这可以帮助别人。

+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):/); 
});

答

角1。2不提供方法

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

无论如何，现在看来似乎没有必要了。我在我的手机上测试过它，它没有工作。

尝试aHrefSanitizationWhitelist – 2015-06-28 13:52:32

答

我能够通过在Google Chrome中禁用本地访问策略标志来解决问题。

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

这里是link到如何禁用本地访问文件策略。

答

FWIW - 这里是我的2美分，这一问题：

上述所有似乎工作，促进我推向一个工作应用程序，但我仍然无法得到$ routeprovider页面间导航...

我的最终问题是 - 我有一个包含在jqueryMobile库的脚本标记内，它在Angular掌握它们之前劫持URL请求。当我删除它时，导航请求最终将它传递给$ routeprovider，现在一切正常。

希望这可以帮助别人......

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

相关推荐