We got the Foundation 5 with Sass styling working on our AngularJS project which was scaffolded by Yeoman.

• Yeoman – Setup AngularJS and Foundation 5 with Sass

 

Let’s continue our ng-foundation example above.

To utilize the Foundation framework in a more effective way, the Mad Mimi team creates some native AngularJS directives based on Foundation‘s markup and CSS which is available on Bower.

• Angular Foundation

 

1. Edit the bower.json to specify the angular-foundation dependency.

{
  "name": "ng-foundation",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.16",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "angular-resource": "1.2.16",
    "angular-cookies": "1.2.16",
    "angular-sanitize": "1.2.16",
    "angular-animate": "1.2.16",
    "angular-touch": "1.2.16",
    "angular-route": "1.2.16",
    "angular-foundation": "~0.2.2",
    "jquery": ">= 2.1.0",
    "modernizr": ">= 2.7.2",
    "fastclick": ">=0.6.11",
    "jquery.cookie": "~1.4.0",
    "jquery-placeholder": "~2.0.7"
  },
  "devDependencies": {
    "angular-mocks": "1.2.16",
    "angular-scenario": "1.2.16"
  },
  "appPath": "app"
}

 

2. Install the angular-foundation to your project.

bower install

 

3. Edit the ./app/scripts/app.js to include the angular-foundation module.

'use strict';

/**
 * @ngdoc overview
 * @name ngFoundationApp
 * @description
 * # ngFoundationApp
 *
 * Main module of the application.
 */
angular
  .module('ngFoundationApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'mm.foundation'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

 

4. Let’s try to add the Foundation accordion. Edit the ./ng-foundation/app/views/main.html as follow.

<button>Eureka!</button>

<!-- Foundation Accordion  -->
<label class="checkbox">
  <input type="checkbox" ng-model="oneAtATime">
  Open only one at a time
</label>

<accordion close-others="oneAtATime">
  <accordion-group heading="Static Header, initially expanded" is-open="true">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
    {{group.content}}
  </accordion-group>
  <accordion-group heading="Dynamic Body Content">
    <p>The body of the accordion group grows to fit the contents</p>
      <button class="button small" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
  </accordion-group>
  <accordion-group is-open="isopen">
      <accordion-heading>
          I can have markup, too! <i class="right" ng-class="{'fa fa-chevron-down': isopen, 'fa fa-chevron-right': !isopen}"></i>
      </accordion-heading>
      This is just some content to illustrate fancy headings.
  </accordion-group>
</accordion>

<div class="jumbotron">
  <h1>'Allo, 'Allo!</h1>
  <p class="lead">
    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
    Always a pleasure scaffolding your apps.
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>
...

 

5. Edit the ./app/scripts/controller/main.js.

'use strict';

/**
 * @ngdoc function
 * @name ngFoundationApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the ngFoundationApp
 */
angular.module('ngFoundationApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    $scope.oneAtATime = true;

    $scope.groups = [
      {
        title: "Dynamic Group Header - 1",
        content: "Dynamic Group Body - 1"
      },
      {
        title: "Dynamic Group Header - 2",
        content: "Dynamic Group Body - 2"
      }
    ];

    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

    $scope.addItem = function() {
      var newItemNo = $scope.items.length + 1;
      $scope.items.push('Item ' + newItemNo);
    };
  });

 

6. Start the application and verify if the accordion is working.

grunt serve

 

7. Make sure you have included the angular-foundation in the karma.conf.js, otherwise all unit test cases will be failed.

module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-cookies/angular-cookies.js',
      'app/bower_components/angular-sanitize/angular-sanitize.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-foundation/mm-foundation-tpls.js',
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],
...

 
Done =)

Reference:

• Angular Foundation
• GitHub – madmimi/angular-foundation