AngularJS directives of Foundation

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

 

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.

 

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

angularjs-foundation-directives
 

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:

Advertisements

5 thoughts on “AngularJS directives of Foundation”

  1. Hello,

    My-self Aswini,I am working with angularjs with mm-foundation please give me the detailed explanation about mm-foundation like mm.foundation.tpls,mm.foundation.accrodian why we are config in our module of application and one more thing and how these are working in my app. some one using .html files i coudn’t find these file path any where in my app.So some one please help me out in this.

    Thanks in advance.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s