移动角度ng-view在PhoneGap应用程序上不起作用

Question

I'm trying to do my first mobile app, this using Mobile Angular and PhoneGap. 我正在尝试使用Mobile Angular和PhoneGap创建我的第一个移动应用程序。

The problem now is that the template files won't load in ng-view on the PhoneGap test app on the phone. 现在的问题是模板文件不会在手机上的PhoneGap测试应用程序的ng-view中加载。

I know this has been up earlier: 我知道这已经提早了：

https://stackoverflow.com/a/15648056/616341 https://stackoverflow.com/a/15648056/616341

But I have tried to add aHrefSanitizationWhitelist() , didn't helped. 但是我试图添加aHrefSanitizationWhitelist() ，没有帮助。

Edit: 编辑：

The file currently looks like this: 该文件当前如下所示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <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" />

    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" href="./css/mobile-angular-ui-hover.min.css" />
    <link rel="stylesheet" href="./css/mobile-angular-ui-base.min.css" />
    <link rel="stylesheet" href="./css/mobile-angular-ui-desktop.min.css" />

    <link rel="stylesheet" type="text/css" href="./css/index.css" />

    <title>Hello World</title>

</head>

<body ng-app="myApp">

    <div class="app">

        <!-- Top Navbar -->

        <div class="navbar navbar-app navbar-absolute-top">

              <div class="btn-group justified">
                <a href="#/page1" class="btn btn-navbar">Page 1</a>
              </div>

        </div>

        <!-- Bottom Navbar -->

        <div class="navbar navbar-app navbar-absolute-bottom"></div>

        <!-- App Body -->
        <div class="app-body">

            <div class="app-content">

              <ng-view></ng-view>

            </div>

        </div>

    </div><!-- ~ .app -->

    <!-- Modals and Overlays -->
    <div ui-yield-to="modals"></div>

</body>

<!-- Libs -->
<script src="cordova.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>

<script src="/js/mobile-angular-ui.min.js"></script>
<script src="/js/mobile-angular-ui.gestures.min.js"></script>

<!-- App -->
<script>
var app = {
    initialize: function()
    {
        this.bindEvents();
    },
    bindEvents: function()
    {
        document.addEventListener('deviceready', this.onDeviceReady, true);
    },

    onDeviceReady: function()
    {
        angular.element(document).ready(function()
        {
            angular.bootstrap(document, ['myApp']);
        });
    },
};


angular.module('myApp', ['ngRoute']).config(function($routeProvider)
{
    $routeProvider
    .when('/', {
        templateUrl: './views/page1.html'
    })
    .when('/page1', {
        templateUrl: './views/page1.html'
    });

});

app.initialize();
</script>

</html>

Answer 1

SOLVED!: 解决了！：

I found out the problem myself. 我自己发现了问题。 I started by test if the angular even was loaded. 我开始测试是否加载了angular 。 Which it wasn't on the mobile. 它不在手机上。 That helped me a lot since I now knew the problem wasn't about routing, it's about angular not being loaded. 这对我很有帮助，因为我现在知道问题不在于布线，而在于角度未加载。

And the solution was to add https: before // : 解决方案是在//之前添加https: ：：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>

Edit: 编辑：

You can also keep it local: 您还可以将其保留在本地：

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>

移动角度ng-view在PhoneGap应用程序上不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-11-24 12:04:50

移动角度ng-view在PhoneGap应用程序上不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-11-24 12:04:50

解决方案1
1 已采纳 2016-11-24 12:04:50