20

I know this sounds like a pretty generic question, but I have already made a research and there is not much information out there, other than these two seem not to "play" very well together.

I am referring to the latest version of Foundation, 5, which just got released. If AngularJS can work with jQuery, and Foundation is using jQuery, what is it that causes the problem, if there is a problem at all.

Has any of you used these two together? And what could be some better alternatives on the JS side of things? Backbone? Ember? Which one would work with Foundation and why?

p.s. I am aware that Twitter Bootstrap works well with AngularJS, however, for my project, Foundation is a requirement.

Thanks,
Iraklis

Dinesh Kanivu
  • 2,551
  • 1
  • 23
  • 55
Iraklis Alexopoulos
  • 909
  • 2
  • 14
  • 27
  • 2
    Twitter Bootstrap and AngularJS have nothing in common. Same stands for Foundation and Angular. One is CSS framework and the other is JavaScript framework. The only difference is that there are more readily-available Angular plugins/directives that rely on Bootstrap. – Stewie Nov 25 '13 at 12:31
  • 3
    Hi Stewie, I am aware of that, thanks! – Iraklis Alexopoulos Nov 25 '13 at 13:09
  • For people like me coming here while evaluating Zurb Foundation with AngularJS - and has a mobile UI framework in general - now (Apr 2015) there's a specific [Foundation for Apps](http://foundation.zurb.com/apps/) – superjos Apr 08 '15 at 08:42

4 Answers4

46

We recently adapted most Angular UI Bootstrap components for use with the Foundation CSS and open sourced the code: http://pineconellc.github.io/angular-foundation/

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
sorich87
  • 871
  • 10
  • 8
  • i tried getting your angular foundation working, but it gives me an injector error, even though I have mm-foundation as an injection. Also included the angular foundation js... no luck tho – Paul Preibisch Jan 29 '15 at 04:43
5

The Angular-UI project provides deep integration of Twitter Bootstrap and AngularJS. That does not mean that Foundation Zurb and AngularJS does not work well together.

With Zurb you have higher integration effort than with a ready-baked framework if you stick to standard components. At the time you need additional components you have to do the integration yourself anyway.

This is the same for other Javascript frameworks like Ember, btw.

Thomas
  • 11,272
  • 2
  • 24
  • 40
  • Cool, yes, that's what I thought, having seen Angular-UI. I was just wondering what the conflicts could be, without using an already integrated framework, and what should I watch out for. Any best practises suggested if I go the pure Foundation+AngularJS way? – Iraklis Alexopoulos Nov 25 '13 at 13:12
  • You can consider to run an integration project as OpenSource like Angular-UI yourself on github. I would assume that this would attract contributions and review by other developers. Besides that I am not aware of special best practices apart from the general AngularJS (make it testable) advice. – Thomas Nov 25 '13 at 13:34
  • You're right, that sounds like a good idea. Thank you Thomas! – Iraklis Alexopoulos Nov 25 '13 at 13:49
  • 1
    I can't promise anything, but some people behind the AngularUI/bootstrap project are in advanced stages of planning for a project that would provide Zurb Foundation integration the same way as for Bootstrap. Won't happen overnight but we should see extensive effort in this direction. – pkozlowski.opensource Nov 25 '13 at 14:18
  • That sounds awesome, I will be keeping a close eye on that! Thanks! – Iraklis Alexopoulos Nov 27 '13 at 18:39
0

I've been using AngularJS with Foundation 4 without any problems for a while now - as others have said, you need to do a bit more work yourself but it's not a big deal.

In saying that, I've just upgraded to Foundation 5 and it's broken my Reveal provider for AngularJS (won't close)!

Nat Wallbank
  • 1,377
  • 12
  • 12
  • 1
    I see, thanks for your answer. Would you mind elaborating a bit, from a high level point of view, on the work you had to do yourself to make the integration work or some of the challenges that you face, like with the reveal module? How should I go about it? Just start using angular directives and whenever something breaks on the foundation side, create a directive for it? – Iraklis Alexopoulos Nov 27 '13 at 18:41
  • In many cases there was no work required at all - much of Foundation, e.g. grid, typography, etc. works with only the call to the .foundation() function required. – Nat Wallbank Dec 09 '13 at 11:27
  • For more complicated Foundation 'controls' such as Reveal, alerts, accordion, etc. it makes sense to abstract these with directives so that a) they're reusable across your project and b) so that they work in a more 'angular' way, e.g. with the accordion I liked to use it with angular's ng-include rather than having all of the different content items in the page on load. – Nat Wallbank Dec 09 '13 at 11:29
  • @natwallbank is there a shared repository (possibly on github) where directives and other work like yours is available (so that each person who wants to use Foundation isn't solving the same problem)? – jimmont Dec 24 '13 at 21:54
  • 1
    @jimmont I haven't seen one, and haven't yet got around to setting one up myself. I had been planning to put my Reveal code up on GitHub somewhere when I find time to make it more generic (there are some things in there specific to my organisation). If I get that far I'll let you know. I had heard that the team responsible for the bootstrap directives were planning something similar for Foundation, but I'm not sure whether they've made any progress with this... – Nat Wallbank Jan 03 '14 at 10:43
0

Yes, http://pineconellc.github.io/angular-foundation/ is evolving over the time, and now you have very less distance between bootstrap and foundation in terms of angular integration, and also plenty of documentation on Foundation site

http://foundation.zurb.com/sites/docs/ can help you get the things done.

sp14
  • 120
  • 10