--- title: Angular Modules url: /angular-modules name: angular-modules controller: AngularModsController ---
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
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 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.
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.
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 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.
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 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.
A simple helper which either adds or removes an activeClass
(is-active
) from an element
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.
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'
.
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.
zf-close(Directive)
When the element is clicked, closes the component with the ID specified.
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.
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.
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.
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.
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.
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.
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.