I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic
Related
I am trying to build a demo of model-viewer using a simple box object. It works fine on iOS/Safari, but I am unable to get this to work on Android. On Android, it will not activate the camera, just shows the model in blank space, the model can be moved around. I have tried using multiple models, including ones I have pulled from the internet, that are in working demos. Here is the complete HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.1.3/webcomponents-loader.js"></script>
<script src="https://unpkg.com/intersection-observer#0.5.1/intersection-observer.js"></script>
<script src="https://unpkg.com/resize-observer-polyfill#1.5.0/dist/ResizeObserver.js"></script>
<script src="https://unpkg.com/fullscreen-polyfill#1.0.2/dist/fullscreen.polyfill.js"></script>
<script src="https://unpkg.com/#magicleap/prismatic/prismatic.min.js"></script>
<script src="https://unpkg.com/focus-visible#5.0.2/dist/focus-visible.js" defer></script>
<title>Model Viewer Demo</title>
</head>
<body>
<h1>WebAR Demo</h1>
<p>A Basic demo of WebAR using Google's model-viewer component.</p>
<div id="card">
<model-viewer alt="its just a box"
src="assets/BoxTest.glb"
ios-src="assets/BoxTest.usdz"
background-color="#afe"
shadow-intensity="1"
camera-controls
interaction-prompt="auto"
ar
quick-look-browsers="safari chrome">
</model-viewer>
</div>
<script type="module" src="https://unpkg.com/#google/model-viewer#v0.6.2/dist/model-viewer.js">
</script>
<script nomodule src="https://unpkg.com/#google/model-viewer#v0.6.2/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am at a complete loss as to why it doesn't work and to what I need to try next.
Turns out I was using simpleHTTPServer to serve it and it for some reason was the cause of the issue. I assume it didn't support the MIME type for the gltf file.
I was working on some project and here is "index.html" file of my Angular project.
<!doctype html>
<html ng-app="templateApp">
<head>
<meta charset="utf-8">
<title> MEAN project template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- including App scripts -->
<!-- JQuery -->
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- App scripts -->
<script type="text/javascript" src="configs/app_setup.js">
</script>
</head>
<body>
</body>
</html>
and my project hierarchy as following:
client (contains: configs(folder) & index.html )
bower_components
my curious question here: what are the rules for script tags i expected the above "bower_components" path should not work but it works well.
and the above path and the following one are working without problems, so how that happened although they are different ??!!
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
it seems by default it looks into the root project directory, and then check for relative paths.
This one would make the directory go up one level from the directory that your index.html is located in
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
Where as the following one would make the folder bower_componets be in the same directory as your index.html
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js">
</script>
Hi guys can you help me I'm just starting to learn angularjs. How to deal with these errors
app.js:6 > Uncaught ReferenceError: angular is not defined
angular.min.js:6 > Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector/modulerr?p0=ajs&p1=Error%3A%20…%2F%2FC%3A%2FUsers%2FABK3%2FDesktop%2Fajs%2Fjs%2Fangular.min.js%3A18%3A139)
Thanks in advance guys
var app = angular.module('ajs', ['ui.router'])
<!DOCTYPE html>
<html ng-app="ajs">
<head>
<meta charset="utf-8">
<title>AJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1 ui-view>Hi</h1>
</body>
<script src="app.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</html>
Make sure your scripts are loaded after angular so they can actually do something. The load order is important, for instance make sure to load jQuery before anything, almost all the libraries requires them to be previously loaded.
<!-- Load vendors -->
<script src="jquery/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- Load source code -->
<script src="app.js"></script>
You must put all of your script tags that calls angular BEFORE your app.js because your app.js needs angular.
Because here your file loads app.js then angular
Is there a way to have Webpack scan Javascript files for require("file.js") and require("file.css") and insert <script type="text/javascript"> and <link rel="stylesheet"> (respectively) to any HTML file that includes the root Javascript file?
For example. Given:
Main.html
<html>
<head>
<script type="text/javascript" src="main.js"></script>
[...]
Main.js
require("./login.js");
require("./login.css");
I expect to get this output:
Main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css"/>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="main.js"></script>
[...]
Bonus points: ability to require("login.scss") and end up with <link rel="stylesheet" type="text/css" href="login.css"/> (meaning, take into consideration the fact that SCSS files will get converted to CSS).
According to the author of Webpack, this feature does not exist yet.
I have filed this feature request: https://github.com/webpack/webpack/issues/754
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I'm a very new programmer with no experience with tabletools or swf paths whatsoever. I'm trying to implement Table Tools to print/export/etc but so far only print is working for me. Most solutions have said that means the swf path is incorrect. But I have no idea what to put as my swf path. Could anybody please help? Sorry for such a basic question. :(
Here are my plugins and script for dataTables:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
<script>
$(document).ready(function () {
$('#table_id').DataTable({
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
You can browse tabletools files available for cdn here: datatable tabletools plugin files
by visiting the link you will find version list, click one for example 2.2.2
so scroll down to the bottom and see magic:
swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls.swf
//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf