27

我在 PhoneGap 中遇到了 ngView 的问题。

一切似乎都加载得很好，我什至可以使用 ng-controller 获得一个基本的控制器。但是当我尝试将路由与 ngView 一起使用时，什么也没有发生。

索引.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>

应用程序.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)在我每次单击该链接时显示，并且在不尝试的情况下尝试它#会引发找不到路径的错误。

从我在其他地方准备的内容来看，这应该可以工作。任何帮助将不胜感激。

4

5 回答 5

43

After searching through several questions and forums, I've finally got it working reliably. This is what it took me to get it running from a clean PhoneGap project.

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>

Note the <html ng-app="App"> tag. The app won't load without a value for the directive, so make sure you include one.

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

In this file, we're manually bootstrapping Angular when PhoneGap fires the 'ondeviceready' event.

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

This file has two important things in it. First, we're creating the module with the same name we used before in <html np-app="App">. Second, we need to configure the router to whitelist file URIs. I personally didn't need this, but several people seem to have encountered the issue, so I included it.

controllers.js

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

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

Finally, just some basic controllers.

I've created a github repo with all of this here.

Hope this helps someone else.

于 2013-03-26T21:50:56.167 回答
5

我的问题是域白名单。

基本上你的 .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-13T00:04:36.667 回答
2

FWIW - 这是我解决这个问题的 2 美分：

以上所有方法似乎都有效，并将我推向了一个工作应用程序，但我仍然无法让 $routeprovider 在页面之间导航......

我的最后一个问题是 - 我在 jqueryMobile 库的脚本标签中有一个包含，它在 Angular 获取 URL 请求之前劫持了它们。当我删除它时，导航请求最终到达了 $routeprovider，现在一切正常。

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

于 2014-10-04T11:44:14.687 回答
1

我可以通过禁用 Google Chrome 中的本地访问策略标志来解决此问题。

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

这是如何禁用本地访问文件策略的链接。

于 2013-08-28T21:18:43.790 回答
0

Angular 1.2 不提供该方法

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

反正，好像没必要了。我在我的手机上测试了它，它没有工作。

于 2013-08-15T18:47:50.930 回答