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 !
Related
I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks
I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master
I used that plugin because that plugin also was implemented in a web version, so to be uniform in design.
I included that inside src/index.html with jquery
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
I want to execute this script on page load
$( '.js-float-label-wrapper' ).FloatLabel();
Here's my src/index.html 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">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<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>
<link href="build/main.css" rel="stylesheet">
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</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>
It works on web version but not in ionic. How do I implement that on ionic?
I want it like this fiddle -> https://jsfiddle.net/acrmktq3/
link jquery.js in your index.html:
<script src="assets/js/jquery-3.2.1.min.js"></script>
run in node:
npm install jquery
and import it in your page like:
import * as $ from "jquery";
Try adding your JavaScript code in the bottom of your body like this:
<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>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</body>
You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick.
Also, have you ever tried using this FloatLabel in a Ionic application? Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component:
declare var $: any; // declare this bellow your page imports to be able to use jQuery
Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<!-- Use the floating attribute to have your label to float when you focus on the input -->
<ion-input></ion-input>
</ion-item>
Hope this helps.
So I have been trying to load google in my app using this:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Webview</title>
<meta name="description" content="">
<meta name="author" content="Kitanga Nday">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" type="image/png" sizes="16x16" href="favicon.png">
<script src="kng.js"></script>
</head>
<body>
<div id="kontainer"> <!-- Kontainer div -->
<webview src="https://www.google.com/" width="640" height="480"></webview>
</div>
</div>
</body>
I then tried sandboxing the page and running it in the main html file using the iframe tag still nothing.
Maybe you missed the fact that using <webview> requires a "webview" permission in the manifest.
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
I have a page that implemented using bootstraptour (a product tour page). It's working fine in large screens, like desktops and laptops.
But when I open that page in mobile device the entire UI is breaking, so I have found that there is no viewport in header.
So i have added following tag in header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and after that UI is much better but still breaking a lot. So is there anything that I need to add?
This is my page head links:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/Chart.js"></script>
<!-- JavaScript -->
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/bootstrap-tour.js"></script>
<script src="//dujl9qf395ztu.cloudfront.net/js_new/demo.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Hachi| Product Tour</title>
<!-- Bootstrap core CSS -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap.css" rel="stylesheet">
<link href="//dujl9qf395ztu.cloudfront.net/css_new/tour_app.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="//dujl9qf395ztu.cloudfront.net/css_new/bootstrap-tour.min.css" rel="stylesheet">
<script src="//dujl9qf395ztu.cloudfront.net/js_new/jquery-1.9.1.js"></script>
</head>