thanks for your time! I am battling to get any scripts running in the Ionic framework's sidemenu starter template. I have placed them everywhere (except where they're supposed to be, clearly) but to no avail. I have tried loading them before ionic and also using a lower version of jquery. I have built a decent mobile site with jquery that I've pushed through phonegap and it works perfectly but I would like to use Ionic as a personal challenge. However, I can't seem to get any of the scripts I'm using to work.
Do I include them in the main index file and if so, do they get loaded when each template instantiates? Or must I include them in each of the templates? If you could please be quite specific as to where in the folders I should place them (if indeed there is a specific place) and also where I should call the scripts.
I installed ionic using this yeoman generator https://github.com/diegonetto/generator-ionic if that helps.
If I have note been clear enough please comment and I will elaborate further.
Thank you for your patience - J
I know this is old, but for those who are struggling with this for Ionic 2, add script files to src/assets/scripts, then refer to them via a script tag in src/index.html (not the one in www). When it builds, everything in src/assets will be copied to www/assets, including your scripts. index.html will also be copied to www.
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/scripts/openpgp/openpgp.js"></script>
<script src="assets/scripts/openpgp/openpgp.worker.js"></script>
I would add any scripts such as jquery either just before or just after the script tag for cordova. This is in index.html located within the app/ directory of the project that running the yeoman generator created.
<!-- Place scripts such as JQuery here -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
Once you have placed the scripts here they will get called when the app runs, and libraries such as jquery will be available globally throughout the app. I hope this helps.
As nice listed by a user here https://github.com/ionic-team/ionic/issues/9422
Install latest ionic
Start your project
Go to /src/
open the assets folder
create a /js/ folder inside assets
copy your .js inside this js folder
goto /src/index.html
Add your path
Go to your typescript file of choice and declare var N;
N.yourFunction
ionic serve
Related
My css and js functionality dont load properly in VSC.
When I go live, it seems that it cannot find the files.
only when I refer to it from the project root will it work in css.
from src/main/webapp/ <script src="src/main/webapp/js/darkmode.js" type="text/javascript"></script>
in Intellij and Heroku web deployment it works from the webapp root:
from webapp/ <script src="/js/darkmode.js" type="text/javascript"></script>
The same applies to .css files.
And then I am not even talking about referring to REST resources on heroku, as this will work on tomcat local but not on heroku web with the same adress.
It seems my problems in vsc where down to loading in a larger project with Java, when I loaded only the webapp folder then things worked properly !
You can use drag and drop mouse files from project to working file ( VS Studio)
Or using "~"
<link href="~/Content/bootstrap-chosen.css" rel="stylesheet" />
I am sorry to ask this silly question. I am trying to use pathfinding.js (https://github.com/qiao/PathFinding.js/) in ionic for my navigation.html page (a partial file located in the www/templates/ directory) but it's not working with partials files except with index.html root file only. However, it gives me error if I use it in the index.html root file, maybe because it needs to draw a svg in the navigation.html page, but it could not find the navigation.html page since it is in the index.html (dependency with the navigation.html)
I am thinking to use bower, but can bower solve this problem?
In index file add the script tag to add scripts.
<script src="./templates/PathFinding.js/">`
It will get loaded.
However, if you use Bower.. Bower will only download the files to src folder .. then you need to manually add script tags for script into the index.html.
I downloaded MathJax from Github MathJax. Used MathJax-grunt-cleaner to reduce the size of the package. I then included the MathJax folder in my www folder. Inserted <script type="text/javascript" src="mathjax/MathJax.js"></script> in the head section of the index.html. Still, MathJax is not running on pages. Please let me know if there is any way to include 3rd Party js files in Ionic 2 Project.
MathJax rendering in Ionic 2 Application needs a Directive. Refer this Nice illustration by #PrithiviRajG
I have the following issue. I'm using Cordova. I have added "ngCrodova" ahead of "cordova.js"
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Added the plugins I needed. But in cordova object I am not having plugins attribute. Where as cordova plugin ls shows the list of included plugins.
Image of Cordova object and List of plugins I have in my project
What am I missing? Help please.
check cordova_plugins.js file which is inside assets folder. it show all plugins installed in project. check below image for reference
inculded angular-google-places-autocomplete in my project for places autocomplete using
bower install angular-google-places-autocomplete
shows an error in the console
Global `google` var missing. Did you forget to include the places API script?
following the kuhnza/angular-google-places-autocomplete documentation included below script manually in the index.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
then every works fine , but when moving to production app is build using grunt build then minified and uglified files are created the the same error reappears.
i think the manually added script is removed during building the app.
what to do to solve this issues.how to include this google places api in application properly.Thanks in advance
You need to move your script for google api call before your build:js in the index.html declaration