Question

我有一个在windows平板电脑上的windows visual studio中创建的bootstrap / angular js ui-router应用程序。最初需要的是为Windows用户提供应用程序，现在是所有设备都需要的。

在为浏览器创建应用程序后，我能够将其导入Visual Studio for cordova。我在Windowsx64中测试了一切 - 本地机器设置。我尝试将我的iphone插入平板电脑以测试应用程序的iOS版本，但我从来没有这样做。所以我尝试使用Visual Studio附带的Ripple模拟器进行测试。简单的起始页面和任何其他应用程序可以在不同的设备上运行，但只有这个特定的应用程序ui-router和样式不会转移，也不会出现在iOS和Android上。在iOS或Android模式下，不会显示任何错误日志。

应用背后的代码：的index.html

<!DOCTYPE html>
<html ng-app="routerApp">
<head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <!-- STYLE SHEETS-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Clinical Cases Program</title>
</head>
<!-- apply our angular app to our site -->
<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" ui-sref="landing">Clinical Cases App</a>
            </div>
        </div>
    </nav>

    <h1>The device is running</h1>

    <!-- MAIN CONTENT -->
    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div class="container">
        <div ui-view></div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>

    <!-- SCRIPTS -->
    <script type="text/javascript" src="scripts/angular.js"></script>
    <script type="text/javascript" src="scripts/ui-router.js"></script>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>

的script.js

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
		// HOME VIEWS =================================
        	.state('landing', {
        	    url: '/home',
        	    templateUrl: 'templates/partial-landing.html'
        	})

        // FILTERS VIEWS ========================================
        .state('filters', {
            url: '/filters',
            templateUrl: 'templates/partial-filters.html',
            controller: 'FilterToggleController',
            controllerAs: 'vm'
        })

        // CASES VIEWS =================================
        .state('cases', {
            url: '/cases',
            templateUrl: 'templates/partial-cases.html',
            controller: 'CasesController',
            controllerAs: 'vm'
        });

});

//"myApp" is the your module
routerApp.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appx-web|x-wmapp0):|data:image\//);
}]);

Visual Studio或Cordova中是否有特定文件夹覆盖这些样式/脚本？ Ripple模拟器有什么问题吗？

附件是原始Windows应用以及其他iOS和Android Ripple的屏幕截图。

Windows x64 - 本地计算机

Android - Ripple-Nexus（Galaxy）

Android Ripple - Nexus 7（平板电脑）

iOS - Ripple iphone 5

iOS - Ripple ipad 3

Angular ui-router在Cordova Ripple iOS和Android设备中不起作用

0 个答案: