分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 使用Angular UI-Router与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','content':{
                templateUrl: '/views/tour.html',controller: 'TourController'
            }
        }

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

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

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

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

    }).
    state('buildingTourratings',{
        url:'/buildingTour/:tourId/ratings','content':{
                templateUrl:'/views/ratings.html',controller:'ratingsController'
            }
        }

    });
});

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

见下图：

我还研究了UI路由器的github repo的问题,并提出了this.虽然这似乎只适用于ui-sref元素而不是ui-view元素.有谁遇到这个问题还是一个类似的？使用传统角度条件逻辑来重构不同的标题将是一个痛苦,似乎使代码不太可读/可持续.谢谢！

Quick awnser：问题是模板网址中的初始斜杠.删除所有的初始斜杠,你应该很好去.

示例：您的代码下面的摘录

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可能位于文件：///android_asset/www/index.html,因此请求将解析为file：/// views / login. headers.html不存在.如果从url中删除初始斜线,路径将相对于您所在的位置,并且该请求将解析为file：///android_asset/www/views/login.headers.html,它应该可以正常工作.