I am working on project for an app that uses AngularJS. I need to manipulate the DOM quite a bit, based on user events, i.e click, change, etc.
I am using vanilla javascript and ng-directives for event listening - no jquery. I read that it is not good practice to manipulate the DOM within the controller. Also, I am NOT trying to ng-include a long list of external javascript files to separate the client side functionality of each widget.
I am wondering what are best practices for manipulating a DOM while maintaining a decluttered/scalable project environment?
Some examples of what I am trying to do: one of my functions toggle a class to a DOM element on click. One function changes search filters in the UI, when a button is clicked, etc. One button changes the view layout based on user preference, one function changes the number of search results, etc.
Note, the sidebar for example needs to be manipulated quite a bit based on user actions. Also, the other areas such as search results, can be manipulated and I would like to code these two areas of the app separately, using best practices.
