6 ms·

AngularStrap - Bootstrap directives for AngularJS

133 points by olouv 14y ago

michaelmior 14y ago
Is there some AngularJS jargon I'm missing out on, or does the linked page actually mistakenly refer to attributes as tags?
- olouv 14y ago
  indeed, tags were attributes. Thanks! https://github.com/mgcrea/angular-strap/commit/09985e6166704f1aa7dec112a136a24d15441119 https://github.com/mgcrea/angular-strap/commit/09985e6166704...
  - michaelmior 14y ago
    No problem! Looks cool. If I ever get into any AngularJS project, I'll keep this in mind.
deleted 14y ago
[deleted]
- camus 14y ago
  because you dont want a bloated 300ko massive js file when you are only using the framework core capabilities ... and you dont want to depend on any css/png file either especially when you are not using bootstrap. Remember you need bootstrap js file/ css files/ png file + jQuery to make it work along with angularJS. The goal of Angular is not theming or widgeting HTML/CSS for lazy designers but to extend its semantic.
  - olouv 14y ago
    angular already ships with external files that extends the core (ie. angular-resource or angular-cookie) so I guess it could be done. And I'm not sure you need jQuery at all (angular ships with jQLite) so you may be able to use some of the core bootstrap plugins without adding jQuery (untested). Also with CDN (Google, cdnjs) for common libs, I think it is less an issue today (at least on desktop).
    - camus 14y ago
      I'm pretty sure you still need all the jquery plugins / css files bundled with bootstrap. This is not a matter of cdn or not this is a matter of bloated libraries that try to do to much things at once. If you want that you can still use ExtJs...
jonny_eh 14y ago
This looks quite handy, I'll definitely use it, so thanks olouv! Does anyone know if a similar project exists to help make Bootstrap forms using angular?
EzGraphs 14y ago
So with Angular's "no direct DOM manipulation outside of Angualar" philosophy in mind, what is the best way to integrate Angular into an existing project with a bunch of UI widgets in place (say jQuery UI)? Projects like this seem to imply that you really need to rewrite the UI it you want a clean design.
- daigoba66 14y ago
  Basically you create a wrapper around the plugin, and then inject that into your controllers.
- steeve 14y ago
  Through directives. This is the cleanest way of doing it. Like Angular UI: http://angular-ui.github.com/ http://angular-ui.github.com/
pebb 14y ago
I love Angular ;)
nXqd 14y ago
Great contribution. It's really convenience :D
steeve 14y ago
So.. No love for AngularUI? http://angular-ui.github.com/ http://angular-ui.github.com/
- zenocon 14y ago
  I'm using AngularUI for the nice google maps directives, but this one appears to have some nice directives (e.g. date/time pickers) that don't require me to pull in jQuery-UI...which I welcome with great zeal.
- olouv 14y ago
  I don't think it has to be angular-this vs angular-that. Having a vibrant ecosystem is what matters.
- pkozlowski_os 14y ago
  Well, as part of angular-ui we are building native AngularJS directives for Twitter's bootstrap: http://angular-ui.github.com/bootstrap/ http://angular-ui.github.com/bootstrap/ Angular-strap is great but it has dependency on jQuery, bootstrap's JavaScript etc. Our goal is to come up with native, lightweight directives with minimal dependencies. We will be moving slower but hopefully it will be useful for people that don't need / want jQuery.
  - steeve 14y ago
    Now this is just great!
deleted 14y ago
[deleted]
- snprbob86 14y ago
  You're being down voted because this is a discussion about Angular, not an opportunity for you to stand on your soap box about Knockout. However, I should point out that it's probably unwise to dismiss Angular outright over something as trivial as IE6&7 support. Angular's approach is well worth studying, even if you never use it. In short, I feel that the hierarchical view models (called "scopes") powered by data-driven "directives" and the preference for dirty checking over dependency graph management, yields a much cleaner internal design for the framework, and applications that both perform faster and are easier to maintain.
  - edwinyzh 14y ago
    A good brief description of 'selling points' of angularjs. "clean" and "strait-forward" come to my mind when I think about angularjs.
garrynewman 14y ago
I love AngularJS. It has completely changed how I code websites.
- edwinyzh 14y ago
  I don't know about other JS frameworks, but I've seen many people say they love angularJS, and I believe that's true, because that's exactly how I feel about angularjs ;) I'm from a Windows dev background and all other exiting code editors/IDE I tried doesn't satisfy me so I'm building a new one. And a handy tool is only a half for me to happily switch to web front end dev, and another half is a good framework, and I think angularjs can be that framework.
  - olouv 14y ago
    Have you checked out Sublime Text 2? Building an IDE is a tremendous amount of work, good luck!
    - edwinyzh 14y ago
      Yes, ST 2 is great! And I've seen several ideas I got (inspired when using other IDE) are implemented in it. However, while it's not designed specified for html/css/js.
  - camus 14y ago
    Try webstorm , but dont expect the C#/Winforms level of integration. no GUI builder , no smart intellisence , etc ... it is because of the nature of javascript.
    - edwinyzh 14y ago
      Yes, it's pretty great, although it's not fast enough in my experience, WebStorm will be my choice if I don't make my own. But the project (called LIVEditor) I'm working on is different - imagine a smart code editor is seamlessly integrated into Chrome browser (with the html inspector enabled) :)
  - 14y ago
jimrhoskins 14y ago
Third party modules like this one of the things that make AngularJS awesome. I put together http://ngmodules.org/ http://ngmodules.org/ as a searchable repository of Angular Modules. Hopefully people will find some useful libraries through it.
- jere_jones 14y ago
  You, sir, are awesome. Thank you.
hexvector 14y ago
Anyone working on a Zurb Foundation one?

133 points by olouv 14y ago

Is there some AngularJS jargon I'm missing out on, or does the linked page actually mistakenly refer to attributes as tags?

olouv 14y ago
indeed, tags were attributes. Thanks! https://github.com/mgcrea/angular-strap/commit/09985e6166704f1aa7dec112a136a24d15441119 https://github.com/mgcrea/angular-strap/commit/09985e6166704...
- michaelmior 14y ago
  No problem! Looks cool. If I ever get into any AngularJS project, I'll keep this in mind.

deleted 14y ago

[deleted]

camus 14y ago
because you dont want a bloated 300ko massive js file when you are only using the framework core capabilities ... and you dont want to depend on any css/png file either especially when you are not using bootstrap. Remember you need bootstrap js file/ css files/ png file + jQuery to make it work along with angularJS. The goal of Angular is not theming or widgeting HTML/CSS for lazy designers but to extend its semantic.
- olouv 14y ago
  angular already ships with external files that extends the core (ie. angular-resource or angular-cookie) so I guess it could be done. And I'm not sure you need jQuery at all (angular ships with jQLite) so you may be able to use some of the core bootstrap plugins without adding jQuery (untested). Also with CDN (Google, cdnjs) for common libs, I think it is less an issue today (at least on desktop).
  - camus 14y ago
    I'm pretty sure you still need all the jquery plugins / css files bundled with bootstrap. This is not a matter of cdn or not this is a matter of bloated libraries that try to do to much things at once. If you want that you can still use ExtJs...

jonny_eh 14y ago

This looks quite handy, I'll definitely use it, so thanks olouv! Does anyone know if a similar project exists to help make Bootstrap forms using angular?

EzGraphs 14y ago

So with Angular's "no direct DOM manipulation outside of Angualar" philosophy in mind, what is the best way to integrate Angular into an existing project with a bunch of UI widgets in place (say jQuery UI)? Projects like this seem to imply that you really need to rewrite the UI it you want a clean design.

daigoba66 14y ago
Basically you create a wrapper around the plugin, and then inject that into your controllers.
steeve 14y ago
Through directives. This is the cleanest way of doing it. Like Angular UI: http://angular-ui.github.com/ http://angular-ui.github.com/

pebb 14y ago

I love Angular ;)

nXqd 14y ago

Great contribution. It's really convenience :D

steeve 14y ago

So.. No love for AngularUI? http://angular-ui.github.com/ http://angular-ui.github.com/

zenocon 14y ago
I'm using AngularUI for the nice google maps directives, but this one appears to have some nice directives (e.g. date/time pickers) that don't require me to pull in jQuery-UI...which I welcome with great zeal.
olouv 14y ago
I don't think it has to be angular-this vs angular-that. Having a vibrant ecosystem is what matters.
pkozlowski_os 14y ago
Well, as part of angular-ui we are building native AngularJS directives for Twitter's bootstrap: http://angular-ui.github.com/bootstrap/ http://angular-ui.github.com/bootstrap/ Angular-strap is great but it has dependency on jQuery, bootstrap's JavaScript etc. Our goal is to come up with native, lightweight directives with minimal dependencies. We will be moving slower but hopefully it will be useful for people that don't need / want jQuery.
- steeve 14y ago
  Now this is just great!

deleted 14y ago

[deleted]

snprbob86 14y ago
You're being down voted because this is a discussion about Angular, not an opportunity for you to stand on your soap box about Knockout. However, I should point out that it's probably unwise to dismiss Angular outright over something as trivial as IE6&7 support. Angular's approach is well worth studying, even if you never use it. In short, I feel that the hierarchical view models (called "scopes") powered by data-driven "directives" and the preference for dirty checking over dependency graph management, yields a much cleaner internal design for the framework, and applications that both perform faster and are easier to maintain.
- edwinyzh 14y ago
  A good brief description of 'selling points' of angularjs. "clean" and "strait-forward" come to my mind when I think about angularjs.

garrynewman 14y ago

I love AngularJS. It has completely changed how I code websites.

edwinyzh 14y ago
I don't know about other JS frameworks, but I've seen many people say they love angularJS, and I believe that's true, because that's exactly how I feel about angularjs ;) I'm from a Windows dev background and all other exiting code editors/IDE I tried doesn't satisfy me so I'm building a new one. And a handy tool is only a half for me to happily switch to web front end dev, and another half is a good framework, and I think angularjs can be that framework.
- olouv 14y ago
  Have you checked out Sublime Text 2? Building an IDE is a tremendous amount of work, good luck!
  - edwinyzh 14y ago
    Yes, ST 2 is great! And I've seen several ideas I got (inspired when using other IDE) are implemented in it. However, while it's not designed specified for html/css/js.
- camus 14y ago
  Try webstorm , but dont expect the C#/Winforms level of integration. no GUI builder , no smart intellisence , etc ... it is because of the nature of javascript.
  - edwinyzh 14y ago
    Yes, it's pretty great, although it's not fast enough in my experience, WebStorm will be my choice if I don't make my own. But the project (called LIVEditor) I'm working on is different - imagine a smart code editor is seamlessly integrated into Chrome browser (with the html inspector enabled) :)
- 14y ago

jimrhoskins 14y ago

Third party modules like this one of the things that make AngularJS awesome. I put together http://ngmodules.org/ http://ngmodules.org/ as a searchable repository of Angular Modules. Hopefully people will find some useful libraries through it.

jere_jones 14y ago
You, sir, are awesome. Thank you.

hexvector 14y ago

Anyone working on a Zurb Foundation one?