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

AngularJS Modules

Foundation components are broken down to various Angular modules meant to empower developers in need of a custom solution. Learn about the modules here.


Overall module structure

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
  - accordion
  - actionsheet
  - common
  - iconic
  - interchange
  - modal
  - notification
  - offcanvas
  - panel
  - popup
  - tabs
- vendor
  - .. external dependencies
- services
  - foundation core
  - foundation dynamic routing
  - dynamic routing animations

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.

Foundation Core

The first important module to discuss is the Core. The core contains a media query initiator, FoundationApi, and several utilities.

Foundation Media Query (FoundationMQ)

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

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

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)

Dynamic Routing

Dependencies:

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.

Dynamic Routing Animations

Dependencies:

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

Accordion

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.

Action Sheet

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.

Common

Dependencies:

The common module houses several helper directives:

Iconic

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

Interchange

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.

Modal

Dependencies:

The modal depends on FoundationApi in order to be toggled open or closed.

Notification

Dependencies:

The notification module actually houses two separate sets of notification directives: one of them for static notifications, one for dynamic. Both require FoundationApi

Offcanvas

Dependencies:

Offcanvas uses FoundationApi to open and close.

Panel

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.

Popup

Dependencies:

Popup uses FoundationApi to open and close. It also uses TetherJS to attach an element to the target.

Tabs

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.