个人中心
gpt4 book ai didi

angularjs - 在 Phonegap 中使用 Angular UI-Router

转载 作者：行者123 更新时间：2023-12-04 02:47:59 25 4
gpt4 key购买 nike

我目前有一个使用 Angular 构建的项目，我将其部署到 Phonegap Build 服务以创建 iOS 和 Android 发行版。最初，我使用的是 Angular 的内置路由服务。然而，嵌套多个 View 的需要促使我采用了 Angular UI-Router .我已经构建了一个简单的路由系统，它可以在通过 Web 浏览器进行本地测试并使用 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 发行版。使用 Phonegap Build 的调试器检查 html 标记显示标题和内容的 div 最终为空白。

见下图:

Empty Divs

我还研究了 UI-Router 的 github repo 上的问题，并提出了 this .尽管这似乎只与 ui-sref 元素有关，而不是与 ui-view 元素有关。有没有其他人遇到过这个问题或类似的问题？使用传统的 Angular 条件逻辑重构以呈现不同的 header 似乎会降低代码的可读性/可持续性。谢谢!

最佳答案

快速遮阳篷:问题是模板 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它应该工作。

关于angularjs - 在 Phonegap 中使用 Angular UI-Router，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21840531/

25 4 0
文章推荐： twitter-bootstrap - 按钮组中的 Bootstrap 3 垂直线
文章推荐： angular - 为什么只显示 Angular 异步管道绑定(bind)中字符串的最后一个字符？
文章推荐： crystal-reports - 如何在 Crystal 报表图表中显示月份名称？
文章推荐： objective-c - 防止 subarrayWithRange 中的 NSRangeException
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com