Where to include js libraries in Ionic?

Question

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

Solution 1

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.

Solution 2

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>

Solution 3

As nice listed by a user here https://github.com/ionic-team/ionic/issues/9422

1. Install latest ionic
2. Start your project
3. Go to /src/
4. open the assets folder
5. create a /js/ folder inside assets
6. copy your .js inside this js folder
7. goto /src/index.html
8. Add your path
9. Go to your typescript file of choice and declare var N;
10. N.yourFunction
11. ionic serve