AngularJS doesn't compile on older mobile devices

Question

I have been using use angularjs for a month, and I like it a lot. In the past I was always able to fix problems by my own, but now there's a problem I want to ask you to help me.

My homepage works on IE, Chrome and Firefox. Even on all new mobile phones. But not on older ones. I tested it with a HTC Desire (Android 2.2) with different browsers.

The Index.html:

<!doctype html>
<html lang="de" ng-app="myapp">
    <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link rel="stylesheet" href="css/app.css"/>
    </head>
    <body>
    <div id="wrapper">
        <div id="header" ng-controller="HeaderCtrl">
        <ng:include src="'partials/header.html'"></ng:include>
        </div>
        <div id="content">
        <ng:view></ng:view>
        </div>

        <div id="footer" ng-controller="FooterCtrl">
        <ng:include src="'partials/footer.html'"></ng:include>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" ype="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
    <script src="lib/angular-ui/angular-ui.js"></script>
    <script src="js/app.js"></script>


    <!-- Controller -->
    <script src="js/ctrl/PageCtrl.js"></script>
    <script src="js/ctrl/HeaderCtrl.js"></script>
    <script src="js/ctrl/FooterCtrl.js"></script>

    </body>
</html>

The app.js: ( my Module)

'use strict';

angular.module('myapp', ['myapp.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'partials/page1.html', controller: PageCtrl, reloadOnSearch: false});

    $routeProvider.when('/listing', {templateUrl: 'partials/page2.html', controller: PageCtrl, reloadOnSearch: false});

    $routeProvider.otherwise({redirectTo: '/'});
  }]);

I tested a lot of cases and my guess is that the mobile device doesn't execute the angular.module('myapp', ['myapp.directives']) .

I tested a manuell bootstrap for compiling the webside as well.

This could be the same issue, but in my case, there is no phonegap. angular.js doesn't work ng-view tag in PhoneGap

score 1 · Answer 1 · answered Feb 03 '13 at 19:41

1

Does it work if instead of using the ng:include and ng:view tags you instead use the attribute method:

<div ng-include> and <div ng-view></div>

answered Feb 03 '13 at 19:41

Will Vincent

331
2
6
10

Thank you for your answer. But it doesn't work with your code – user2035944 Feb 10 '13 at 17:25

score 1 · Answer 2 · answered Aug 01 '13 at 14:38

I'm developing a site with AngularJS, and it works very well on a HTC Desire on Android 2.1, as well as a Blackberry bold and a Samsung Galaxy with Android 2.2.

I also used the technique mentioned by Will Vincent, to ensure better compatibility with browsers. I do not understand why it does not work for you.

Perhaps the problem is coming from the attribute '['myapp.directives']' which could be renamed if you use an obfuscator?

AngularJS doesn't compile on older mobile devices

2 Answers2