使用带有Phonegap的Angular UI-Router

I currently have a project built with Angular that I'm deploying to the Phonegap Build service to create iOS and Android distributions. Originally, I was using Angular's built in routing service. However, the need to nest multiple views facilitated my adoption of the Angular UI-Router. I've built a simple routing system that works when testing locally via a web browser and using Ripple Emulator.

我目前有一个使用Angular构建的项目，我正在部署到Phonegap Build服务来创建iOS和Android发行版。最初，我使用的是Angular的内置路由服务。但是，嵌套多个视图的需要促进了我对Angular UI-Router的采用。我已经构建了一个简单的路由系统，可以在通过Web浏览器本地测试并使用Ripple Emulator时工作。

The index.html is as follows:

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>

And the code for the routing

和路由的代码

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

    });
});

However, using the Phonegap Build service produces iOS and Android distributions that are completely blank. Inspecting the html markup with Phonegap Build's debugger shows that the div's for the header and the content end up blank.

但是，使用Phonegap Build服务会生成完全空白的iOS和Android发行版。使用Phonegap Build的调试器检查html标记显示标题和内容的div最终为空。

See the image below:

见下图：

使用带有Phonegap的Angular UI-Router

I've also looked into issues on the github repo for UI-Router and come up with this. Though that seems like it only pertains to ui-sref elements as opposed to ui-view elements. Has anyone else run into this issue or one similar? Refactoring using traditional angular conditional logic to render different headers will be a pain seems to make the code less readable/sustainable. Thanks!

我还研究了UI-Router的github repo上的问题并提出了这个问题。虽然这似乎只与ui-sref元素有关，而与ui-view元素有关。有没有其他人遇到过这个问题或类似问题？使用传统的角度条件逻辑重构以呈现不同的标题将是一种痛苦，似乎使代码更不易读/可持续。谢谢！

2 个解决方案

#1

Quick awnser: The problem is the initial slash in your template urls. Remove all initial slashes and you should be good to go.

快速扫描：问题是模板网址中的初始斜杠。删除所有的初始斜线，你应该好好去。

Example: the excerpt below from your code

示例：下面的代码摘录

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

Should be changed to:

应改为：

templateUrl:'views/login.header.html'

Explanation: The initial slash makes the path relative to the root. When you are testing on the browser the index.html is probably on http://localhost/index.html, so the request to /views/login.header.html resolves to http://localhost/views/login.headers.html which is ok.

说明：初始斜杠使路径相对于根。当您在浏览器上进行测试时，index.html可能位于http：//localhost/index.html上，因此对/views/login.header.html的请求将解析为http：//localhost/views/login.headers。 html哪个好。

In the other hand, when you are testing on the app generated by phonegap, the index.html is probably on file:///android_asset/www/index.html, so the request resolves to file:///views/login.headers.html wich doesn't exist. If you remove the initial slash from the url the path becomes relative to where you are and the request will resolve to file:///android_asset/www/views/login.headers.html and it should work.

另一方面，当您在phonegap生成的应用程序上进行测试时，index.html可能位于file：///android_asset/www/index.html，因此请求将解析为file：/// views / login。 headers.html哪个不存在。如果从URL中删除了初始斜杠，则路径将变为相对于您所在的位置，并且请求将解析为file：///android_asset/www/views/login.headers.html，它应该可以正常工作。

#2

I know the answer was accepted but I want to add another possible cause of the problem: Make sure you are not enabling html5Mode, and not playing with the Prefix on your config(). This was the issue for me.

我知道答案已被接受但我想添加另一个可能的问题原因：确保你没有启用html5Mode，而不是在你的config（）上使用前缀。这对我来说是个问题。

#1

Quick awnser: The problem is the initial slash in your template urls. Remove all initial slashes and you should be good to go.

快速扫描：问题是模板网址中的初始斜杠。删除所有的初始斜线，你应该好好去。

Example: the excerpt below from your code

示例：下面的代码摘录

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

Should be changed to:

应改为：

templateUrl:'views/login.header.html'

#2

我知道答案已被接受但我想添加另一个可能的问题原因：确保你没有启用html5Mode，而不是在你的config（）上使用前缀。这对我来说是个问题。

秒客网

使用带有Phonegap的Angular UI-Router

2 个解决方案

#1

#2

#1

#2

相关文章