CODEWITHSUNDEEP
requirejs
Nutsnuts Rnutsrnurts
Nutsnuts Rnutsrnurts

Reputation: 1

using ng-grid with angularjs & requirejs - "ReferenceError: jQuery is not defined"

My angularjs project works fine with requirejs. I want to use the nggrid tables but somewhere the bootstrapping is not happening correctly and i am getting the "ReferenceError: jQuery is not defined" in ng-grid.debug

Here is my configuration:

app.js : Adding ngGrid module as the dependent module

angular.module('MyApp', ['controllers', 'services',
    'filters', 'directives', 'ngGrid']);

main.app: i already see Jquery being a dependency which should have been loaded loaded 

require.config({
    paths: {
        jquery: 'vendor/jquery',
        angular: 'vendor/angular.min',
        domReady: 'vendor/domReady'
    },
    shim: {
        angular: {
            deps: [ 'jquery'],
            exports: 'angular'
        }
    }

});

require([
        'angular',
        'app',
        'domReady'
        'vendor/ng-grid.debug'

Upvotes: 0

Views: 1885

Answers (2)

user3676608
user3676608

Reputation: 23

Not only does the order of the libraries matter also if you are using Visual studio MVC & web API the @Scripts.Render("~/bundles/jquery") does not import the JQuery library immediately

Solution

Use the script tag and this will work out just fine

Example: Mine scripts in my layout:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js">     </script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>

<script src="~/Scripts/ng-grid.js" type="text/javascript"></script>

Upvotes: 0

metalkat
metalkat

Reputation: 620

In my experience, every time this error is thrown is because of the order you import the libraries. When I got this error, I had imported the ng-grid library with the other angular libraries, which was before jquery. Make sure it comes after both.

Upvotes: 1

Related Questions