Angolare ng-view/routing che non funziona in PhoneGap

Sto riscontrando un problema con ngView in PhoneGap.Angolare ng-view/routing che non funziona in PhoneGap

Tutto sembra caricare correttamente e posso anche ottenere un controller di base che funzioni utilizzando ng-controller. Ma quando provo a utilizzare il routing con ngView, non succede nulla.

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

The Eclipse logger mostra onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) ogni volta che clicco il link, e cercando senza il # solo genera un errore che il percorso non può essere trovato.

Da quello che ho preparato ovunque, questo dovrebbe funzionare. Qualsiasi aiuto sarebbe molto apprezzato.

fonte

2013-02-27 thewildpendulum

Si deve usare 'ng-href' invece di normale' href' in modo angolare può riscrivere correttamente le URL. –

Dopo la ricerca attraverso diverse domande e forum, ho finalmente capito di lavoro in modo affidabile. Questo è quello che mi ci è voluto per farlo funzionare da un progetto di PhoneGap pulito.

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>

Nota il tag <html ng-app="App">. L'app non verrà caricata senza un valore per la direttiva, quindi assicurati di includerne una.

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 questo file, stiamo avviando manualmente angolare quando PhoneGap genera l'evento 'ondeviceready'.

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

Questo file ha due cose importanti in esso. Per prima cosa, stiamo creando il modulo con lo stesso nome usato in precedenza in <html np-app="App">. In secondo luogo, dobbiamo configurare il router per autorizzare gli URI del file . Personalmente non avevo bisogno di questo, ma molte persone sembrano aver riscontrato il problema, quindi l'ho incluso.

controllers.js

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

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

Infine, solo alcuni controllori di base.

Ho creato un repository Github con tutto questo here.

Spero che questo aiuti qualcun altro.

fonte

2013-03-26 21:50:56 thewildpendulum

+18

In caso contrario, urlSanitizationWhitelist è unHrefSanitizationWhitelist nelle versioni più recenti di Angular –

Eccoci un anno dopo: ho notato che l'angolo di avvio in questo modo in Cordova restituisce questo errore: '' 'Errore: ng: btstrpd App già avviata con questo 'documento' '' 'elemento - che indica che l'angolare è già caricato. – ericpeters0n

Mi sono imbattuto in un errore simile. La soluzione non era quella di aggiungere l'attributo "ng-app" all'HTML se stai chiamando angular.bootstrap. Puoi fare l'uno o l'altro, ma non entrambi. – hawkharris

Il mio problema era la whitelisting del dominio.

Fondamentalmente il tuo .config ha bisogno di guardare in questo modo:

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

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

fonte

2013-03-13 00:04:36 forrestranger

Angolare 1.2 non fornisce il metodo

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

In ogni caso, sembra che non sia più necessario. L'ho provato sul mio cellulare e funziona senza.

fonte

2013-08-15 18:47:50 akohout

Prova aHrefSanitizationWhitelist –

Sono stato in grado di risolvere il problema disabilitando i flag dei criteri di accesso locali in Google Chrome.

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

Ecco il link a come disabilitare la politica file di accesso locale.

fonte

2013-08-28 21:18:43

FWIW - ecco il mio 2 centesimi per questo problema:

Tutto quanto sopra sembrava funzionare e mi promuovere verso un app di lavoro, ma io ancora non ha potuto ottenere il $ routeprovider per navigare tra le pagine ...

IL MIO problema FINALE era - Avevo un inclusivo all'interno di un tag script della libreria jqueryMobile e stava violando le richieste URL prima che Angular si impadronisse di loro. Quando l'ho rimosso, le richieste di navigazione sono finalmente arrivate al $ routeprovider e ora funziona tutto bene.

Spero che questo aiuti qualcuno ...

fonte

2014-10-04 11:44:14 roy650

Angolare ng-view/routing che non funziona in PhoneGap

risposta

Problemi correlati