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

时间：2021-12-28 12:56:03

I'm having a problem with ngView in PhoneGap.

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

Everything seems to be loading just fine and I can even get a basic controller working using ng-controller. But when I try to use routing with ngView, nothing happens.

一切似乎都装得很好，我甚至可以使用ng-controller来使用基本的控制器。但是当我尝试使用ngView进行路由时，没有任何反应。

index.html

的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

app.js

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

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

});

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

The Eclipse logger shows onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) every time I click the link, and trying it without the # just raises an error that the path can't be found.

Eclipse的记录器显示的onMessage（onPageFinished，FLE：///android_asset/www/index.html#/test）每次我点击链接时，并试图未经＃也就是提高该路径无法找到一个错误。

From what I've ready everywhere else, this should be working. Any help would be greatly appreciated.

从我在其他地方做好准备，这应该是有效的。任何帮助将不胜感激。

5 个解决方案

#1

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.

在搜索了几个问题和论坛之后，我终于让它可靠地工作了。这就是我从干净的PhoneGap项目中运行它所需要的。

index.html

的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

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.

在这个文件中，当PhoneGap触发'ondeviceready'事件时，我们手动引导Angular。

routers.js

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.

这个文件有两个重要的东西。首先，我们使用与之前在中使用的名称相同的名称创建模块。其次，我们需要将路由器配置为白名单文件URI。我个人并不需要这个，但有几个人似乎遇到了这个问题，所以我把它包括在内。

controllers.js

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.

我在这里创建了一个github repo。

Hope this helps someone else.

希望这有助于其他人。

#2

5  

My issue was the domain whitelisting.

我的问题是域名白名单。

Basically your .config needs to look like this:

基本上你的.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):/);
});

#3

2  

FWIW - here's my 2 cents for this problem:

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

All of the above seemed to work and promote me towards a working app but I still couldn't get the $routeprovider to navigate between pages...

所有上述内容似乎都能正常工作并将我推向一个有效的应用程序，但我还是无法让$ routeprovider在页面之间导航......

MY FINAL problem was - I had an include inside a script tag of the jqueryMobile library and it was hijacking the URL requests before Angular got hold of them. When I removed it the navigation requests finally made it to the $routeprovider and all is working fine now.

我最终的问题是 - 我在jqueryMobile库的脚本标签中有一个include，它在Angular抓住它们之前就劫持了URL请求。当我删除它时，导航请求最终进入$ routeprovider，现在一切正常。

Hope this helps someone...

希望这有助于某人......

#4

1  

I was able to resolve the issue by disabling the local access policy flags in Google Chrome.

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

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

Here is the link to how to disable local access file policy.

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

#5

0  

Angular 1.2 does not provide the method

Angular 1.2不提供该方法

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

Anyway, it seems like it's not necessary anymore. I tested it on my mobile and it works without.

无论如何，它似乎已经没有必要了。我在我的手机上进行了测试，但没有。

#1

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.

在搜索了几个问题和论坛之后，我终于让它可靠地工作了。这就是我从干净的PhoneGap项目中运行它所需要的。

index.html

的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

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.

在这个文件中，当PhoneGap触发'ondeviceready'事件时，我们手动引导Angular。

routers.js

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.

这个文件有两个重要的东西。首先，我们使用与之前在中使用的名称相同的名称创建模块。其次，我们需要将路由器配置为白名单文件URI。我个人并不需要这个，但有几个人似乎遇到了这个问题，所以我把它包括在内。

controllers.js

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.

我在这里创建了一个github repo。

Hope this helps someone else.

希望这有助于其他人。

#2

5  

My issue was the domain whitelisting.

我的问题是域名白名单。

Basically your .config needs to look like this:

基本上你的.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):/);
});

#3

2  

FWIW - here's my 2 cents for this problem:

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

All of the above seemed to work and promote me towards a working app but I still couldn't get the $routeprovider to navigate between pages...

所有上述内容似乎都能正常工作并将我推向一个有效的应用程序，但我还是无法让$ routeprovider在页面之间导航......

MY FINAL problem was - I had an include inside a script tag of the jqueryMobile library and it was hijacking the URL requests before Angular got hold of them. When I removed it the navigation requests finally made it to the $routeprovider and all is working fine now.

我最终的问题是 - 我在jqueryMobile库的脚本标签中有一个include，它在Angular抓住它们之前就劫持了URL请求。当我删除它时，导航请求最终进入$ routeprovider，现在一切正常。

Hope this helps someone...

希望这有助于某人......

#4

1  

I was able to resolve the issue by disabling the local access policy flags in Google Chrome.

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

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

Here is the link to how to disable local access file policy.

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

#5

0  

Angular 1.2 does not provide the method

Angular 1.2不提供该方法

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

Anyway, it seems like it's not necessary anymore. I tested it on my mobile and it works without.

无论如何，它似乎已经没有必要了。我在我的手机上进行了测试，但没有。

标签：

相关文章