Hacker News Reader

Comment by nateabele | Hacker News Reader

Can we please stop posting links to this project? It's a really good example of how not to write Angular code.

The (official) AngularUI project has a much better solution (as has already been linked to in previous comments, but I feel the need to re-iterate): http://angular-ui.github.com/bootstrap/

View on HN

(never having used angularjs, I am ill-equipped to judge) What makes the official solution much better than the one posted by the parent?

Considering every component provided by AngularBootstrap is tested, I think what you're saying is false.

Can you show us how they're wrong?

Just 4 things for a start:

1) Size and dependencies. Let's say you want to use buttons directive. If you decide to go with angular-ui/bootstrap you will need this https://github.com/angular-ui/bootstrap/blob/master/src/butt... only - 62 LOC. If you decide to go with Strap you will need jQuery + 100 LOC of Bootstrap's JavaScript + 163 LOC of Strap's wrapper (!!!). Please note that the the wrapper itself is _longer_ than the original version. Native version is 1/3 of the size (!).

2) Customization - try to change a template for say, a typeahead. With the strap solution it is hard-coded in Bootstrap's JavaScript, no way to customize. With angular-ui/bootstrap template is here: https://github.com/angular-ui/bootstrap/blob/master/template... and is fully customizable

3) Integration with the AngularJS ecosystem - since anngular-ui/bootstrap directives are native ones they seamlessly work with all the AngularJS goodies like $q promises. This means that you can provide a promise as a source for, say, typeahead or data for modal.

4) wrapping existing jQuery plugins is not always obvious as lifecycles are really different. As the results you need to do hacks - just search Strap's code for setTimeout and $timeout to see what I mean.

At the end of the day just choose a project that works for you but we've started angular-ui effort since we believe that native AngularJS directives offer much lighter and cleaner solution.

Compare the code yourself (should be an easy comparison) bootstrap alert widget

angular UI version https://github.com/angular-ui/bootstrap/blob/master/src/aler...

strap version https://github.com/mgcrea/angular-strap/blob/master/src/dire...

And more examples like this, unfortunately... Compare buttons for another striking example...

Just a wild guess (just looked at the first snippets quickly) but it looks like AngularStrap generate itself the html (for the dropdown for example).

It's not neccessary (bootstrap HTML is pretty straightforward) and it prevent you from doing a lot of things like custom html inside dropdown menus (icons, ni-click, etc).

So IMO, It abstract the things at the wrong level (too high)

Reply on news.ycombinator.com