How to use jQuery within Zurb Foundation for Apps?

282 Views Asked by At

Zurb foundation for apps uses angular.js and I cannot find a way to override this and be able to use jQuery (or Javascript) in my application.

My head file looks like this

<link href="./assets/css/app.css" rel="stylesheet" type="text/css">
<script src="./assets/js/foundation.js"></script>
<script src="./assets/js/templates.js"></script>
<script src="./assets/js/routes.js"></script>
<script src="./assets/js/app.js"></script>

I have edited the gulp.js file to look like this:

  // These files are for your app's JavaScript
  appJS: [
  'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
  'node_modules/autosize/src/autosize.js',    
  'client/assets/js/app.js',
  ]

So for example: If I would like to use something like this:

jQuery(window).scroll(function() {     
    var scroll = jQuery(window).scrollTop();
    if (scroll > 140) {
        jQuery('body').addClass('active');
    }
    else {
        jQuery('body').removeClass('active');
    }   

At this point I get major errors such as:

app.js:17SyntaxError: Unexpected token ','. Default values in destructuring parameters are currently not supported. foundation.js:9253Error: [$injector:modulerr] Failed to instantiate module application due to: [$injector:nomod] Module 'application' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Can anyone explain how I can implement jQuery functions within this project?

0

There are 0 best solutions below