Angular JS controller is not working in IOS 14. But its working below IOS 14.
App shows white or blank screen. I don't have any issue with splash screen.
Controllers and templates are working fine in Android version and in browser.
I am developing IOS app using Cordova and Angular JS.
Below are the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/developer.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="css/nprogress.css"> <!-- Infinite Scroll -->
</head>
<body ng-app="raffle">
<div id="noNetId"></div>
<div ng-controller="mainCtrl">
<div ng-view></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Spinner JS -->
<script src="js/spin.js"></script>
<script src="js/angular-spinner.js" type="text/javascript"></script>
<!-- Spinner JS -->
<!-- Infinite Scroll -->
<script src="js/nprogress.js"></script>
<script src="js/infinite-scroll.js"></script>
<!-- Infinite Scroll -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('raffle', ['raffle.services', 'ngRoute', 'angularSpinner', "infinite-scroll"]).run(function(DB) {
DB.init();
});
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/login", {
templateUrl: "views/login.html",
controller: "loginCtrl"
})
.when("/", {
templateUrl: "views/list.html",
controller: "listCtrl"
})
});
angular.module('raffle.config', [])
.constant('DB_CONFIG', {
name: 'testdatabase',
tables: []
});
angular.module('raffle.services', ['raffle.config'])
// DB wrapper
.factory('DB', function($q, DB_CONFIG) {
var self = this;
self.db = null;
self.init = function() {
// Use self.db = window.sqlitePlugin.openDatabase({name: DB_CONFIG.name}); in production
//self.db = window.openDatabase(DB_CONFIG.name, '1.0', 'database', -1);
self.db = window.openDatabase(DB_CONFIG.name, '1.0', DB_CONFIG.name, 10000000);
angular.forEach(DB_CONFIG.tables, function(table) {
var columns = [];
angular.forEach(table.columns, function(column) {
columns.push(column.name + ' ' + column.type);
});
//self.query('drop table ' + table.name);
var query = 'CREATE TABLE IF NOT EXISTS ' + table.name + ' (' + columns.join(',') + ')';
self.query(query);
console.log('Table ' + table.name + ' initialized');
});
};
self.query = function(query, bindings) {
bindings = typeof bindings !== 'undefined' ? bindings : [];
var deferred = $q.defer();
self.db.transaction(function(transaction) { //alert(query);
transaction.executeSql(query, bindings, function(transaction, result) {
deferred.resolve(result);
}, function(transaction, error) { //alert(error);
deferred.reject(error);
console.log(error);
});
});
return deferred.promise;
};
self.fetchAll = function(result) {
var output = [];
var len = result.rows.length;
if (len > 0) {
for (var i = 0; i < result.rows.length; i++) {
output.push(result.rows.item(i));
}
}
return output;
};
self.fetch = function(result) {
var len = result.rows.length;
if (len > 0) {
return result.rows.item(0);
} else {
return false;
}
};
return self;
});
alert("Test"); //working
app.controller('mainCtrl', function($scope, $location, $timeout, DB, $http, $rootScope, $route, usSpinnerService) {
alert("Main controller"); //not working
});
app.controller('listCtrl', function($scope, $location, $timeout, DB, $http, $rootScope, $route, usSpinnerService, $routeParams) {
alert("List controller"); //not working
});
list.html
<h1>List</h1>
<p>Some content goes here...</p>
Please help me. Any help should be appreciated. Thanks in advance.