Kątowy widok/routing nie działa w PhoneGap

Mam problem z ngView w PhoneGap.Kątowy widok/routing nie działa w PhoneGap

Wydaje się, że wszystko ładuje się dobrze i mogę nawet uzyskać podstawowy kontroler działający przy użyciu ng-kontrolera. Ale kiedy próbuję użyć routingu z ngView, nic się nie dzieje.

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

Eclipse rejestrator pokazuje onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) każdym razem klikam odnośnik, i próbuje go bez # tylko podnosi błędzie informujący, że ścieżka nie może zostać znaleziona.

Z tego, co przygotowałem wszędzie, powinno to zadziałać. Każda pomoc będzie bardzo ceniona.

Źródło

2013-02-27 thewildpendulum

należy używać 'NG-href' zamiast zwykłego' href' tak kątowa może przepisać adresy URL poprawnie. –

Po przeszukaniu przez kilka pytań i forach, mam w końcu dostał to działa niezawodnie. Właśnie tego potrzebowałem, aby uruchomić go z czystego projektu 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>

Uwaga tag <html ng-app="App">. Aplikacja nie załaduje się bez wartości dla dyrektywy, więc upewnij się, że ją zawarłeś.

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

W tym pliku, jesteśmy ręcznie ładowanie początkowe kątowa gdy PhoneGap pożary zdarzenie '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' 
    }); 
});

Plik ten ma dwie ważne rzeczy w nim. Najpierw tworzymy moduł o tej samej nazwie, którego używaliśmy wcześniej w <html np-app="App">. Po drugie, musimy skonfigurować router do umieszczenia na białej liście identyfikatorów URI plików na białej liście . Osobiście tego nie potrzebowałem, ale wydaje mi się, że kilka osób napotkało problem, więc go włączyłem.

controllers.js

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

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

Wreszcie, zaledwie kilka podstawowych kontrolerów.

Utworzyłem repozytorium github z całym tym here.

Mam nadzieję, że to pomoże komuś innemu.

Źródło

2013-03-26 21:50:56 thewildpendulum

+18

na wypadek gdyby ktoś inny prowadzi do tego, urlSanitizationWhitelist jest aHrefSanitizationWhitelist w nowszych wersjach kątowych –

jesteśmy tu rok później: Zauważyłem, że ładującego kątowe ten sposób w Cordova daje ten błąd: „” 'Error: NG: btstrpd App Już bootstrapped z tym elementem "dokument" "" - wskazującym, że kąt jest już załadowany. – ericpeters0n

Wystąpił podobny błąd. Rozwiązaniem nie było dodanie atrybutu "ng-app" do kodu HTML, jeśli wywołujesz funkcję angle.bootstrap. Możesz zrobić jedną lub drugą, ale nie obie. – hawkharris

Moim problemem była biała lista domen.

Zasadniczo Twój .config musi wyglądać następująco:

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

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

Źródło

2013-03-13 00:04:36 forrestranger

Kątowy 1.2 nie zapewnia metody. W każdym razie wydaje się, że to już nie jest konieczne. Testowałem to na moim telefonie komórkowym i działa bez niego.

Źródło

2013-08-15 18:47:50 akohout

Spróbuj aHrefSanitizationWhitelist –

Udało mi się rozwiązać problem, wyłączając flagi zasad dostępu lokalnego w Google Chrome.

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

Oto link aby jak wyłączyć dostęp do lokalnej polityki plików.

Źródło

2013-08-28 21:18:43

FWIW - oto moje 2 centów do tego problemu:

Wszystkie powyższe wydawało się działać i promować mnie w kierunku aplikacji roboczej, ale wciąż nie mógł dostać $ routeprovider nawigować pomiędzy stronami ...

MÓJ KOŃCOWY problem polegał na tym, że zawierałem wewnątrz znacznika skryptu biblioteki jqueryMobile i przejmowałem żądania adresów URL, zanim Angular ich porwał. Kiedy go usunąłem, żądania nawigacyjne w końcu dotarły do routera $ routeprovider i teraz wszystko działa dobrze.

Nadzieja pomaga to ktoś ...

Źródło

2014-10-04 11:44:14 roy650

Kątowy widok/routing nie działa w PhoneGap

Odpowiedz

Powiązane problemy