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
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.
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?
Related
I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?
I want to generate static html using Angular 1 directives for various use cases. For example:
<div>
Name: <span ng-bind="name"></span>
</div>
<div ng-if="phone">
Phone: <span ng-bind="phone"></span>
</div>
given {name: "John"} as $scope should generate the following html:
<div>
Name: <span>John</span>
</div>
Notice the absence of angular directives and angular ng-if comments. Is something like this possible with Angular 1?
UPDATE: I want to use angular's template engine to generate static, non-interactive, html. Think underscore templates or server side template engines. The use case is to generate pieces of html that user can take away into his own non-angular application. Another use case would be to assemble a static html email from an angular template. All of this done without server side. Angular already let's you do this but it leaves all of its artifacts in the html which are obviously not needed for my use case. This is not inefficient as some commenters have said, this is actually quite efficient to be able to generate html without server side and utilizing the already powerful template engine of angular.
No. Angular is developed to work on the Client-side. Hence, you cannot use it on the Server-side for templating.
Instead you could try ejs - embedded js for templating. That is much more simpler and serves as a templating engine.
Check out EJS Website
Angular was not designed to do this because it is not a templating engine, it is much more than that.
There is no build-in way to accomplish this. Your best bet would be strip all ng attributes, angular classes and angular comments and probably some elements too. I personally wouldn't do it.
Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.