I did a lot of DOM manipulation using jQuery.
Switching to angular has greatly cleaned up my code. Here are a few things that come to mind:
Do trivial stuff right in HTML
The simple fact that you can do a lot of the trivial things right in the HTML gets rid of a lot of js code. The code below in jQuery required me to watch the checkbox for changes, than depending on the checked state I had to either show or hide the span below. With angularjs, not a single line of custom js is needed.
<input type="checkbox" ng-model="show"/>
<span ng-show="show">show me when checkbox is checked</span
No more HTML in your js code
Every now and than you find yourself looping trough an array, adding table rows or li's in your js, and than push em to the DOM. You're basically writing HTML in your JS file. Using ng-repeat you can keep the HTML in your template file and loop trough your arrays right where you want to build that table/list/etc..
<li ng-repeat="user in users">{{ user.name }}</li>
Functionality is clearer in your HTML
Because jQuery uses selectors in the javascript code, I often found myself searching for what a button actually does. With angular you can use ng-click to call a function. This made it much clearer what actually happens from just looking at the HTML.
<button ng-click="recalculateUsage()">recalculate</button>
No more placeholders
Another great benefit is that showing data in your templates can be as simple as {{ user.name }}, instead of creating a placeholder that you than fill using jQuery.$('#userName').html('my new content').
Directives
Directives are another great way to clean up you code. Much used elements can live in their own js/template file and can be inserted into your HTML in an easy manner.
