i have my application built around angularjs#1 using gulp, my final output is 2 javascript files and 2 css files.
this final index.html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<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="lib.css">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Momen</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body layout="row" ng-include="'common/body.html'" ng-controller="AppCtrl as app">
</body>
</html>
my question is sometimes i need to push a small update chaning couple lines in app.js
note that i use templateCache so all my html files are also inside my app.js
what is the best way to update app.js on the fly without resubmitting app to apple ?
Related
I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?
I have create a .js file inside my /www/js/N.js after that I include in the index.html like src="assests/js/getImage.js"> and the script is before the build/polyfills.js
After that, what should I do to get my .js file working ??
here is my source code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/js/getImage.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
May I know is there any import js to ts tutorial available ??
I found a lot on youtube but none of them meet my requirement. !!
Thanks in advance, please help me. Thanks !
I am trying to build an AngularJS to-do list app for android using Cordova. The page loads fine if I open it in the browser, but I can't get any any script to run in the emulator, except for alert()s that I put in the global scope. Here is my code for the index.html page....
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>
<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="manifest" href="/manifest.json">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>To-do list</title>
</head>
<body>
<div class="app" ng-controller="ToDoListController">
<h1>Things to do.</h1>
<ul>
<li ng-repeat="item in list" ng-bind="item"></li>
</ul>
</div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../platforms/android/platform_www/cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And for the index.js page:
$(document).ready(function(){
document.addEventListener('deviceready', function(){
});
angular.module('ToDo',[])
.controller('ToDoListController',['$scope',function($scope){
$scope.list = ["FOO","BAR"];
}]);
angular.bootstrap(document,['ToDo']);
$('ul').append('<li>Item appended</li>');
});
As I said, if I put an alert() in the global part if index.js, it will fire but nothing else will. The angular bootsrap and the jquery append function will not execute whether inside the $(document).ready() or outside of it. Everything works fine in a browser. Any help is appreciated.
Via Kerri Shotts, in the above comment:
You need everything you're going to source to be local to your www directory. Your files in node_modules aren't going to be copied over, and will be missing in your app. Hence part of your problem. The other problem is that you should only ever source cordova.js using src="cordova.js"; the appropriate file will be supplied when you build the app.
This worked. Thank you!
I'm very new to javascript and I started to make some practice with Phonegap.
I'm trying to call a plugin function within html but if I call it within a button it works fine:
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
while if I try to call it directly I get: "autoStart is not defined" in the console.
<script type="text/javascript">
cordova.plugins.autoStart.enable();
</script>
How can I call it into html without the button?
Update1:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<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" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
<div class="perspective">
<img id="box1"/>
<img id="box2"/>
</div>
<p id="date"></p>
<p id="time"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
jQuery(document).ready(function () {
//THE ERROR IS HERE
cordova.plugins.autoStart.enable();
});
</script>
</body>
</html>
When you created your cordova project, whether you did so via Command Line Interface or Phonegap Desktop, an app.js file should have been created as well.
Plugins can only be used after the device is ready, so you should put your code inside of the onDeviceReady() function inside of app.js.
I have just installed bitwasp and now i ran into this problem with a php generated html file, it doesnt load the CSS and the javascript because its pointed to the index.php.
Is there some fix in Php or need i to change my Apache server settings
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="open source bitcoin marketplace" />
<title>Welcome | BitWasp</title>
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://10.0.0.12/BitWasp/index.php/assets/css/style.css">
<!-- JavaScript -->
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/jquery-1.8.1.min.js"></script>
<script src="http://10.0.0.12/BitWasp/index.php/assets/js/bootstrap.js"></script>
</head>
Thanks in advance