Angular ng-view / routing funktioniert nicht in PhoneGap

Ich habe ein problem mit ngView in PhoneGap.

Scheint alles geladen zu werden, nur gut und ich kann sogar ein basic-controller arbeitet mit ng-controller. Aber wenn ich versuche routing mit ngView, passiert nichts.

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!";
}

Den Eclipse-logger zeigt onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) jedes mal, wenn ich auf den link klicken und versuchen Sie es ohne die # wirft nur eine Fehlermeldung, dass der Pfad nicht gefunden werden kann.

Von dem, was ich bereit überall sonst, das sollte funktionieren. Jegliche Hilfe würde sehr geschätzt werden.

InformationsquelleAutor der Frage thewildpendulum | 2013-02-27

Nach der Suche durch mehrere Fragen und Foren, endlich habe ich es zuverlässig arbeiten. Dies ist, was es dauerte, um es von einem sauberen PhoneGap-Projekt.

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>

Hinweis: die <html ng-app="App"> tag. Die app wird nicht geladen, ohne einen Wert für die Richtlinie, so stellen Sie sicher, dass Sie gehören.

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 dieser Datei, die wir manuell bootstrapping-Winkel, wenn PhoneGap feuert die 'ondeviceready' Veranstaltung.

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

Diese Datei hat zwei wichtige Dinge. Zuerst schaffen wir das Modul mit dem gleichen Namen, die wir verwendet haben, bevor Sie in <html np-app="App">. Zweitens müssen wir den router so konfigurieren whitelist
Datei-URIs. Ich persönlich nicht, aber einige Leute scheinen zu haben, stießen auf das Problem, so mache ich es.

controllers.js

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

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

Schließlich nur einige grundlegende Steuerungen.

Habe ich ein github repo mit all diesen hier.

Hoffe, dies hilft jemand anderes.

InformationsquelleAutor der Antwort thewildpendulum

Meine Frage war die Domäne whitelisting.

Grundsätzlich Ihr .config muss so Aussehen:

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

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

InformationsquelleAutor der Antwort forrestranger

2

FWIW, hier ist meine 2 Cent für dieses problem:

Alle der oben genannten zu funktionieren schien und fördern mich auf eine funktionierende app, aber ich konnte immer noch nicht den $routeprovider, um zwischen den Seiten zu navigieren...

MEIN LETZTEN problem war - ich hatte ein include innerhalb eines script-Tags der Bibliothek jqueryMobile und es war hijacking URL-Anfragen, bevor Eckige bekam von Ihnen halten. Wenn ich entfernt es die Navigations-requests schließlich im $routeprovider und alles funktioniert jetzt gut.

Hoffe, das jemand hilft...

InformationsquelleAutor der Antwort roy650
1

Konnte ich das Problem beheben, durch das deaktivieren der lokalen access-policy-flags in Google Chrome.
```
$ open -a Google\ Chrome --args --disable-web-security for Mac OS.
```
Hier ist die link zum deaktivieren der lokalen access-Datei policy.

InformationsquelleAutor der Antwort art-jitsu
0

Gewinkelt 1.2 nicht die Methode
```
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/)
```
Sowieso, wie es scheint, es ist nicht mehr notwendig. Getestet habe ich es auf meinem Handy und es funktioniert ohne.

InformationsquelleAutor der Antwort akohout

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.