Mobile Angular ng-view doesn't work on PhoneGap App

Question

I'm trying to do my first mobile app, this using Mobile Angular and PhoneGap.

The problem now is that the template files won't load in ng-view on the PhoneGap test app on the phone.

I know this has been up earlier:

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

But I have tried to add aHrefSanitizationWhitelist() , didn't helped.

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. 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 // :

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

Mobile Angular ng-view doesn't work on PhoneGap App

Question

1 answers

solution1
1 ACCPTED 2016-11-24 12:04:50

Mobile Angular ng-view doesn't work on PhoneGap App

Question

1 answers

solution1 1 ACCPTED 2016-11-24 12:04:50

solution1
1 ACCPTED 2016-11-24 12:04:50