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

Angular

Foundation uses AngularJS in tons of neat ways, from dynamic routing to component directives. Learn about our Angular integration here.


Already a seasoned Angular developer? Check out our modules documentation to learn how add our components to your Angular app.


Dynamic Routing

Views and state are fundamental to creating single-page web apps. To make defining routes faster, we wrote a special plugin that creates routes directly from each view's HTML file, so you don't have to write any JavaScript to set them up.

name

Required. The name of the view. Refer to this when using ui-sref to link between views.

--- name: home url: / ---

The name parameter can also use ui-router's dot notation to indicate a child view.

--- name: home.child url: /child ---

url

Required. Defines the URL at which a page can be directly accessed.

--- name: home url: / ---

When setting up a child view, don't include the segment of the URL for the parent view—it will be inserted automatically.

--- name: parent.child url: /child ---

In the above example, the final URL is /parent/child, assuming the URL of the parent view is /parent.

A URL can also contain parameters, which will be passed to the view's controller when it loads. Learn more about URL parameters on ui-router's documentation.

--- name: post url: /post/:id ---

animationIn

Sets a transition to play when the view animates in. Refer to the Motion UI documentation to see the list of built-in transitions.

--- name: home url: / animationIn: slideInRight ---

animationOut

Sets a transition to play when the view animates out. Refer to the Motion UI documentation to see the list of built-in transitions.

--- name: home url: / animationIn: fadeIn animationOut: fadeOut ---

parent

Defines the parent view for the current one. You can use this as an alternative to the parent.child syntax.

---- name: child parent: parent url: /child ----

controller

By default, all views use a controller called DefaultController, but this can be changed.

--- name: home url: / controller: HomeController ---

Among other things, the default controller passes a bunch of data through. For instance, all of your front-matter settings will be accessible via vars in your template. {{ vars.name }} will return the name of your route while {{ vars.path }} will return the relative path to the template.

Note that override a controller disables front-matter settings (except dynamic routing). If you want to use your own controller AND keep this feature, you can extend the DefaultController:

angular.module('application') .controller('MyController', MyController) ; MyController.$inject = ['$scope', '$stateParams', '$state', '$controller']; function MyController($scope, $stateParams, $state, $controller) { angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state})); // Your code... }

abstract

Defines a state as abstract. Abstract states can have child states, but can't be navigated to directly. Check out the ui-router documentation to learn more.

--- name: home url: / abstract: true ---

Angular Includes

An include is a chunk of HTML that exists in its own file, and can be dropped into any page using ng-include.

Note the use of single quotes inside the double quotes—this is required. The HTML inside the partial will be placed inside the element with ng-include.


Enabling HTML5 Mode and working with Angular on a server

To enable HTML5 mode with Angular (using regular URLs unprefixed by "\#"), a server has to support URL rewrites. The UI Router docs have a great write up on working with the HTML5mode and how to enable it on a variety of servers.

Foundation for Apps supports this out of the box for the development environment; however, for production, additional steps will be necessary.

If you'd like to run Foundation for Apps without HTML5 mode there is a line of code in the app.js that can be commented out:

locationProvider.html5Mode({ enabled: true, requireBase: true });

Note that Foundation for Apps cannot be run directly through the browser because it uses XMLHttpRequests to load up templates/partials for directives and pages. Running it directly will cause cross origin issues and will not work with linking.

If you are running in a subdirectory, try setting requireBase to the subdirectory name. So if you're running domain.com/subdirectory, set requireBase: '/subdirectory/'.


Angular and UI Router Helpers

There are some nuances of Angular itself and some of the libraries Foundation for Apps includes and uses that can make prototyping easier and quicker. Here's a rundown of some of these tools:

ui-sref

Instead of using <a href="/my/sub/page"> in a page to access another page, it's common practice to use the router. Foundation for Apps uses UI Router for its routing which allows for named route references. For instance, let's say there is a page with this front matter:

--- name: mypage url: my/sub/page ---

You can easily link to it like so:

my page

ui-sref can also take in parameters for pages that accept parameters. Here's another example page that uses parameters:

name: inbox.message url: inbox/:id

The page can be accessed via:

5th message

ui-sref-active

Now let's say we want to create a menu of links and want to make sure that the active link gets an extra special class to indicate that it is, indeed, active. There are two very similar ways to do this. The first one is using ui-sref-active, you can place this directive on either the ui-sref element or on its parent. When active, it will add a class of your choosing:

The other way is using ui-sref-active-eq which works almost the same with one difference. Whenever accessing a child page, the parent page will show up as active whenever using ui-sref-active. The ui-sref-active-eq is triggered ONLY when a specific page is triggered, no matter what their parent is.

In the previous example with inbox and inbox.message, the inbox page would show up as active with ui-sref-active when on the inbox.message page. With ui-sref-active-eq, inbox would show up as active only when specifically on the inbox page.

If none of this makes sense, stick with ui-sref-active-eq