--- title: Angular Modules url: /angular-modules name: angular-modules controller: AngularModsController ---

Angular Modules

Each of our UI components are packaged as an Angular module. You can import them all at once or pick and choose.


Bootstrapping

Our Bower/npm package, as well as the template stack, includes a sample app.js file which bootstraps an Angular application with UI Router, ng-animate, and every Foundation for Apps module.

In the below example, a module called foundation imported. This is a shorthand to import every UI component at once. However, it's also possible to import inidividual components, such as foundation.modal or foundation.tabs.

When writing your own bootstrapping code, the only essential configuration is setting up the $urlProvider and $locationProvider

(function() { 'use strict'; angular.module('application', [ // Angular libraries 'ui.router', 'ngAnimate', // Foundation UI components 'foundation', // Routing with front matter 'foundation.dynamicRouting', // Transitioning between views 'foundation.dynamicRouting.animations' ]) .config(config) .run(run) ; config.$inject = ['$urlRouterProvider', '$locationProvider']; function config($urlProvider, $locationProvider) { // Default to the index view if the URL loaded is not found $urlProvider.otherwise('/'); // Use this to enable HTML5 mode $locationProvider.html5Mode({ enabled: false, requireBase: false }); // Use this to set the prefix for hash-bangs // Example: example.com/#!/page $locationProvider.hashPrefix('!'); } function run() { // Enable FastClick to remove the 300ms click delay on touch devices FastClick.attach(document.body); } })();

foundation.core
(Module)

The core module should not be required directly, as nearly every other component requires it already. It includes a media query helper, the component API, and a few utilities.

foundationApi
(Service)

FoundationApi is what runs all of Foundation's modules. It's the master puppeteer. It currently has a total of 8 methods but will probably expand to have more.

FoundationApi.subscribe('identifier', callback)

FoundationApi has its own pub/sub system that is meant to work as a message system of sorts, or an event system. Basically, using a unique identifier, a directive (or other modules) can subscribe to any messages posted to that identifier. Each idenitifier can have its own list of subscribers (rather than a single subscriber). Make sure the callback accepts messages in a format your publishers are aware of. For example, most directive can be opened or closed by publishing open, close, or toggle to their identifier.

FoundationApi.unsubscribe('identifier', callback)

This method is used to unsubscribe any listeners from an object. Note that once a directive is unsubscribed, it will not contain any listeners until otherwise specified by re-initiating the .subscribe method. It takes in element's unique identifier as an argument with an optional callback to run after the element has been unsubscribed.

FoundationApi.publish('identifier', 'message')

The publishing part of the Api is as simple as the subscriber part. Note that you can publish to a non-existing identifier without getting any sort of error. This is a safeguard for directives or services that publish upon invokation but do not necessarily have any subscribers. One of them is the resize publisher in the Media Query initiator.

FoundationApi.getSettings()

FoundationApi has a settings object that can be shared between different modules which may want access to it. Because FoundationApi is an Angular service, it operates as a singleton so every module that has access is accessing the same exact instance of it. The only default setting so far is the mediaQueries object.

FoundationApi.modifySettings(tree)

Using Angular's .extend() function, FoundationApi can extend the settings object with custom settings. You may use these for yourself and your own setup.

FoundationApi.generateUuid()

FoundationApi keeps an internal store of unique IDs it generates. generateUuid() creates such IDs and saves them. This is to prevent any possible ID clashes. These IDs are used for several directives but you can use them for your own purposes.

FoundationApi.toggleAnimation(element, futureState)

A simple helper which either adds or removes an activeClass (is-active) from an element

FoundationApi.animate(element, futureState, animationIn, animationOut)

Another helper that works by replicating Angular's built-in ngAnimate functionality with several custom additions to work with Foundation's internal MotionUI. These are mostly for internal use; however, you can easily animate in and animate out any element the same way $animate works.

FoundationApi.animateAndAdvise(element, futureState, animationIn, animationOut)

Does the same thing as FoundationApi.animate, with the addition of firing an event at the completion of an animation. Events are 'active-true' and 'active-false'.

FoundationApi.closeActiveElements(options)

This utility is used to close all foundation closable elements. It selects any element that has an is-active class and an zf-closable attribute. You're welcome to make your own directives and plugins work with it. It publishes a close message to the ID of the selected element.

Utils
(Factory)

Utils is a small module which has a couple of simple methods. One of them is throttle(func, delay) which allows for simple throttling (and is used in the Media Query initiator)


foundation.mediaquery
(Module)

Dependencies: foundation.core

FoundationMQ
(Service)

FoundationMQ used to be a part of the Foundation Core but now is available as a supplement to the codebase. It has numerous functions including the Media Query Initiator

The Media Query initiator uses built-in foundation styles to create a mediaQueries setting under the FoundationApi. This is used for Interchange but it can be used for whatever you need. This module depends on Foundation for Apps css to be present but it will fail silently if you don't want to use this feature.

The Initiator also publishes an event to the FoundationApi called "resize" whenever the window is resized (throttled to happen 50ms at a time).

The FoundationMQ service is used to get the media query settings by shorthand instead of using FoundationAPI. There are several helper functions that allow Interchange to exist but can be used outside of Interchange as well to sort through various MediaQuery scenarios to get a list of media queries that match the current browser configuration and also to gather these scenarios from a parent element that holds Interchange-style elements


foundation.dynamicRouting
(Module)

Dependencies: ui.router

The Angular page describes how to take advantage of the Dynamic Routing; however, it does not discuss the code and the many different options that come with dynamic routing.

The dynamic router runs its own .config function when it's injected which digests out foundationRoutes object created by our gulp plugin.

The module also includes a DefaultController which exposes the variables declared in the front-matter.


foundation.dynamicRouting.animations
(Module)

Dependencies: ngAnimate, foundation.dynamicRouting

This module is an optional add-on which allows the dynamically routed views to animate as long as there is an animationIn and an animationOut in the front-matter of the template


foundation.common
(Module)

Dependencies: foundation.core

A set of common directives used to manipulate other Foundation components.

zf-open
(Directive)

When the element is clicked, opens the component with the ID specified.

Open modal

zf-close
(Directive)

When the element is clicked, closes the component with the ID specified.

Close modal

If placed directly inside a closable component, you don't need to specify an ID—the directive will automatically close the nearest closable parent.

zf-toggle
(Directive)

When the element is clicked, opens a component with the ID specified, if it's closed, or closes it if it's open.

Toggle panel

zf-hard-toggle
(Directive)

When the element is clicked, toggles the component with the ID specified (like zf-toggle), and also closes all other open components.

Toggle panel

zf-swipe-close
(Directive)

Works like zf-close, except it's triggered by swipe events instead of clicks. Requires the HammerJS touch library to be installed.

Specify a direction to swipe as the value of the directive.

zf-esc-close
(Directive)

Apply this directive to the <body> element, to enable pressing the esc key to close any open components.

<body zf-esc-close> <!-- ... --> </body>

foundation.accordion
(Module)

Includes the zf-accordion and zf-accordion-item directives, for creating accordions.

Check out the documentation for accordions to learn how to use them.


foundation.actionsheet
(Module)

Dependencies: foundation.core

Includes the zf-action-sheet, zf-as-button, and zf-as-content direcitves, for creating responsive dropdowns/action sheets.

This component supports the common API, which means it can be manipulated with zf-open, zf-close, and zf-toggle

Check out the documentation for action sheets to learn how to use them.


foundation.iconic
(Module)

Dependencies: ngSVGAttributes

We partnered with the folks at Iconic to include a sample of 24 icons from their responsive icon set. Foundation for Apps includes the Iconic JavaScript library, which we wrapped in an Angular module.

zf-iconic
(Directive)

A wrapper for the Iconic data attributes, which allows you to specify the name of an icon insteead of the entire file path.

Iconic
(Service)

A wrapper for the IconicJS object the Iconic JavaScript places on the window object. Learn more about how the Iconic JavaScript works here.

Check out the documentation for Iconic to learn how to use it.


foundation.interchange
(Module)

Dependencies: foundation.core, foundation.mediaquery

Includes the zf-interchange directive for loading HTML partials responsively.

Check out the documentation for Interchange to learn how to use it.


foundation.modal
(Module)

Dependencies: foundation.core

Includes the zf-modal directive for creating modals.

This component supports the common API, which means it can be manipulated with zf-open, zf-close, and zf-toggle

This component can be animated with Motion UI, by adding the animation-in and animation-out attributes to the element.

Modal Factory
(Factory)

Another way to programatically create modals. It takes an object as an optional configuration as an argument. The id property is an optional id that you want to assign to your element, templateUrl (or alternatively template if you want to place the markup directly) is the path to the markup that the element should use, and contentScope creates a direct link between two scope variables. For example, if you had a modal nested inside another directive, you could use contentScope to directly link the controller scope to the directive scope.

$scope.foo = "Bloop!"; $scope.bar = "Blee!"; var config = { id: 'your optional id here', template: '{{foo}} {{bar}}', contentScope: { foo: $scope.foo, bar: $scope.bar }, animationIn: 'slideInFromTop' } $scope.modal = new ModalFactory(config);
Activate Modal, Captain!
Activate Modal, Captain!

Check out the documentation for modals to learn how to use them.


foundation.notification
(Module)

Dependencies: foundation.core

zf-static-notification
(Directive)

Creates a static notification. Use these for prototyping.

This notification's content is static.

zf-notification-set
(Direcitve)

Creates an empty container to house multiple notifications.

zf-notify
(Directive)

When an element with this directive is clicked, it adds a notification to the zf-notification-set element with the specified ID.

Notify

Notification Factory
(Factory)

Another way to programatically create notifications. It takes an object as a configuration as an argument. The id property is an optional id that you want to assign to your element and position property to set the property of the notification set.

// instantiate the notification set var notifSet = new NotificationFactory({ position: 'top-right' }); // on some event, call the following notifSet.addNotification({ title: "Great success!", content: "Congratulations", color: 'success' });
Add a notification

Check out the documentation for notifications to learn how to use them.


foundation.offcanvas
(Module)

Dependencies: foundation.core

Includes the zf-offcanvas directive, for creating off-canvas panels.

This component supports the common API, which means it can be manipulated with zf-open, zf-close, and zf-toggle

Check out the documentation for off-canvas to learn how to use them.


foundation.panel
(Module)

Dependencies: foundation.core

Includes the zf-panel directive, for creating slide-out panels.

This component supports the common API, which means it can be manipulated with zf-open, zf-close, and zf-toggle

Check out the documentation for panels to learn how to use them.


foundation.popup
(Module)

Dependencies: foundation.core

Includes the zf-popup directive, for creating fixed popup panels. Requires the Tether JavaScript library.

This component supports the common API, which means it can be manipulated with zf-open, zf-close, and zf-toggle

Check out the documentation for popups to learn how to use them.


foundation.tabs
(Module)

Dependencies: foundation.core

Includes the zf-tabs, zf-tab, and zf-tab-content directives, for creating tabbed content.

Check out the documentation for tabs to learn how to use them.