Foundation 4 with AngularJS

Posted: July 26, 2013

The tricky part about getting Foundation 4 integrated into your AngularJS app is getting the JavaScript to work.

If you follow the instructions, the JavaScript features might work at first, but as you load different views, they very well may break.

For this example, I started with the angular-seed project. This example will demonstrate how to integrate the Foundation javascript dropdown feature into your AngularJS app.

Let's take a look at index.html. Pay attention to the order the files are listed.

Note: I placed all the foundation files in lib/foundation. Keep that in mind as you integrate this code to your own codebase.

index.html

<html lang="en" ng-app="contain">
<head>
  <!-- Foundation CSS -->
  <link rel="stylesheet" href="lib/foundation/css/normalize.css" />
  <link rel="stylesheet" href="lib/foundation/css/foundation.css" />
  <!-- Application CSS -->
  <link href="css/app.css" rel="stylesheet" />
</head>
<body>
  <div ng-view></div>

  <!-- Foundation JS dependencies -->
  <script src="lib/foundation/js/vendor/jquery.js"></script>
  <script src="lib/foundation/js/vendor/custom.modernizr.js"></script>
  <script src="lib/foundation/js/foundation/foundation.js"></script>
  <script src="lib/foundation/js/foundation/foundation.dropdown.js"></script>

  <!-- AngularJS core -->
  <script src="lib/angular/angular.js"></script>

  <!-- AngularJS app files -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

</body>
</html>

Notice we do not have $(document).foundation(); in the body. This is intentional.

Instead, we need to add it to the application declaration so it gets executed with each view load. All that was added to the official angular seed app is the .run() section at the bottom.

app.js

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/view1.html', controller: 'DashboardCtrl' });
    $routeProvider.when('/hosts', {templateUrl: 'partials/hosts.html', controller: 'HostsCtrl'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }])
  .run(function($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
      $(document).foundation();
    });
  });

If you would like to add additional Foundation javascript features, simply add the appropriate javascript file below line 16 of index.html.

Sean (Webthingee) Lange created a GitHub project with Foundation installed per this article.

You can get it here: https://github.com/webthingee/nc-angular-foundation