Использование углового UI-маршрутизатора с PhoneGap

Question

Использование углового UI-маршрутизатора с PhoneGap

В настоящее время у меня есть проект, созданный с помощью Angular, который я развертываю в службе Phonegap Build для создания дистрибутивов iOS и Android. Первоначально я использовал встроенную службу маршрутизации Angular. Тем не менее, необходимость вложения нескольких представлений способствовала моему принятию Angular UI-Router. Я построил простую систему маршрутизации, которая работает при локальном тестировании через веб-браузер и с использованием Ripple Emulator.

Index.html выглядит следующим образом:

<html lang="en" ng-app="myApp">


<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />


    <!-- Styles -->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/photo-slider.css" />
    <link rel="stylesheet" type="text/css" href="css/spin.css" />
    <title>App Title</title>









</head>
<body>
    <div class="loader" id='ajax-loader'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>



    <!-- View Container for the Header -->
    <div ui-view="header"></div>
    <!-- View Container for the Content -->
    <div ui-view="content"></div>




    <!-- Angular Libraries -->
    <script src="lib/angular.js"></script>
    <script src="lib/angular-resource.js"></script>
    <script src="lib/angular-route.js"></script>
    <script src="lib/angular-touch.js"></script>
    <!-- UI Router -->
    <script src="lib/angular-ui-router.js"></script>
    <!-- Bootstrap Angular Directives -->
    <script src='js/ui-bootstrap-tpls-0.10.0.js'></script>
    <!-- Peristence js -->
    <script src="lib/persistence.js"></script>
    <script src="lib/persistence.store.sql.js"></script>
    <script src="lib/persistence.store.websql.js"></script>
    <script src="lib/persistence.store.memory.js"></script>

    <!-- imgcache & jquery -->
    <script src='lib/jquery-2.1.0.min.js'></script>
    <script src='lib/imgcache.js'></script>



    <!-- Local Scripts -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

    <!-- Phonegap Dependencies -->
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

И код для маршрутизации

var myApp = angular.module('myApp',[
'ui.router',
'ngTouch',
'ui.bootstrap',
'Controllers',
'Services'
]);
myApp.config(function($stateProvider,$urlRouterProvider,$compileProvider){

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

$urlRouterProvider.otherwise('/login');
$stateProvider.
    state('login',{
        url:'/login',
        views:{
            'header@':{
                templateUrl:'/views/login.header.html'
            },
            'content@':{
                templateUrl:'/views/login.html',
                controller: 'LoginController'
            }
        }
    }).
    state('tours',{
        url:'/tours',
        views:{
            'header':{
                templateUrl:'/views/tours.header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'/views/tours.html',
                controller: 'ToursController'
            }
        }
    }).
    state('tour',{
        url:'/tours/:tourId',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl: '/views/tour.html',
                controller: 'TourController'
            }
        }

    }).
    state('buildingTour',{
        url:'/buildingTour/:tourId',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'views/building_tour.html',
                controller:'BuildingTourController'
            }
        }
    }).
    state('buildingTourNotes',{
        url:'/buildingTour/:tourId/notes',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl: 'views/notes.html',
                controller: 'NotesController'
            }
        }

    }).
    state('buildingTourPhotos',{
        url:'/buildingTour/:tourId/photos',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'/views/photos.html',
                controller:'PhotosController'
            }
        }

    }).
    state('buildingTourDocuments',{
        url:'/buildingTour/:tourId/documents',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'/views/documents.html',
                controller:'DocumentsController'
            }
        }

    }).
    state('buildingTourFloorplans',{
        url:'/buildingTour/:tourId/floorplans',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'/views/floorplans.html',
                controller:'FloorplansController'
            }
        }

    }).
    state('buildingTourRatings',{
        url:'/buildingTour/:tourId/ratings',
        views:{
            'header':{
                templateUrl:'/views/header.html',
                controller: 'HeaderController'
            },
            'content':{
                templateUrl:'/views/ratings.html',
                controller:'RatingsController'
            }
        }

    });
});

Однако использование сервиса Phonegap Build приводит к тому, что дистрибутивы для iOS и Android будут полностью пустыми. Проверка html-разметки с помощью отладчика Phonegap Build показывает, что элементы div для заголовка и содержимого остаются пустыми.

Смотрите изображение ниже:

Пустые Div

Я также изучил проблемы с репозиторием GitHub для UI-Router и придумал это. Хотя кажется, что это относится только к элементам ui-sref, а не к элементам ui-view. Кто-нибудь еще сталкивался с этой проблемой или одним подобным? Рефакторинг с использованием традиционной угловой условной логики для рендеринга различных заголовков будет проблемой, которая, кажется, делает код менее читабельным / устойчивым. Спасибо!

10

angularjs cordova angular-ui-router phonegap-build

Источник

user701210 17 фев '14 в 22:26

2 ответа

Решение

Я знаю, что ответ был принят, но я хочу добавить еще одну возможную причину проблемы: убедитесь, что вы не включаете html5Mode и не играете с префиксом в вашей конфигурации (). Это была проблема для меня.

5

Источник

user1147504 17 июл '15 в 01:21

Другие вопросы по тегам angularjs cordova angular-ui-router phonegap-build

user3360979 27 фев '14 в 15:14 2014-02-27 15:14 · Accepted Answer · 2014-02-27 15:14

Quick awnser: проблема заключается в начальном слеше в URL вашего шаблона. Удалите все начальные косые черты, и вы должны быть готовы.

Пример: приведенная ниже выдержка из вашего кода

templateUrl:'/views/login.header.html'

Должен быть изменен на:

templateUrl:'views/login.header.html'

Объяснение: Начальная косая черта делает путь относительно корня. Когда вы тестируете в браузере index.html вероятно на http://localhost/index.htmlпоэтому просьба /views/login.header.html решает в http://localhost/views/login.headers.html это нормально.

С другой стороны, когда вы тестируете приложение, сгенерированное phonegap, index.html вероятно на file:///android_asset/www/index.htmlпоэтому запрос разрешается file:///views/login.headers.html который не существует Если вы удалите начальную косую черту из URL, путь станет относительно того, где вы находитесь, и запрос разрешится file:///android_asset/www/views/login.headers.html и это должно работать.