current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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
share|improve this question
    
did you try no conflict? jQuery.noConflict(); –  Harshada Chavan Feb 20 at 13:05
    
Read this SO question before using angular.js ,stackoverflow.com/questions/14994391/… –  dreamweiver Feb 20 at 13:12
    
no luck with jQuery.noConflict() –  sakhunzai Feb 20 at 14:04

2 Answers 2

up vote 5 down vote accepted

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.

share|improve this answer
    
My quickest hack for now is to use iframe to embed the angular app . I know that is crazy before I try your solution. Thanks –  sakhunzai Feb 20 at 14:08
    
For me bumping version to 2.1 was a way to go - problem solved. –  Paweł Szymański Mar 11 at 16:44
up vote 4 down vote

Dont augment jQuery with Angular.js unless and until required,as far as Angular.js is concerned, you can do everything that is possible with jquery. check this below article

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:How do I "think in AngularJS" if I have a jQuery background?

Happy Coding:)

share|improve this answer
    
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 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 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 7 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 8 at 11:54
1  
@user20358: actually there are few , check this out stackoverflow.com/questions/18571001/… & ngmodules.org/modules/angular-file-upload –  dreamweiver Sep 9 at 7:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.