javascript - Is that a good practice to use jQuery with AngularJS?

Question

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

Answer 1

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.