Angular ng-view/routing не работает в PhoneGap

У меня проблема с ngView в PhoneGap.

Все, кажется, очень просто загружается, и я могу даже получить базовый контроллер, работающий с помощью ng-контроллера. Но когда я пытаюсь использовать маршрутизацию с 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!";
}

Журнатор Eclipse показывает onMessage(onPageFinished, fle:///android_asset/www/index.html#/test) каждый раз, когда я нажимаю ссылку, и попытка без # просто вызывает ошибку, которая не может быть найдена.

Из того, что я готов повсюду, это должно работать. Любая помощь будет принята с благодарностью.

Ответ 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);
        });
    },
};

В этом файле мы вручную загружаем Angular, когда PhoneGap запускает событие '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'
    });
});

В этом файле есть две важные вещи. Во-первых, мы создаем модуль с тем же именем, что и раньше, в <html np-app="App">. Во-вторых, нам нужно настроить маршрутизатор на белый список URI файлов. Мне лично это не нужно, но некоторые люди, похоже, столкнулись с проблемой, поэтому я включил ее.

controllers.js

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

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

Наконец, просто некоторые базовые контроллеры.

Я создал репозиторий github со всем этим здесь.

Надеюсь, это поможет кому-то еще.

Ответ 2

Моя проблема - белый список доменов.

В основном ваш .config должен выглядеть следующим образом:

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

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

Ответ 3

FWIW - вот мои 2 цента для этой проблемы:

Все вышеперечисленное, похоже, работало и продвигало меня к рабочему приложению, но я все еще не мог заставить $routeeprovider перемещаться между страницами...

МОЯ ЗАКЛЮЧИТЕЛЬНАЯ проблема была: у меня был включенный внутри тега script библиотеки jqueryMobile, и он захватывал запросы URL до того, как их Angular завладел ими. Когда я удалил его, навигационные запросы, наконец, попали в $ropteprovider, и теперь все работает нормально.

Надеюсь, это поможет кому-то...

Ответ 4

Мне удалось решить проблему, отключив флаги политики локального доступа в Google Chrome.

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

Вот ссылка о том, как отключить политику файла локального доступа.

Ответ 5

Angular 1.2 не предоставляет метод

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

В любом случае, похоже, что это больше не нужно. Я тестировал его на своем мобильном устройстве, и он работает без него.