Использование Angular UI-Router с телефонной связью

В настоящее время у меня есть проект, построенный с помощью 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:{
            '[email protected]':{
                templateUrl:'/views/login.header.html'
            },
            '[email protected]':{
                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 для заголовка и содержимого заканчивается пустым.

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

Empty Divs

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

Ответ 1

Быстрый тэг: Проблема заключается в начальной косой черте в ваших шаблонных 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, что нормально.

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

Ответ 2

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