1

I have been using jQuery for years. Now, I would like to learn something new to built single page websites. I have chosen AngularJS.

At the moment I am wondering if it is a good idea to use jQuery with AngularJS ?

Example.

I have something like that inside AngularJS controller:

$http.post('ajax/gettimeline', { page: page }).success(function (data) {
        $rootScope.loading = false;


            // Here I need to built dynamic html with getting and setting
            // dynamic elements size, positions, change their properties, etc.

        }
    });

Building those dynamic html elements with jQuery is an easy task. But with AngularJS looks like it will be painful.

Will appreciate any advice.

Thanks

Renat Khabibulin
  • 183
  • 2
  • 11
  • You read [this](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background), right ? – adeneo Jan 10 '16 at 16:05
  • well, the idea is, you do all your html works, and creation of dynamic elements, over a loop for example, in html using directives. generally you wouldn't need too much to use jQuery, but there is no conflict if you use it. the things is, elements you creat using jQuery won't be managed by angular. – Ahmet Cetin Jan 10 '16 at 16:07
  • Bit of a different opinion over at http://stackoverflow.com/questions/31201079/combining-jquery-and-angularjs?rq=1 – Thilo Apr 25 '16 at 08:42

2 Answers2

14

No, it is not a good idea. You are using jQuery coding practices in an Angular app and this will cause you headaches - for once because those practices go against the Angular spirit, and also because you won't reap the benefits of Angular.

One of the most important parts in Angular development is: you shouldn't manipulate the DOM from your controllers, ever. This is fine in jQuery, but in Angular, you should modify your model and let Angular render it. Angular has a templating mechanism built in which you should use to load HTML fragments. If you need to create HTML dynamically, you should do so in a directive. Everything else violates the "separation of concerns" principle.

If you use jQuery or native DOM methods to manipulate input settings or modify the DOM, you set up yourself for a fight with Angular over it which will result in a lot of hard-to debug errors. One of the main points of Angular is two-way databinding which is not a useful feature if you insist on binding data to HTML on your own. Maybe one of the simpler templating libraries like moustache or knockout would be more to your liking?

To reap the benefits of Angular means letting go some tried and true practices and learning about the built-in directives, especially ng-repeat, ng-if, ng-class, ng-click and ng-change and maybe something like Angular UI.

Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
3

Big NO. It's not a good idea to use jQuery with angular.js. jQuery does different thing and angular.js does different things. jQuery manipulates the DOM and add, append, remove element dynamically. In other hands, angular.js just manipulate model data but you can use jqlite built in with angular.js.

Subhojit Mondal
  • 453
  • 7
  • 17