--- title: Angular JS Mobile UI framework with Bootstrap 3 Css ---
**Mobile Angular UI** is ***a mobile UI framework*** just like Sencha Touch or jQuery Mobile but is based on ***trending technologies you already know and love*** like Angular.js and Twitter Bootstrap.
Download Demo Donate
## Angular JS No jQuery dependencies, no fat bootstrap js. Just a few angular.js directives super easy to learn to put things together. Mobile Angular UI follows best practices to improve Angular JS performances and ensure a smooth user experience.
## Bootstrap 3 for Mobile Original Bootstrap 3 stripped out of responsive media queries that are put apart in separate files (just include what you need). [FontAwesome](http://fontawesome.io/) Icons are included by default in place of Glyphicons.
## Mobile Components Mobile Angular UI provides essential mobile components that are missing in Bootstrap 3, in particular sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll.



Getting Started

### Installation Either install via `bower` or download it ``` sh bower install --save mobile-angular-ui ``` Load files in the head section of your html ``` html ``` The `base` css includes only the mobile css (it has no media queries), while the `desktop` css contains just a few lines of code to make sidebars always visible on desktop. So with these two files you can only work with the `.*-xs` classes from Bootstrap. If you need more you can include other files from the distribution package to fit your needs. eg. you could add `mobile-angular-ui-max-width-767px.css` to use `(max-width: 767px)` media queries from Bootstrap. In the example above some other modules are included along with the core js `mobile-angular-ui.min.js`. ### mobile-angular-ui.touch `mobile-angular-ui-touch-[implementation].js` provides touch events and `swipeLeft`, `swipeRight` directives. Available implemetations are: - `mobile-angular-ui-touch-fastclick.min.js` (using `fastclick.js`) - `mobile-angular-ui-touch-ng.min.js` (using `angular-touch`) ### mobile-angular-ui.scrollable `mobile-angular-ui-scrollable-[implementation].min.js` will enable `[scrollable]` directive. Available implemetations are: - `mobile-angular-ui-scrollable-overthrow.min.js` (using `overthrow.js`) - `mobile-angular-ui-scrollable-iscroll.min.js` (using `iscroll`) - `mobile-angular-ui-scrollable-iscroll-lite.min.js` (using `iscroll-lite`) ### Initialization Then you can initialize your Angular application declaring `mobile-angular-ui` as a dependence. ``` javascript angular.module('myApp', ["mobile-angular-ui"]); ``` This will not load ngRoute, touch events and scrollable modules by default. A more complete initialization would be like that: ``` javascript angular.module('myApp', [ "ngRoute", "mobile-angular-ui", "mobile-angular-ui.touch", "mobile-angular-ui.scrollable" ]).config(function($routeProvider) { $routeProvider.when('/', { // ... }); // ... }); ``` If you wish you can avoid to load `mobile-angular-ui` at all and pick a subset of the loaded modules to fit your needs. This is how the `mobile-angular-ui` module is defined with its dependencies. ``` javascript angular.module("mobile-angular-ui", [ 'mobile-angular-ui.pointer-events' 'mobile-angular-ui.active-links' 'mobile-angular-ui.directives.toggle' 'mobile-angular-ui.directives.overlay' 'mobile-angular-ui.directives.forms' 'mobile-angular-ui.directives.panels' 'mobile-angular-ui.directives.capture' 'mobile-angular-ui.directives.sidebars' 'mobile-angular-ui.directives.navbars' ]); ``` ### Basic Layout ``` html
``` ### Differences with Bootstrap 3 1. It uses font-awesome in place of glyphicons 2. responsive css rules for *-sm, *-md, *-lg are moved out of the default bundle 3. removed/unsupported components: - breadcrumbs and pagination: they are just not the best way to navigate a mobile app - tooltips: unlikely to be useful with small screens and touch devices, popovers should be enough - modals: are replaced by overlays

Angular Directives

Before going ahead with components you may want to familiarize with some basic mobile angular ui directives. First of all: one thing you'll always have to deal with approaching mobile web app development is scroll and `position:fixed` bugs. Due to the lack of support in some devices fixed positioned elements may bounce or disappear during scroll. Also mobile interaction often leverages horizontal scroll eg. in carousels or sliders. We use scrollable areas to solve any problems related to scroll. Since it is not always available in touch devices we bundle an implementation of scrollable with [iScroll](https://github.com/cubiq/iscroll) or [Overthrow](http://filamentgroup.github.io/Overthrow/). To use it include either `mobile-angular-ui-scrollable-iscroll.js`, `mobile-angular-ui-scrollable-iscroll-lite.js` or `mobile-angular-ui-scrollable-overthrow.js`. Markup for any scrollable areas is as simple as: ``` html
...
``` This piece of code will trigger a directive that properly setup a new iScroll or `Overthrow` instance for the `.scrollable` node. Toggle module is the basic to implement tabs, accordions, collapsibles and all the other components that need to be selectively or exclusively switched on or off. Toggle module defines two directives: `toggle` and `toggleable`. These two directives replaces almost all of the bootstrap 3 jquery stuffs. A `[toggle]` node will works as a trigger to turn `on` or `off` one or more targeted `[toggleable]` nodes by translating clicks into _toggle events_.
`toggle` directive parameters
toggle Possible values are `on`, `off` or `toggle` (default to `toggle`)
targetThe `id` of the corresponding toggleable. One of `target` or `targetClass` is required.
targetClassThe `class` of the corresponding toggleable. One of `target` or `targetClass` is required. Notice that this wont select nodes with dom methods.
bubbleIf `bubble` is set `[toggle]` does not capture the click event and let it to be propagated to dom.
activeClassThe `class` the element will acquire when corresponding target is active and that will be removed when target is inactive. Does not affect `targetClass`.
inactiveClassThe `class` the element will acquire when corresponding target is inactive and that will be removed when target is active. Does not affect `targetClass`.
parentActiveClassThe `class` the parent of the element will acquire when corresponding target is inactive and that will be removed when target is active. Does not affect `targetClass`.
parentInactiveClassThe `class` the parent of the element will acquire when corresponding target is inactive and that will be removed when target is active. Does not affect `targetClass`.
`toggleable` directive parameters
exclusionGroup Instruct the element to _"turn itself off"_ when another element of the same `exclusionGroup` is activated.
defaultThe initial state of the element `active` or `inactive` (default to `inactive`).
activeClassThe `class` the element will acquire when is active and that will be removed when is inactive.
inactiveClassThe `class` the element will acquire when is inactive and that will be removed when is active.
parentActiveClassThe `class` the parent of the element will acquire when is inactive and that will be removed when is active.
parentInactiveClassThe `class` the parent of the element will acquire when is inactive and that will be removed when is active.
To understand how it works consider the following example: ``` html

``` The purpose of this code is to create a black `lightbulb` icon getting colored when it turns on. The `lightbulb` should be turned on and off by three switches. The first alternates its state, the second turns it on and the latter turns it off. `#lightbulb` is a `[toggleable]` that wraps a lightbulb icon in form of font icon. When activated it acquires the `text-primary` class, thus being highlighted with the primary color. The first `[toggle]` turns on and off the `#lightbulb` depending of its state. It also reflects the `#lightbulb` activation since when lightbulb is active it takes the `active` class. Second and third `[toggle]` are only sending `on` or `off` commands to `#lightbulb`. Try this example in the demo #### Programmatic API Toggle module exposes the `toggle` and `toggleByClass` functions through `$rootScope` to interact with `[toggleable]` in a programmatic way. This will let you do something like that: ``` html
``` `toggle` method takes 2 parameters: the `[toggleable]` id and the command to send (one of `toggle`, `on` or `off`). `toggleByClass` method takes also 2 parameters: the `[toggleable]` class and the command to send. The capture module exposes directives to let you extract markup which can be used in other parts of a template. It provides a way to move or clone a block of markup to other parts of the document. This method is particularly useful to setup parts of the layout within an angular view. Since blocks of html are transplanted within their original `$scope` is easy to create layout interactions depending on the context. Some tipical task you can accomplish with these directives are: _setup the navbar title depending on the view_ or _place a submit button for a form inside a navbar_. **Usage:** Use `yield-to` as a placeholder. ``` html
``` Use `content-for` inside any view to populate the `yield-to` content. ``` html
My View Title
``` Since the original scope is preserved you can use directives inside `content-for` blocks to interact with the current scope. In the following example we will add a navbar button to submit a form inside a nested view. ``` html
``` ``` html
``` ``` javascript app.controller('newCustomerController', function($scope, Store){ $scope.customer = {}; $scope.createCustomer = function(){ Store.create($scope.customer); // ... } }); ``` If you wish you can also duplicate markup instead of move it. Just add `duplicate` parameter to `contentFor` directive to specify this behaviour. ``` html
```
`yieldTo` directive parameters
yieldTo An unique name to reference the placeholder.
[content] The default content. Default content is restored each time on `$routeChangeStart`.
`contentFor` directive parameters
contentFor An unique name to reference the placeholder.
duplicate Indicates whether the content should be duplicated instead of moved.
[content] The content to take place in the placeholder.


Components

### Navbars Bootstrap default navbars are awesome for responsive websites, but are not the best to interact with in a small screen. Plus fixed positioning is not an option to create navbars standing in top or bottom of the screen. Mobile Angular Ui offers an alternative to bootstrap navbars that is better suitable for mobile. It uses scrollable areas to avoid scroll issues. In the following figure you can see the difference between fixed navbars and navbars with absolute positioning.
Here is the basic markup to achieve this. ``` html
``` As you can notice the base class is `.navbar-app` while the positioning is obtained adding either `.navbar-absolute-top` or `.navbar-absolute-bottom` class. #### Mobile Navbar Layout Top navbar in mobile design most of the times follows a clear pattern: a centered title surrounded by one or two action buttons, the _back_ or the _menu_ buttons are two common examples. Twitter Bootstrap ships with a different arrangement of components for navbars since they are supposed to host an horizontal navigation menu. `.navbar-app` is specifically designed to support this different type of interaction and arrangement. Consider the following example: ``` html ``` As you can see the markup is pretty straightforward: there is a `.navbar-brand` with its new specification, `.navbar-brand-center`, that will render the title centered and below the two button groups. Note that `.navbar-brand-center` will position the title with absolute positioning ensuring that it will never cover the buttons, which would cause interaction problems. ### Sidebar ``` html ``` As you can see sidebars can be placed either in left side or right side adding respectively `.sidebar-left` and `.sidebar-right` classes. You should also notice that a sidebar is a toggleable. A sidebar is shown when parent has the `.sidebar-[left|right]-in` class moving the above `.app` element left or right. `.sidebar` and `.app` are supposed to be siblings. The purpose of the `toggle` directive for `.list-group` is to make the sidebar disappear when a link is clicked or tapped, the `bubble` parameter is infact used to let click events be propagated to inner links. ``` html
``` Sidebars can be toggled using the `toggle` directive either as an attribute or programmatically via `toggle('sidebarId')` ``` html
``` ### Tabs Tabs component is realized via `toggle` and `toggleable` directives using `exclusion-group` parameter to inactivate other tabs but the active one. ``` html

``` ### Accordion and Collapse Accordion component is achieved via `toggle` and `toggleable` directives. `exclusion-group` parameter is used to inactivate other panels but the active one. ``` html

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

``` ### Overlays An overlay is an attempt to replace modals with a component better following mobile patterns. This is the basic markup for an `overlay`. An `overlay` directive implicitly sets up a `toggleable` using its argument as `id`. ``` html

My Overlay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, ex eaque possimus ipsa ab quasi quos corporis consequatur laudantium? Ab assumenda delectus quo velit voluptates doloribus. Earum odit facilis qui.

Ok Cancel

``` ### Dropdowns Dropdowns are also achieved with `toggle` and `toggleable`. ``` html ``` ### Carousels Carousels have the same markup of bootstrap but their behaviour is achieved with 2 functions available to `$rootScope`: `carouselPrev(id)` and `carouselNext(id)`. This is a basic example that uses `ngSwipeLeft` and `ngSwipeRight`. ``` html ``` To create more fancy effects and touch friendly experience you can use `$swipe` service direclty. `$swipe` service is provided by `angular-touch` and is included in both `mobile-angular-ui-touch-fastclick` and `mobile-angular-ui-touch-ng`. This is a more complete example to explain how to build a swipe friendly carousel. ``` html ``` Lets define the `carouselExampleItem` directive. ``` javascript app.directive( "carouselExampleItem", function($rootScope, $swipe){ return function(scope, element, attrs){ var startX = null; var startY = null; var endAction = "cancel"; var carouselId = element.parent().parent().attr("id"); var translateAndRotate = function(x, y, z, deg){ element[0].style["-webkit-transform"] = "translate3d("+x+"px,"+ y +"px," + z + "px) rotate("+ deg +"deg)"; element[0].style["-moz-transform"] = "translate3d("+x+"px," + y +"px," + z + "px) rotate("+ deg +"deg)"; element[0].style["-ms-transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; element[0].style["-o-transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; element[0].style["transform"] = "translate3d("+x+"px," + y + "px," + z + "px) rotate("+ deg +"deg)"; } $swipe.bind(element, { start: function(coords) { startX = coords.x; startY = coords.y; }, cancel: function(e) { translateAndRotate(0, 0, 0, 0); e.stopPropagation(); }, end: function(coords, e) { if (endAction == "prev") { $rootScope.carouselPrev(carouselId); } else if (endAction == "next") { $rootScope.carouselNext(carouselId); } translateAndRotate(0, 0, 0, 0); e.stopPropagation(); }, move: function(coords) { if( startX != null) { var deltaX = coords.x - startX; var deltaXRatio = deltaX / element[0].clientWidth; if (deltaXRatio > 0.3) { endAction = "next"; } else if (deltaXRatio < -0.3){ endAction = "prev"; } translateAndRotate(deltaXRatio * 200, 0, 0, deltaXRatio * 15); } } }); } }); ``` Now swiping items we will see them moving and rotating. When releasing an item if the swipe lenght was at least 3/10 of the item width then carouselPrev/carouselNext are invoked according to swipe direction. ### Toggle Switch
The `switch` directive (not to be confused with `ng-switch`) lets you create a toggle switch control bound to a boolean `ngModel` value. ``` html ```


Utils

### Justified Blocks Mobile screens are small and it's common to have 2 or three buttons justified. To achieve this behaviour you can use the `.justified` class in any parent block of a group of items. This will apply a `table` layout to parent and a `table-cell` layout to its children.
Example: ``` html ``` ### Form helpers Mobile angular Ui provides some markup savers to create form inputs. #### `bs-input` ``` html ``` That translates to ``` html
``` Note that this directive only wraps target element with some html. This lets you apply it to any type of control, even custom one. So for instance you can apply it to `textarea` or `switch` as well. ```html ``` ### Panel Helpers #### `bs-panel` A super simple directive minimizing the markup to use bootstrap panels. ``` html
``` That translates to ``` html

My Panel

```