Best way to work with angularJS and jquery's $('document').ready()

Question

I have a bunch of pages given to me by a designer that has to be integrated with my existing project in AngularJS.

The page that I have been given uses a lot of jquery . The one thing that is causing problems is the jquery's $('document').ready() function.

Since in an angular project the page is just loaded once, most of the document.ready() parts in any of the pages are not working. Every time a page changes, there is some code to inside this function that doesn't work.

So whichever controller in my project is supposed to have any code that work's on document.ready I am throwing it in the controller like this :

setTimeout(function(){
$scope.$apply(function() {
   var _wht=($(window).height());
   var _wwt=($(window).width());
   _wht=($(window).height());
   _wwt=($(window).width());
   if(_wht > 450){
       var mcht = _wht - ($('header').height()+ $('footer').height()+50);
       $('.login-page').css('height',mcht+'px');
       $('.login-page').css('padding-top',((mcht - 158)/2) +'px');

    }



   });
 });

This works very well.

But I think this counters angularJS' philosophy of separation of concerns . The controller is where you have only your business logic.

Where is the best place to throw this piece of code ?

Answer 1

AngularJS is here to be built for robust arhitecture and that is why we see so many modules in terms of directives and other components. Putting JQuery with it will be like going away from their core design and you will yourself end up in a mess maintaining the codebase.

jQuery is a crutch if you are writing AngularJS applications.

If you’re starting an AngularJS app, take a good look at ng-boilerplate. Then take a look at ui-bootstrap’s directives. They are a living example of how you can do “jQuery things” with a fraction of the code, and build an app that is easier to maintain, way more testable, and generally nicer to work with.

Take a look at this stuff

• How do I “think in AngularJS” if I have a jQuery background? - An excellent Stack Overflow post that expands on this viewpoint

• Using AngularJS? Then stop using jQuery

Instead of $('document').ready() you can also use.

angular.element(document).ready(function() {
  :
  :
});