DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Best Practices for Using Foundation with AngularJS

Best Practices for Using Foundation with AngularJS

Matt Raible user avatar by
Matt Raible
·
Feb. 25, 15 · Interview
Like (0)
Save
Tweet
Share
6.82K Views

Join the DZone community and get the full member experience.

Join For Free

i was recently tasked with doing some research to figure out the best way to use foundation with angularjs . goals for this research included:

  1. identify use cases of foundation for sites vs foundation for apps and recommend when to use each.
  2. look at pros and cons of using angularjs with foundation for sites.

i'm writing this blog post to get feedback from you, fellow web developers, on your experience with foundation. have you tried using foundation for sites with angularjs? if so, did you experience any pain?

from what i can tell, it looks like foundation for apps (fa) was created because folks had issues making angularjs and foundation 5 play nicely together. the next foundation explains why fa was created. reddit's web_design zone has quite a few comments related to this article .

from there, i found a few zurb blog posts that describe fa's three main advantages over foundation for sites (fs):

  1. a new grid
  2. motion ui
  3. angularjs integration

this thread on the foundation forums seems to indicate that fa would be good for developing applications while fs would be good for an intranet built on wordpress (since it's more of a website than a webapp).

foundation for apps is for making responsive web apps vs responsive web sites. the difference is in the structure of an app. they usually take up the screen and instead of the page scrolling, content in the app scrolls. apps employ stateful views, so a view can change without reloading the app, creating a better user experience.

this other thread backs up that notion.

foundation for apps will be an additional version of foundation - not a replacement.

this means foundation for sites will continue on along side the new apps version. ink will be foundation for emails.

having said that, choosing which one to use simply depends on the type of site you need to build. the apps grid is better suited to make web apps or apps that can be wrapped for native.

the syntax is different (on purpose) and we are taking great care to make it easy to get.

you should continue using foundation for sites as long as you need traditional scrolling websites. we don't expect people to convert an existing site to an app unless they need to re-do their site anyways.

i also found angular foundation which is a "a port of the angularui team's excellent angular-bootstrap project for use in the foundation framework".

the problem i see with using angular foundation over foundation for apps is that it's maintained by folks that aren't developing foundation. it's more of a "here's some bootstrap widgets as foundation widgets".

it could also come down to ie support. angular foundation supports ie9+ while foundation for apps is ie10+. from what you need to know about zurb foundation for apps :

foundation for apps works with all of the modern browsers including internet explorer 10. it doesn't support ie9 and other older browsers because of the new css3 features and issues of angularjs in older browsers. below is the snapshot of the compatibility list grabbed from zurb website.

foundation for apps compatibility

i wrote this article in order to publish my research findings about foundation for apps vs. foundation for sites. it seems like the natural thing to do is to use fa for any webapps we create and fs for any websites (e.g. wordpress sites). do you agree with these findings? any other recommended practices for integrating foundation with angularjs?

Foundation (framework) AngularJS app

Published at DZone with permission of Matt Raible, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • A Simple Union Between .NET Core and Python
  • How To Generate Code Coverage Report Using JaCoCo-Maven Plugin
  • The 31 Flavors of Data Lineage and Why Vanilla Doesn’t Cut It
  • Streamlining Your Workflow With the Jenkins HTTP Request Plugin: A Guide to Replacing CURL in Scripts

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: