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";
}
}])
Related
contact.js --- this is angular file. i am trying to make my contact app .
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
var rel = new Firebase('https://mycontact-app007.firebaseio.com/contacts');
$scope.contacts = $firebaseArray(rel);
console.log($scope.contacts);
}]);
Index.html - this the index file
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mycontacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContact</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
showing ReferenceError- Firebase is not defined
at new (contacts.js:13)
i am trying to make CURD operation app
I think it has something to do with the way my files are ordered but I can't figure out which ones are causing the problem.
angular.module('app')
.controller('langCtrl', function($scope, languageService){
$scope.submit = function(model) {
console.log(model);
languageService.analyzeDocument(model)
}
});
<html lang="en" ng-app="app" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WIT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="images/computer.ico"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="langCtrl">
<div class="header">
RecommendHER
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
</body>
</html>
I put the index.html file and my controller in the snippet. I also have a service on the save level as app.js and the controller file. Here is the code:
angular.module('app')
.service('languageService', function($resource) {
var apiUrl = 'http://xxx.compute-1.amazonaws.com';
var languageResource = $resource(apiUrl + {}, {
analyzeDocument: {
method: 'POST',
url: apiUrl + '/analyze_document?file=:text'
},
analyzeWord: {
method: 'POST',
url: apiUrl + '/recommend?word=":word"'
}
});
return {
analyzeDocument: function(data) {
return languageResource.analyzeDocument({data:text}).$promise;
},
analyzeWord: function(data) {
return languageResource.analyzeWord({data:word}).$promise;
}
};
});
Here is my app.js file:
angular.module('app', [
]);
You need to add empty dependencies to your module,
angular.module('app',[])
EDIT
Change the order in index.html to make your module load first,
<script src="app.js"></script>
<script src="languageService.js"></script>
<script src="langCtrl.js"></script>
Have you defined the 'app' module with two parameters yet:
angular.module('app', []).run(function() {});
The one parameter version expects app to already exist in order for things to be included as part of the module.
Also, ensure that the app.js file is loaded first.
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 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>
I added the google map plugin to my project with this command:
cordova plugin add cordova-plugin-geolocation
after i use this tutorial http://codepen.io/ionic/pen/uzngt ,i use in my page index.html but when i move this code in other page this code is dosen't worked
in the page index.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
ionic/angularjs js
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
cordova script (this will be a 404 during development)
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/ngStorage.min.js"></script>
your app's js
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/Controllers/inscription.js"></script>
<script src="js/Controllers/Categories.js"></script>
<script src="js/Controllers/SousCategories.js"></script>
<script src="js/Controllers/Evenement.js"></script>
<script src="js/Controllers/RechercheEvent.js"></script>
<script src="js/service/services.js"></script>
google maps javascript
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
in the page carte.html
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above -->
<link href="/css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<script src="../lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="../js/ng-cordova-oauth.min.js"></script>
<script src="../js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="../js/ngStorage.min.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
<script src="../js/services.js"></script>
<!-- google maps javascript -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>
<body ng-controller="carteController">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
</html>
my controller app.js
facebookExample.controller('carteController', function($scope, $ionicLoading,$cordovaGeolocation,$compile) {
function initialize() {
console.log("fonction googleMap");
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
my error: