web-dev-qa-db-fra.com

Angular ng-view / routing ne fonctionne pas dans PhoneGap

J'ai un problème avec ngView dans PhoneGap.

Tout semble bien se charger et je peux même faire fonctionner un contrôleur de base en utilisant ng-controller. Mais lorsque j'essaie d'utiliser le routage avec ngView, rien ne se passe.

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

L'enregistreur Eclipse affiche onMessage(onPageFinished, fle:///Android_asset/www/index.html#/test) chaque fois que je clique sur le lien, et l'essayer sans # Soulève simplement une erreur indiquant que le chemin est introuvable.

D'après ce que j'ai préparé partout ailleurs, cela devrait fonctionner. Toute aide serait grandement appréciée.

cordovaroutingangularjsangular-routing
27
thewildpendulum

Après avoir parcouru plusieurs questions et forums, je l'ai enfin fait fonctionner de manière fiable. C'est ce qu'il m'a fallu pour le faire fonctionner à partir d'un projet PhoneGap propre.

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>

Noter la <html ng-app="App"> tag. L'application ne se chargera pas sans valeur pour la directive, alors assurez-vous d'en inclure une.

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

Dans ce fichier, nous démarrons manuellement Angular lorsque PhoneGap déclenche le 'ondeviceready' un événement.

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

Ce fichier contient deux éléments importants. Tout d'abord, nous créons le module avec le même nom que nous avons utilisé auparavant dans <html np-app="App">. Deuxièmement, nous devons configurer le routeur pour mettre les URI des fichiers sur liste blanche. Personnellement, je n'en avais pas besoin, mais plusieurs personnes semblent avoir rencontré le problème, alors je l'ai inclus.

controllers.js

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

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

Enfin, quelques contrôleurs de base.

J'ai créé un dépôt github avec tout cela ici .

J'espère que ceci aide quelqu'un d'autre.

43
thewildpendulum

Mon problème était la liste blanche de domaine.

Fondamentalement, votre .config doit ressembler à ceci:

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

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

FWIW - voici mes 2 cents pour ce problème:

Tout ce qui précède semblait fonctionner et me promouvoir vers une application fonctionnelle, mais je n'arrivais toujours pas à faire en sorte que $ routeprovider navigue entre les pages ...

Mon problème final était - j'avais une inclusion dans une balise de script de la bibliothèque jqueryMobile et il détournait les demandes d'URL avant Angular les a récupérées. Quand je l'ai supprimé, les demandes de navigation l'ont finalement fait au $ routeprovider et tout fonctionne bien maintenant.

J'espère que cela aide quelqu'un ...

2
roy650

J'ai pu résoudre le problème en désactivant les indicateurs de stratégie d'accès local dans Google Chrome.

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

Voici le lien pour savoir comment désactiver la stratégie de fichier d'accès local.

1
art-jitsu

Angular 1.2 ne fournit pas la méthode

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

Quoi qu'il en soit, il semble que ce ne soit plus nécessaire. Je l'ai testé sur mon mobile et ça marche sans.

0
akohout