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.
Related
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
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.
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 want to use google analytics in my hybird application by using follows code in the index.html page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, 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>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
</head>
<body>
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxx-x');
ga('send', 'pageview');
</script>
<h1>HelloWorld!</h1>
</body>
</html>
But in the google analytics real-time overview page, I cannot see anything at there.
Anybody knows how to archive it?
Try this that should work (it works for me)
Put this before the </body> tag (notice that the tag is the closing one, so the <script> is inside the body.
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
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";
}
}])