Foundation for Apps is a new web app framework built around AngularJS that is meant to make creating web apps or prototypes to be simple, quick, and easy for a broader audience than a self-built framework. It succeeds in many respects, but its documentation is missing vital information about the specific changes Foundation makes to AngularJS. Many of the basics of Angular don’t work in Foundation out of the box, but the functionality can be replicated if you know the undocumented features of Foundation for Apps. This article is meant to make those features much more obvious & better-understood.

Getting Started

First, follow the thorough install process on the readme here: https://github.com/zurb/foundation-apps /client/assets/ is where your images, SCSS files, webfonts, and other assets will go, but that does not include anything you add with bower and include in your gulp file to be added to the compiled site, such as angular modules.

Open client/assets/js/app.js – this is your most important file. Controllers, directives, modules…
Set html5Mode parameters enabled & requireBase to true /client/index.html is the overall template for your app. It should include anything that persists on all pages, such as a main menu. /client/templates/ is where you’ll be defining each of your pages with one .html file each.

To add partials (view code that may be present on multiple pages but not all, such as a sidebar), create a folder in /client/ called partials and make a new .html file for each partial you need.
To include a partial in your site, use ng-include:

/gulpfile.js is where your gulp tasks are defined. These include build, & server, but each sub-step is defined as well.

If you ever have an error in your app.js during complilation & minification, npm start ceases to continue updating your app.js file in the main application when you continue saving it. When this happens, you’ll have to cancel (ctrl+c) your terminal task and restart it with npm start

Adding Dependencies

Find line 4 of app.js:

angular.module('application', [

This is where you define your dependencies; you can add any angular module you need. In this instance, let’s install nvd3 Chart Directives so we can easily make charts later on.

Make sure the last of the ‘foundation’ entries ends in a comma, then add a line and enter your module’s name in single quotes, which should be in its documentation:

'nvd3ChartDirectives'

To add your dependency’s files, make sure your terminal is in your app’s base folder, and use bower like this:

bower install nvd3ChartDirectives

Then, depending on what files from that module you need, add references to the module’s files in your gulpfile.js :
Add JS files to a new line before the 'app.js' entry in line 39, in the same format but ending with a comma:

'bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js',

Add CSS files to the gulp 'copy' task in the same format as the existing entries:

// nvd3 CSS
gulp.src('./bower_components/nvd3/nv.d3.min.css')
.pipe(gulp.dest('./build/assets/css/'));

Using this method, you’ll also need to add a link in your /client/index.html head to the newly placed CSS file.

<link href="/assets/css/nv.d3.min.css" rel="stylesheet" type="text/css">

Adding a custom controller

To add a controller for one of your pages, in app.js after your dependencies, add a standard AngularJS controller line, with these specific variables included:

.controller('CategoryCtrl', function($scope, $log, $state){
// Controller code here
})

$scope enables you to pass data to your page – for instance, this code lets you use the greeting variable in your view.

$scope.greeting = 'hello';

$log enables you to log information to the console in standard AngularJS fashion, as seen in the docs https://docs.angularjs.org/api/ng/service/$log $state is a variable special to Foundation for Apps, and it allows you to access URL parameters. This is very important and currently impossible to find in the documentation.

In your controller, you can add data and methods to the page which it controls.

To set a page to use the controller that you created, rather than the default empty one that Foundation for Apps creates for you, add the name of the controller in your definition area of the page’s template html file:

---
name: categories
url: /categories
controller: CategoriesCtrl
---

Miscellaneous Notes

Within an ng-repeat loop, you can access the loop’s key with $index.