Angularjs + Zurb Foundation, do they play well together?

Question

I'm having a hard time setting up a project with angular and foundation 3 (rails in backend). So I have been searching a lot but there aren't many results.

I'm serving angular from a subfolder (localhost:3000/app), and started the html something like this

!!!5
%html{ "ng-app" => "App" }
  %head
    -# I tried this for html5 url on angular, not so much help so far
      %base{:href => "/app/"}
    %title
      NG APP
      ...
  %body
    %header
      ...
    %main
      = yield
    %footer
      ...
    = javascript_include_tag "application"
    = yield :javascripts

A couple of view work just fine. But when I tried to use the foundations tab, I could make work, because angular pass the anchor as a url that shold be check against $routeProvider.

So, I check some question here, and part of the answers give me the impression that foundation work fine enabling html5 mode in angular. (Which I could make it) and other answers say that in order to make work foundation with angular should write a directive for every component on foundation. Or the last case is moving to Twitter Bootstrap.

So, I can find a unified answer, could you please, confirm if right now I can use foundation with angular in a direct way. Thanks.

Answer 1

The best choice would be wrapping Foundation plugins in angular services or using only CSS/SASS provided with the framework and recreating the behaviour from scratch. Focus on prototyping using markup + stylesheets and then create logic in the angular way. At least, this is what I would do if I needed / had to use Foundation.

Twitter Bootstrap works in a similar way and the only advantage of moving to this framework is the fact that you can find plenty of angular modules / directives wrapping available plugins. In this case you wouldn't have to do the same job twice and well.

1. Take a look here: http://mgcrea.github.io/angular-strap/ in the first place.
2. Then look for bootstrap-based components in Bower.io Components Directory

Also, as some people in the comments have mentioned, you might need to bootstrap you application manually, which is as simple as wrapping you app in a module and running:

angular.bootstrap(element[, modules]);

// http://docs.angularjs.org/api/angular.bootstrap

As I said, it's usually better not to reinvent the wheel.

Edit:

There's an interesting discussion on Google Groups regarding this topic (and unsurprisingly users' conclusions are quite similar): https://groups.google.com/d/msg/angular/Htkzt7Fsaog/TeFm5l4snTwJ

Answer 2

Here is an almost complete adaptation of the Angular UI Bootstrap components to the Foundation CSS: http://madmimi.github.io/angular-foundation/.