Richie
Richie

Reputation: 5199

Using Angular with JQuery on the client side only

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

Answers (2)

JasperZelf
JasperZelf

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

Danish Altaf Satti
Danish Altaf Satti

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

Related Questions