I am trying to create a login page, where a user is redirected if they are not logged in.
In my controller I have a pushPage('login.html') in my controller LoginController() however it seems to be redirecting in an endless loop (i.e. login.html page just keeps reloading and index.html appears for a fraction of a second) not sure why ..
LoginController()
app.controller('LoginController', ['$scope', '$http', function($scope,$http) {
if(!checkLogin()) {
myNavigator.pushPage('login.html');
}
function checkLogin() {
//temporariry return true;
return false;
}
}]);
Index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script src="js/roundProgress.js"></script>
<script>
var app = ons.bootstrap('app', ['onsen','angular-svg-round-progress']);
</script>
<script src="js/jquery.js"></script>
<script src="js/cortisol.js"></script>
<script src="js/circular.js"></script>
<script src="js/settings.js"></script>
<script src="js/checkLogin.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.sparkline.min.js"></script>
</head>
<body >
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</body>
</html>
Related
The web app works very well. But when I use cordova/ionic to build the mobile apps, a blank page appears.
<!DOCTYPE html>
<html lang="en" >
<head>
<title>app</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
<link rel="stylesheet" href="assets/style/app.css"/>
<link rel="stylesheet" href="assets/style/map.css"/>
<link rel="stylesheet" href="assets/style/dynamic-height.css"/>
<link rel="stylesheet" href="assets/style/search-box.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
<script src="src/ui/fabCtrl.js"></script>
<script src="src/ui/autoComplete.js"></script>
<script src="src/map/map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='bower_components/lodash/dist/lodash.js'></script>
<script src='bower_components/angular-simple-logger/dist/angular-simple-logger.js'></script>
<script src='/bower_components/angular-google-maps/dist/angular-google-maps.js'></script>
<script src="/src/map/dynamic-map-height.js"></script>
<script src="src/map/angular-google-maps_dev_mapped.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script>
<script src="/src/dev_deps.js"></script>
<script src="src/map/search-box-ngmodel.js"></script>
</head>
And the map div has been added in the html body. It is an example of angular-google-maps.
<div data-ng-controller="ctrl" ng-hide="true">
<ui-gmap-google-map id="map"
center="map.center"
pan="map.pan"
zoom="map.zoom"
draggable="true"
refresh="map.refresh"
options="map.options"
events="map.events"
bounds="map.bounds">
<ui-gmap-map-control template="draw.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></ui-gmap-free-draw-polygons>
</ui-gmap-google-map>
</div>
I don't know where is going wrong. All the dependencies are right. And there are no errors in the console of Chrome.
ionic automaticly install content-security-policy plugin. Probably you are not using it. If it is not installed, you can install it https://github.com/apache/cordova-plugin-whitelist
And then try to add this line to index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://*.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com" />
Which allows your application to access google map remote scripts.
Firstly, make sure your js library dependecies are in the right order.
In your case, you are using an angular-google-map example of ploygons generator. Actually this example does not work properly in the cordova project. Try another example, I think you map will display.
I have a Monaca app with ONSEN UI . it is build with angularJS.
I am trying to access the Monaca cloud using angular in my app.
My index.html looks like. I incuded the monaca-cloud-angular.js
as described in document
http://monaca.mobi/en/blog/lets-make-an-angularjs-module-for-monaca-backend/
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<script src="js/monaca-cloud-angular.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<ons-navigator var="QubecNavigator" page="welcome.html">
</ons-navigator>
</body>
</html>
Welcome page has a welcomecontroller. and in angular i defined like this.
(function() {
var app = angular.module('myApp', ['onsen','angularRandomString','monaca.cloud']);
app.controller('welcomeController',function($scope,$http,$httpParamSerializerJQLike,MonacaBackend){
ons.ready(function() {
// Add another Onsen UI element
console.log('I am here in Welcome');
MonacaBackend.User.register('12345678','admin').then(
function(result){
console.log(result);
$scope.result = result;
},
function(error){
console.log(error);
}
);
});
});
};
I am not able to get any response from Monaca backend and user records are not registering in it.
I am trying to add a simple circular progress chart (https://github.com/crisbeto/angular-svg-round-progressbar) but it doesnt seem to work with Onsenui. Im using Onsen v1.3.8 - 2015-07-27.
I added the script correctly and also added 'angular-svg-round-progress' to my modules... so really struggling to figure out whats wrong...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://*.googleapis.com https://*.cloudflare.com 'unsafe-inline'; script-src 'self' http://*.phonegap.com https://*.googleapis.com https://*.cloudflare.com http://*.elasticbeanstalk.com https://*.monaca.mobi:8080 'unsafe-inline' 'unsafe-eval'">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="components/loader.js"></script>
<script src="js/roundProgress.min.js"></script>
<script>
var app = ons.bootstrap();
</script>
<script> angular.module('app', ['onsen','angular-svg-round-progress'])</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/cortisol.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-page>
<ons-tabbar position="top" >
<ons-tabbar-item page="dashboard.html" style="margin-top:20px"><span style="margin-top:20px"><img src="img/icon.svg" width="34"/></span></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
<ons-tabbar-item page="settings.html" icon="ion-android-settings"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</body>
</html>
Page:
<ons-page>
<ons-toolbar fixed-style>
<div class="center">Dashboard</div>
</ons-toolbar>
<ons-row style="margin-top: 20px; text-align: center;" >
<ons-col >
<div
round-progress
max="max"
current="current"
color="#45ccce"
bgcolor="#eaeaea"
radius="100"
stroke="20"
semi="true"
rounded="true"
clockwise="false"
responsive="false"
duration="800"
animation="easeInOutQuart"
animation-delay="0"></div>
</ons-col>
</ons-row>
</ons-page>
You do not load the module in your the app variable, but in some other angular environment.
var app = ons.bootstrap('app', ['onsen','angular-svg-round-progress']);
should do the trick. Here is a working codepen script: http://codepen.io/anon/pen/PZEmEy.
I am using cordova to develop an android application and try angularjs with it. When I try the application with browser its working but when I try the application on the android emulator I am only getting Connecting to Device.
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady,false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
angular.bootstrap(document, ['HelloWorld']);
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
app.initialize();
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app" ng-controller="HomeCtrl">
<h1 ng-bind="name">Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<div style="margin-top:10px;">
<button ng-click="process()">Click Here</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
/**
* Module
*
* Description
*/
angular.module('HelloWorld', []).controller('HomeCtrl', ['$scope', function($scope){
$scope.name = "Welcome TO Cordova";
$scope.process = function(){
$scope.name = "Welcome Mr. Ddeveloper";
}
}])
</script>
</body>
Error while executing the above snippet:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback
Uncaught Error: [$injector:modulerr]
Try the following way:
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<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">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app" ng-controller="homeCtrl">
<h1 ng-bind="name">Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<div style="margin-top:10px;">
<button ng-click="process()">Click Here</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/homeController.js"></script>
</body>
</html>
In homeController.js
angular.module('HelloWorld', []).controller('homeCtrl', ['$scope', function($scope){
$scope.name = "Welcome TO Cordova";
$scope.process = function(){
$scope.name = "Welcome Mr. Ddeveloper";
}
}])
This is the error msg.
Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (loader.js:1450)
at window.DoorLock.DoorLock.lock.unlock (loader.js:1450)
at Scope.parent.$get.Scope.$broadcast (loader.js:1444)
...
index.html
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src = "./js/prog.js" ></script>
</head>
<body ng-app = "magic_land" >
<ons-navigator var="captain" page="list.html">
</ons-navigator>
</body>
</html>
...
list.html
<div >
<ons-toolbar>
<div class = "center">All todoz</div>
</ons-toolbar>
<ons-list>
<ons-list-item>Apple</ons-list-item>
<ons-list-item>Banana</ons-list-item>
<ons-list-item>Carrot</ons-list-item>
</ons-list>
<p> {{5+5}} </p>
</div>
...
prog.js
var magic_land = ons.bootstrap('magic_land', ['onsen']);
Where is this error coming from?
Before
<body ng-app="magic_land" ng-controller = "magic_action">
<ons-navigator var="captain" page="list.html" >
</ons-navigator>
</body>
After
<body >
<ons-navigator var="captain" page="list.html" ng-app="magic_land" ng-controller = "magic_action" >
</ons-navigator>
</body>
Now that error is gone!
I know, this code is different from the question , but it was a tough error so i had to swap and rearrange my codes to find the source of error. Good luck!