--- name: angular url: /angular title: Angular ---
Already a seasoned Angular developer? Check out our modules documentation to learn how add our components to your Angular app.
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.
The name
parameter can also use ui-router's dot notation to indicate a child view.
url
Required. Defines the URL at which a page can be directly accessed.
When setting up a child view, don't include the segment of the URL for the parent view—it will be inserted automatically.
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.
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.
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.
parent
Defines the parent view for the current one. You can use this as an alternative to the parent.child
syntax.
controller
By default, all views use a controller called DefaultController
, but this can be changed.
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
:
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.
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
.
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:
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/'
.
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:
You can easily link to it like so:
ui-sref
can also take in parameters for pages that accept parameters. Here's another example page that uses parameters:
The page can be accessed via:
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