AngularJS complains that initialization not defined for jquery

Question

I am getting the below error when loading my page.

Error: initialize is not defined @http://localhost:8082/js/vendor/jquery-1.11.2.js line 339 > eval:4:3

I want to replace the jqLite with the full version of jquery. I have read several stackoverflow questions on this subject and they imply that all that is required is to load jquery before angularjs. I have done this by simply moving the declaration for jquery above the angular.js. When I do this that is when the above error occurs. It does not give the error when I move the jquery below angularjs but then I cannot use such things as angular.element.

What am I doing wrong?

As far as loading the javascript for each library all I am doing is.

<script type='text/javascript' src="js/vendor/jquery-1.11.2.js"></script>
<script type='text/javascript' src="js/vendor/angular.js"></script>

as far as using jquery instead of lqlite, I am simply trying to use angular.element

var someElement = angular.element('#someelement');

I read a blurb to load jquery before DOMContentLoaded. I am not sure how to do this. I know how to write an event handler for DOMContentLoaded, but what do I do then.

Can you show us the code you're using to load and initialize these scripts? — Barett
– Barett, Commented Apr 17, 2015 at 18:53

Gabriel Kohen · Accepted Answer · 2015-04-20 21:02:14Z

2

Edited answer: I usually inject my JS script code in the header all inside of an IFFE. You'd also have to make sure you have the ng-app in there to specify the module. Finally I've made sure I actually include the dependent code in the header before my code. See fiddle here

<head>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
<script>
    (function() {
      var testApp = angular.module("testApp", []);
      function SomeController($scope) {
        console.log('Started controller');  
        $scope.dirPanelElement = angular.element('#some-panel');
        $scope.dirPanelElement.text('set test');
        $scope.dirPanelElementText='got "'+$scope.dirPanelElement.text()+'" from panel'         
      }
    testApp.controller("SomeController", SomeController);
   })(); // IFFE
</script>
</head>
 <body ng-app='testApp'>
  <div id="content">
   <div style="padding:50px">
    <div data-ng-controller="SomeController">
       <p align="center">Something</p>
       <div id="some-panel"></div>
       <div id="some-canvas">{{dirPanelElementText}}</div>  
    </div>
  </div>
 </div>
</body>

edited Apr 20, 2015 at 21:02

answered Apr 17, 2015 at 20:08

Gabriel Kohen

4,3264 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

David Champion Over a year ago

<body data-ng-controller="MainController"> <script type='text/javascript' src="js/vendor/jquery-1.11.2.js"></script> <script type='text/javascript' src="js/vendor/angular.js"></script> same error

Gabriel Kohen Over a year ago

Please check in the network tab of the browser's dev tools your not getting a 404 response on getting the jquery file.

David Champion Over a year ago

]I am not getting a 404 error. If I move the script declaration for jquery below all the angular declaration then I do not get load error but I get an error when the angular.element is called, "[jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: docs.angularjs.org". Also under Firefox's Firebug, all the scripts are loaded. Is there a certain version of jquery that needs to be loaded for each version of anglar? I am using AngularJS v1.2.10 and jQuery JavaScript Library v1.11.2.

Gabriel Kohen Over a year ago

Is it something that you could recreate on JSFiddle or happens only locally? If you can recreate it on JSF, do you mind sending a link?

David Champion Over a year ago

I will try this. I am using a node server as the backend. I noticed that node logges the GET on the angular.js before it does the jquery. Can I assume this is the order that node is serving the files? Also can I assume this is the order that my browser is loading them as well?

|

Collectives™ on Stack Overflow

AngularJS complains that initialization not defined for jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related