Using handlebarJs with Angular - angularjs

I was reading about Handlebar.Js and to me it tries to imitate what Angular.Js does. My question is whether handlebarJS is mainly for frameworks which are using expressions poorly or we might need to get help from HandlebarJS inside application on Angular framework?

Indeed, Handlebars does somethings that AngularJS already provides out of the box: templating (e.g. taking a string like "here is {{myvalue}}!" and replacing the right places with the rights values). Handlebars is generally used alone, or together with "light" frameworks that don't include templating by default (Backbone for example).

Related

Get AngularJS template bindings

I am working on something like CMS based on AngularJS templates. I need to get bindings from a template so my users are able to fullfill those properties for specific pages.
So how can I get all bindings from a template?
You can't... using techniques AngularJS itself provides. Your question is just beyond the scope of the functionality the core devs thought to provide.
#bmceldowney is correct - a regex could be used to parse templates, although I think that would be challenging for a few reasons:
AngularJS templates can contain all sorts of complex expressions, not just simple vars. How will you deal with filters - and if you won't, you lose a lot of value here...
AngularJS can lazy-load templates and this is a common practice. You wouldn't want hundreds of useless templates floating around just in case they might be used at some point. How will you deal with templates that haven't been loaded yet - that you don't know exist?
If you're building a CMS that implies data management of some kind, and that's not going to get stored in the front-end because it would be useless there - nobody else would ever see it. So aside from the editing cycle itself, it seems like something to be solved server-side and not with AngularJS.
All that said, my suggestion would be to do exactly that - work out something server-side where you can access templates as raw files just by scanning some folder where they're stored, use regular expressions to find the template variables, and you're going to have to be clever with how you parse expressions and what you'll support here. Then you can prepare appropriate data objects to pass down to the client via an API for it to support the actual editing.

Why should i use Handlbars Templates in BackboneJS application instead of underscore templates?

I have seen many people using handlebars templates with BackboneJS instead of underscore templates, even underscore is hard dependency of BackboneJS. Can anyone please tell me benefits of doing so?
Handlebars:
Compatible with mustache templates - what cam be used to use same syntax, or even templates
More readable syntax
Underscore:
No need to load extra library for template
Underscore its not only template engine. It has 80+ useful functions for working with objects, arrays and collections.
On my point of view there are a lot of advantages and disadvantages of using these libs according project specifics.
It depends on where you are using and what you are needing a template for.
For example, like Evgeniy said, when you want to deal much with collections, such as SORT, or extracting a particular field's value (from a result set), extracting UNIQUE values ... these are the places where you will be better off using Underscore.
Going back to what Evgeniy said, I think it is those 80+ useful functions that make Underscore significant.
I prefer Handlebars for Templates, because I feel that handlebars is more readable and a bit less complex than Underscore when it comes to Template needs. Again, that's my preference.
But bottom-line is, I user Underscore for the Functions it provides and Handlebars for Templates.
Hope this helps.
Underscore provides the basic functions needed for any project and thats the advantage of that.
At the same time Handlebars can be efficiently used in a project which needs to do lot of formatting/ common functions with some set of data. For e.g. if a project has requirement of displaying a name in a specific format and has to be in sync across the application, then handlebars come in handy.
We can simply write a handlebar and call that function from all the places in the application.
In short i would say both are handy for development and they are wonderful in their own ways.
Hope i have not confused you :)

which templating method backboneJS uses?

I've worked with angular which uses DOM-Based templating and also in Ember which uses String-Based templating. But I never worked on backbone. Can anyone tell me which templating method it uses?
Backbone doesn't force you to use any particular templating engine, you can use what you want to render templates.
Render the UI as you see fit. Backbone is agnostic as to whether you
use Underscore templates, Mustache.js, direct DOM manipulation,
server-side rendered snippets of HTML, or jQuery UI in your render
function. Sometimes you'll create a view for each model ... sometimes
you'll have a view that renders thousands of models at once, in a
tight loop. Both can be appropriate in the same app, depending on the
quantity of data involved, and the complexity of the UI.
(src: http://backbonejs.org/#FAQ-tim-toady)
Backbone is agnostic with respect to your preferred method of HTML
templating. Your render function could even munge together an HTML
string, or use document.createElement to generate a DOM tree. However,
we suggest choosing a nice JavaScript templating library. Mustache.js,
Haml-js, and Eco are all fine alternatives. Because Underscore.js is
already on the page, _.template is available, and is an excellent
choice if you prefer simple interpolated-JavaScript style templates.
(src: http://backbonejs.org/#View-render)
(rtfm!)
Backbone.js is a MV* framework that works with any template system. Typically you will use the Underscore library for creating templates for simple applications. The Underscore library is a dependency of Backbone so its always available to your Backbone.js app.
A NEW ALTERNATIVE to Underscore.js has just been released called "Lo-Dash" its sole purpose is to completely replace Underscore.js all together. It also has a template system that you can use in your Backbone.js apps. Simply drop in Lo-Dash, remove underscore and it works seamlessly. When Lo-dash is tested with Backbone.js all the unit tests pass which means that it is a perfect Underscore.js replacement. The Lo-Dash API was also written with performance in mind so it replaces slower clunky JS patterns with better high perf patterns like "for loops" etc... Also it provides like 30 additional features that isn't available with underscore. Check it out for yourself: http://lodash.com/
After you have checked out Lo-Dash and still need more than i would check out some of the other template systems out there like: Handlebars.js, Mustache.js, Jade, Haml-js, etc...

Pros and cons of using AngularJS + jQuery Mobile in one project

We're about to start a project using mentioned libraries. We have already used jQM in another project, but coupled with Backbone. Now we're thinking about using AngularJS with jQM. Do you think it's a good idea? And if not, why?
To elaborate, the question is whether it is advisable/recommended/easy/beneficial to use these libraries together, or maybe there is something that should prevent us from using them both in one project. We don't want to spend half of project's time on making them work together just on principle.
AngularJS and JQM do different things. AngularJS is MVC + Lot More. JQM on the other hand is for direct UI manipulation (lower level than Angular). The good news is AngularJS is flexible and will let you work with any other Javascript framework including JQM. The recommended way of using them together is use the adapter as mentioned above or create your own reusable directives that will add "JQM nature" to your views. For e.g. you can create a directive that will convert a standard UL to a fancier JQM list. The good thing about doing this in directives and not within your view is that your UI code is separated in separate modules and not intermingled with business logic.

Freemarker+ExtJS vs Wicket

I have been developing for a while using Freemarker + some JS frameworks (like ExtJS). Now I hear lots of talks about Wicket so Im trying to understand pros and cons. After reading intro in Wicket I have mixed feelings. Below are my conclusions. I know Im biased but dont take it as offence. Instead rather as misunderstanding since Im really trying to see if Wicket is thing to switch to:
Seems like this is good for companies where you have Java programmers that you can now utilize for building Front-end. On other hand, as Front-end developer this looks weird to me since I feel like I dont have full control of JScript code.
Since Wicket uses Java for generating HTML/CSS/JScript UI controls for me meaning if I need to tweak those controls outside of their box it maybe problematic. In my experience any framework good until you start doing something different from what it was intended and then you can spend more effort trying to do simple out of box thing then using native JScript. Is there JScript sources for Wicket controls?
Prototyping: using Freemarker I can do changes and simply refresh page. In case of Wicket I need to recompile.
Logic blocks: Looks like Wicket allows injection of values into HTML tags with wicket: attribute but how do you handle block logic like IF(condition) then {use HTML block1} else { use another HTML block}?
Non html data templating: often during page generation I compose some AJAX data from FreeMarker inside tag. How do I do similar things from Wicket?
Is it harder/simpler to create custom UI controls in Wicket?
Thank you for your comments.
Freemarker or JS isn't a web framework.
What do You use? A raw Servlet? Your comparison seems strange.
In Wicket You can use templating, built-in Velocity Panel, or find or build Freemarker panel. Coding such kind of Panel needs a few hours (for an active Wicket programmer), but then you can reuse it many times. The Injected (from Panels) HTML part must be valid, html tags closed etc.
3) Wicket hasn't if-else construction in markup. Maybe use Comcoment.setVisible(false), or very good made loop's (few repeaters: https://cwiki.apache.org/WICKET/reference-library.html Look at examples).

Resources