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.
Related
I am beginner to the angularjs and learning it form one course on plural sight . During learning i was developing the small application . But i am getting error as below and not able to trace it . Please help .
Error :
angular.js:11706 TypeError: $q.resolve is not a function
at commitRoute (angular-route.js:716)
at Scope.$broadcast (angular.js:14889)
at afterLocationChange (angular.js:11550)
at angular.js:11536
at Scope.$eval (angular.js:14570)
at Scope.$digest (angular.js:14386)
at Scope.$apply (angular.js:14675)
at bootstrapApply (angular.js:1458)
at Object.invoke (angular.js:4219)
at doBootstrap (angular.js:1456)
Application Code :
app.js
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
})
.otherwise({
redirectTo: "/main"
});
});
}());
github.js
var github = function($http) {
var getUser = function(username) {
return $http.get("https://api.github.com/users/" + username)
.then(function(response) {
return response.data;
});
};
var getRepos = function(user) {
return $http.get(user.repos_url)
.then(function(response) {
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
};
var module = angular.module('githubViewer');
module.factory("github", github);
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x"
src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20">
</script>
<script data-require="angular-route#*" data-semver="1.6.2"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-
route.js"></script>
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
main.html
<div>
<form name="searchUserForm">
<input type="search" placeholder="Enter user to find" />
<input type="submit" value="Search" />
</form>
</div>
MainController.js
var app = angular.module("githubViewer");
app.controller("MainController", function($scope) {
$scope.searchUser = function(username) {
//pl
};
});
UserDetails.js
var app = angular.module('githubViewer');
app.controller('UserController', function($scope, $http,github) {
var onUserComplete = function(data) {
$scope.user = data;
github.getRepos($scope.user).then(onRepos, onError);
};
var onRepos = function(data){
$scope.repos = data;
}
$scope.username = 'angular';
$scope.repoSortedOrder ='-stargazers_count';
var onError = function(reason) {
$scope.error = "Could not fetch the data";
}
$scope.searchUser = function(username) {
github.getUser(username).then(onUserComplete, onError);
};
});
Please help with the above.
I'm following the same tutorial, I had the same error. I solved it by making sure that the routing module is exactly the same as the one in that tutorial (<script data-require="angular-route#*" data-semver="1.2.14" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>), there is a possibility that the one you have is a later version. This should work.
I am trying to learn AngularJS, I have View1 which uses simpleController, but AngularJS (1.6) is throwing an error and I can't find the right syntax to make it work.
My Repository is: https://github.com/tommcclean/Learning_Angular.
Error: ng:areq. Bad Argument. Argument 'simpleController' is not a
function, got undefined
View1 contains...
<div ng-controller="simpleController as ctrl">
<h2>View One</h2>
<p>{{ ctrl.testValue }}</p>
</div>
simpleController contains...
"use strict";
(function () {
angular.module('demoApp').controller('simpleController', []);
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
});
demoApp is created by my routes.js file which is loaded first.
"use strict";
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'simpleController',
templateUrl: '../views/view1.html'
})
.otherwise({ redirectTo: '/view1' });
});
My main page which is the home of my "spa" contains...
<!DOCTYPE html>
<html>
<head>
<title>Sample Demo Application</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body ng-app="demoApp" class="container">
<h1>Welcome to my Sample Application</h1>
View 1
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="../app/initialise/routes.js"></script>
<script src="../app/controllers/simpleController.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Check out the .controller definition should have the function not an empty array as the second argument.
"use strict";
(function () {
angular.module('demoApp').controller('simpleController', simpleController);
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
});
"use strict";
var app = angular.module('demoApp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'simpleController',
controllerAs: 'ctrl',
templateUrl: '/view1.html'
})
.otherwise({ redirectTo: '/view1' });
});
(function () {
function simpleController() {
var self = this;
self.testValue = "Test Value";
self.updateValue = function () {
self.testValue = "Test Value Updated";
};
return self;
};
angular.module('demoApp').controller('simpleController', simpleController);
})();
<body ng-app="demoApp" class="container">
<h1>Welcome to my Sample Application</h1>
View 1
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script type="text/ng-template" id="/view1.html">
<div>
<h2>View One</h2>
<p>{{ ctrl.testValue }}</p>
</div>
</script>
</body>
I am a newbie in angularjs. My intention is to add this angularjs directive https://github.com/720kb/angular-datepicker to my app.js so that I can be able to select dates in one of my views buses.html.
My app.js file looks something like this:
My app.js file looks like this...
var busRest1 = angular.module("busReservator1", ["720kb.datepicker"]);
//dependency injection that fails
var busRest = angular.module("busReservator", ["ionic", "busRest1"]);
busRest.run(function($ionicPlatform, $state) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
document.addEventListener("resume", function() {
$state.go("home", {}, {location: "replace"});
}, false);
});
busRest.factory('myService', function(){
var savedData = {}
function set(data){
savedData = data;
}
function get(){
return savedData;
}
return {
set: set,
get: get
}
});
busRest.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: "templates/home.html",
controller: "homeCtrl",
})
.state("busList", {
url: "/busList",
templateUrl: "templates/busList.html",
controller: "busListCtrl",
cache: false
})
$urlRouterProvider.otherwise('/home');
});
busRest.controller("homeCtrl", ['$scope', function($scope){
}]);
busRest.controller('busListCtrl', ['$scope', 'myService2', function($scope, myService2) {
//declaring an array of transporters
$scope.transporters = [];
$scope.AddTransporter = function(){
transporters = [document.getElementById('transporter_agency').value, document.getElementById('transporter_vehicleType').value, document.getElementById('transporter_vehicleCapacity').value, document.getElementById('transporter_btnValue').value];
myService2.set(transporters);
};
}]);
busRest.controller('DataCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('js/datafile2.json').success(function (data) {
$scope.artists = data.artists;
$scope.albums = data.albums;
})
}]);
My index.html looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Bus Ticket Reservation</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- For the date picker css-->
<link href="src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
<!-- For the date picker js -->
<script src="src/js/angular-datepicker.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/forge.min.js"></script>
<script src="js/firebase.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="busReservator">
<ion-pane>
<ion-nav-bar class="bar-royal"></ion-nav-bar>
<ion-nav-view ></ion-nav-view>
</ion-pane>
</body>
</html>
When I save and run, the app breaks and the browser window is emptied
i have a sub web and this no have head, body etc, contain only the content and im calling with ng-route and show with ng-view, but if i call the web without route eq. localhost/secondtab.html all work fine, but if i call with route and ngview, the script dont work here i put the code.
var myApp = angular.module("myApp",['ngRoute']);
$url ="/load.php?stundent=<? echo $_GET["all"]; ?>";
myApp.factory('myService',function($http){
var getData = function() {
return $http({method:"GET", url:$url}).then(function(result){
return result.data;
});
};
return { getData: getData };
});
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'main.html',
controller : 'ItemsController'
})
// route for the home page
.when('/one', {
templateUrl : 'one.html',
controller : 'ItemsController'
})
// route for the about page
.when('/two', {
templateUrl : 'p/two.html',
controller : 'othercontroller'
});
});
myApp.controller('othercontroller', function othercontroller($scope,$http) {
...
});
myApp.controller('ItemsController', function ItemsController($scope,myService,$timeout,$http) {
...
}
extract main.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<head>
//load css
//load script(angularjs, routejs, jquery)
</head>
<body>
one
two
</body>
the one.html(this fail)
<script type="text/javascript">
if(typeof Muse == "undefined") window.Muse = {}; window.Muse.assets = {"required":["jquery-1.8.3.min.js", "museutils.js", "webpro.js", "musewpslideshow.js", "jquery.museoverlay.js", "touchswipe.js", "jquery.musepolyfill.bgsize.js", "jquery.watch.js", "musewpdisclosure.js", "jquery.musemenu.js", "index.css"], "outOfDate":[]};
</script>
<!-- CSS -->
.....
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
<!-- JS includes -->
<!--[if lt IE 9]>
<script src="scripts/html5shiv.js?4241844378" type="text/javascript"></script>
<![endif]-->
//content
.......
here a accordion menu
//content
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="p/scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
please help me
Is there any way to broadcast from $rootScope to modal window $scope?
My $rootScope is ApplicationController and I'm listening in there to socket.io event. When I handle this event I want to $broadcast to ChatController (modal window) $scope (which might be already opened so resolve won't help me here).
A quick example to demonstrate this issue:
index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-ui-bootstrap#0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ApplicationController">
<h1>Hello Plunker!</h1>
<input type="button" value="open modal" ng-click="openModal()">
<div ng-controller="NotModalController">
{{fields.field1}}
</div>
</body>
</html>
script.js:
(function() {
var app = angular.module("App", ["ui.bootstrap"]);
app.controller("ApplicationController", function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'chat.html',
controller: 'ModalController',
size: 'lg',
resolve: {
}
});
modalInstance.result.then(function() {
console.log('modal closed');
}, function() {
console.log('modal dismissed');
});
setTimeout(function() {
console.log('broadcasting event');
$scope.$broadcast('someEvent', 'broadcasted value');
}, 3000);
};
});
app.controller("NotModalController", function($scope) {
$scope.fields = {
field1: 'initial'
};
$scope.$on('someEvent', function(event, args) {
$scope.fields.field1 = args;
});
});
app.controller("ModalController", function($scope) {
$scope.fields = {
field1: 'initial'
};
$scope.$on('someEvent', function(event, args) {
$scope.fields.field1 = args;
});
});
})();
modalTemplate.html
<div>
{{fields.field1}}
</div>
the plunkr url : http://plnkr.co/edit/9xpwmleZJnAG66cGWcYO
Think you should use $rootScope.$broadcast instead $scope.$broadcast