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:
Related
So I am using this plugin: http://ngcordova.com/docs/plugins/pushNotificationsV5/ Which is cordovaPushV5 and I am trying to get my device token to send to my nodejs server. Here is my code:
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($http, $cordovaPushV5) {
var options = {
android: {
senderID: "12345679"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
};
// initialize
$cordovaPushV5.initialize(options).then(function() {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function(data) {
// `data.registrationId` save it somewhere;
})
});
// triggered every time notification received
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
// e.message
});
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<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>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
When I run it in ionic serve (browser) i get this console error: ReferenceError: Can't find variable: PushNotification
Does anyone know what this means?
Comment above was 100% correct. That error only shows in the browser because this plugin only works on devices
I have installed all the component but also calendar is not displyaing.
I have downloaded moment manually and injected in app.js
module is:
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','ngCordova','angularMoment','mwl.calendar', 'ui.bootstrap'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
controller:
.controller('timesheetCtrl', function($scope,$cordovaCalendar) {
$scope.calendarView = 'week';
$scope.calendarDay = new Date();
$scope.tester = 'Is the Controller connecting';
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info',
startsAt: new Date(2013,5,1,1),
endsAt: new Date(2014,8,26,15),
editable: false,
deletable: false,
incrementsBadgeTotal: true
}
];
})
View (index.html)
<!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></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="lib/ui-bootstrap-tpls-1.2.2.min.js"></script>
<script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Timesheet.html:
<ion-view title="Timesheet">
<ion-content overflow-scroll="true" padding="true" class="has-header">
{{tester}}
<mwl-calendar
view="calendarView"
view-date="calendarDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
cell-is-open="true">
</mwl-calendar>
</ion-content>
</ion-view>
anybody know the solution of this problem?
I can tell you what I see at first sight. If your are using angular moment, which is build on top of moment.js you need to include that file as well.
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
Check the official doc for angular moment, everything is explain there. Good luck !
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 have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose angular-google-maps
Now I try config it with ionic like this:
seems eveything is ok but why it dosen't work?
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</head>
<body>
<ion-header-bar class="bar-dark" >
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
$scope.options = {scrollwheel: false};
});
</SCRIPT>
</body>
</html>
You missed some stuff:
the link to angular-simple-logger.js (angular-google-maps has a dependency)
the CSS height for angular-google-map-container (see http://angular-ui.github.io/angular-google-maps/#!/use bullet number 7)
to convert raw.github.com to rawgit.com when linking directly to JS libraries on GitHub.
Here is the working snippet:
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<style>
#map_canvas {
width: 100%;
height: 100%;
}
.angular-google-map-container { height: 400px; }
</style>
</head>
<body>
<ion-header-bar class="bar-dark">
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 51.219053,
longitude: 4.404418
},
zoom: 14,
options: {
scrollwheel: false
}
};
});
</SCRIPT>
</body>
</html>
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";
}
}])