UI.Layout directive

This directive allows you to split stuff !
Holy grail demo

Requirements

• AngularJS

Usage

You can get it from Bower

bower install angular-ui-layout\#bower
# or
bower install angular-ui-layout\#v0.0.0
# or
bower install angular-ui-layout\#src0.0.0

This will copy the UI.Layout files into a bower_components folder, along with its dependencies. Load the script files in your application:

<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-layout/ui-layout.css"/>
<!-- ... -->
<script type="text/javascript" src="bower_components/raf/index.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-layout/ui-layout.js"></script>

Add the UI.Layout module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.layout']);

Finally, add the directive to your html:

<div ui-layout="{ flow : 'row' }"></div>
or
<ui-layout options="{ flow : 'row' }"></ui-layout>

Options

flow

Type: String
Default: 'row'
flow: row | column

A fake flex-direction property. It specifies how the child elements are placed in the layout container, by setting the direction of the flex container's main axis. This determines the direction that child elements are laid out in.

Testing

We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g gulp
npm install && bower install
gulp

The karma task will try to open Firefox and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in test\karma-jqlite.conf.js and test\karma-jquery.conf.js

Some test tasks :

• gulp karma : Will run jqlite and jquery tests in simple run mode,
• gulp karma:jqlite:unit : Will run jqlite tests in simple run mode,
• gulp karma:jquery:unit : Will run jquery tests in simple run mode,
• gulp karma:jqlite:watch : Will run jqlite tests and watch for changes,
• gulp karma:jquery:watch : Will run jquery tests and watch for changes,

** gulp serve runs and watches all**