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

一尘不染

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

angularjs

我在PhoneGap中遇到ngView的问题。

一切似乎都可以正常加载，我什至可以使用ng-controller使基本控制器正常工作。但是，当我尝试在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!";
}

onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)每次单击链接时，Eclipse记录器都会显示该链接，而在没有链接的情况下尝试该链接#会引发一个错误，即找不到该路径。

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

阅读 177

2020-07-04

共1个答案

一尘不染

在搜索了几个问题和论坛之后，我终于使它可靠地工作了。这就是我从一个干净的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'事件时，我们将手动引导Angular 。

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存储库。

希望这对其他人有帮助。

2020-07-04