--- title: Angular Modules url: /angular-modules name: angular-modules ---
The AngularJS portion of Foundation for Apps has been refactored to fit the most popular styleguides but also to fit most AngularJS paradigms. In short, FA is properly modularized, has the proper DI, and has as little dependencies as possible.
Currently, most of the modules are dependent on a module called foundation.core
which contains the FoundationApi
.
The file structure is pretty simple to follow. All of the angular stuff is under js/angular
in the main repo:
Components
Vendor
Services
Every module folder is pre-packaged with the correct javascript file which contains all of the pertinent directives, controllers, configurations, etc. The necessary template files are included in the folder as well. The directives have a hard-coded path to those via /components/[component name]/[component template
so if you use these, make sure to copy the templates in the correct place.
The first important module to discuss is the Core. The core contains a media query initiator, FoundationApi, and several utilities.
Dependencies:
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
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.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 Angulars .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.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 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)
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.
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
The accordion has no external dependencies and can function on its own (as long as the CSS is there). It has several options:
Note: This element cannot be opened, closed or toggled by any of the Foundation helpers.
Dependencies:
The actionsheet uses the FoundationApi for various tasks. Most notably, it can be toggled or closed by a Foundation Helper. It also uses FoundationApi to create a unique ID if one is not assigned.
Dependencies:
The common module houses several helper directives:
Dependencies:
The Iconic module includes both a directive to create an icon but also a service that works as a wrapper for the IconicJS object
Dependencies:
Interchange uses media queries to break at different points. Those are extracted from the CSS and implemented as part of the core module. Interchange also features some of its own media queries. Note that Interchange won't work without the breakpoints in the CSS.
Dependencies:
The modal depends on FoundationApi in order to be toggled open or closed.
Dependencies:
The notification module actually houses two separate sets of notification directives: one of them for static notifications, one for dynamic. Both require FoundationApi
Dependencies:
Offcanvas uses FoundationApi to open and close.
Dependencies:
Panel uses FoundationApi to open and close. It also uses it for more complex animations and uses Media Queries (provided by Foundation CSS) in order to close whenever a link is clicked and the size of the window is smaller than medium.
Dependencies:
Popup uses FoundationApi to open and close. It also uses TetherJS to attach an element to the target.
Dependencies:
Tabs, like Notifications, has two different groups of directives. One set is meant for regular tabs, the other is meant for custom-built tabs and tab-like functionality.