3

I am trying to embed an angular app within my existing application which extensively using jquery. The moment I call the bootstrap function e.g

  angular.bootstrap(document.getElementById('app-grid'),['grid']);

I get a strange error :

Error: $rootElement.on is not a function $LocationProvider/this.$get<@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js:9257
........

If I remove jquery stuff angular app load successfully . Please let me know if there is a work around 

jquery: 1.5.1
angularjs:1.2.13
sakhunzai
  • 13,900
  • 23
  • 98
  • 159

2 Answers2

7

That is a really old version of jQuery you are using, which does not provide the on function on wrapped elements. If you need to continue using it for legacy reasons, then load it after angularjs so that angular can use its internal jqLite implementation.

musically_ut
  • 34,028
  • 8
  • 94
  • 106
7

Dont augment jQuery with Angular.js unless and until it is really required,as far as usage of Angular.js library is concerned, you can build a similar plugin that may be available with jquery with a slightly different approach but it is quite possible.

check this below article for more Do's and Dont's

Don't augment jQuery with AngularJS

Similarly, don't start with the idea that jQuery does X, Y, and Z, so I'll just add AngularJS on top of that for models and controllers. This is really tempting when you're just starting out, which is why I always recommend that new AngularJS developers don't use jQuery at all, at least until they get used to doing things the "Angular Way".

I've seen many developers here and on the mailing list create these elaborate solutions with jQuery plugins of 150 or 200 lines of code that they then glue into AngularJS with a collection of callbacks and $applys that are confusing and convoluted; but they eventually get it working! The problem is that in most cases that jQuery plugin could be rewritten in AngularJS in a fraction of the code, where suddenly everything becomes comprehensible and straightforward.

The bottom line is this: when solutioning, first "think in AngularJS"; if you can't think of a solution, ask the community; if after all of that there is no easy solution, then feel free to reach for the jQuery. But don't let jQuery become a crutch or you'll never master AngularJS.

Complete Article:"Thinking in AngularJS" if I have a jQuery background?

Happy Coding:)

Community
  • 1
  • 1
dreamweiver
  • 6,002
  • 2
  • 24
  • 39
  • thank for the article , I am not trying to use angular within jquery.Instead trying to use in parallel to jquery to get rid of it sooner if possible. Before that I have to demonstrate a working example of angular js without removing jquery. – sakhunzai Feb 20 '14 at 14:06
  • @sakhunzai: well that looks like a tough job,this way the final solution wont work as smoothly as you would expect, you may have to do some code tunings & avoid conflicts between the 2 plugins. All the best :) – dreamweiver Feb 20 '14 at 14:30
  • what do you do when you have to use a neat jquery based plugin that is not yet available in angular? – user20358 Sep 07 '14 at 13:45
  • @user20358:well its a matter or complication, if you want to build a app which require this new jquery app in it over a angular js framework then you can go ahead with it only if you really dont find the equivalent plugin feature in angular.js else it is a overkill. just research accordingly before going forward with your idea as it would be very difficult to co-ordinate between the 2 frameworks at the later stage – dreamweiver Sep 08 '14 at 11:54
  • thanks for the reply. Say for example I had to use a file upload plugin like dropzone. I've not seen an equivalent angular port yet. I could be wrong though. What do you think? – user20358 Sep 08 '14 at 15:56
  • 1
    @user20358: actually there are few , check this out http://stackoverflow.com/questions/18571001/file-upload-using-angularjs & http://ngmodules.org/modules/angular-file-upload – dreamweiver Sep 09 '14 at 07:33
  • thanks.. I will give that a look. Up voted your comment. – user20358 Sep 13 '14 at 07:50