Reputation: 5199
I've got a web application. It's got a very traditional technology stack. The server side is Apache Struts, the database is db2 and on the client side I am using JQuery. The application is deployed over websphere.
Recently I have started to use JQuery heavily on a number of pages and I have slowly started to see the JQuery code behind certain pages turn into spaghetti code.
I am looking to add Angular.js and handlebars.js on the client side to give my JQuery more structure.
Firstly I'd like to ask if that is a good use for Angular.js and also If I use Angular and handlebars with jquery what purpose will each one serve.
thanks
Upvotes: 0
Views: 982
Reputation: 2844
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.
Upvotes: 4
Reputation: 393
AngularJS and JQuery both serve different purposes as both have different goals.
JQuery benefits you in DOM manipulation without much caring about data involved. While AngularJS on the other hand provide you MVC like framework for separating model, view, controllers logic and provides two way data binding.
See this for more details about benefits of Angular What does AngularJS do better than jQuery?
Upvotes: 1