Angular Pages

Angular-pages is a angular.js directive that lays out pages in rows and columns, and then allow users to transition between the pages, either by swiping or paging.

Let me start by thanking @revolunet for his awesome angular-carousel directive. @revolunet has done an amazing job with it and if you are looking for a carousel tool, definitely check it out. Angular-pages is heavily inspired by and borrowed from angular-carousel.

The navigation in the bottom right corner will show you which direction has more pages. You can click on the arrow to go there, swipe towards the opposition direction on your mobile device, or click-n-drag on your desktop browser.

An Example

Containers, Collections, Pages

Angular-pages is fairly simple to setup. There are three layers to consider: container, collection and page. Container is the top level DIV element that contains multiple collections. A collection is a UL element containing multiple LI elements. Each LI element is a page.

There can be multiple containers in a single HTML document. Each container can have multiple collections. And each collection can have multiple pages.

Collections can contain a list of static pages (see top row of this demo), or it can be dynamic (see middle row). A dynamic collection means each page in the collection is generated by an ng-repeat directive.

Collections can also be laid out in row or column format. By default, if not specified, the format is row. If "col" is specified, then column format is used.

Attributes

zn-pages

zn-pages is the main directive used to specify that this is a angular-pages container. By default the layout is by row. You can specify column layout by using zn-pages="col".

zn-pages-start

You can also indicate the start row and page with zn-pages-start attribute. This attribute is zero (0) based, so the first page is page 0, second page is page 1, etc. If this attribute appears in the div container, then it indicates the starting row/column. If it's part of the UL, then it indicates the starting page.

zn-pages-swipe

This attribute, when placed at the outer div, indicates whether to enable swiping action for this container or not.

znPageManager

znPageManager is an angular service that provides several key functions so you can transition the pages with javascript.

{{ val }}

This is an example page generated by an ng-repeat collection. There are 5 colors on the list, including ['#1abc9c', '#f1c40f', '#d35400', '#2c3e50', '#8e44ad'].

MAIN limitation is that any ng-repeat for now must exist on the same location/page as the zn-pages directive. If it goes into ng-include then it zn-pages won't be able to handle it.

Click on the following button to rotate the colors around. Each click will take the head of the color list and put it at the end of the list. This effectively changes the ng-repeat collection, and triggers angular-pages to update the list as well. However, you most likely won't notice any difference immediately unless you start moving around.

Rotate Color

Credits

AngularJS

Goes without saying.

angular-carousel

Cannot have created angular-pages without having the angular-carousel source code to learn from. It's a tremendous piece of work by @revolunet and you should definitely check it out.

topcoat

All the icons are courtesy of topcoat. Very cool stuff.

Flat UI Colors

All the background colors are from here.

The MIT License

Copyright (c) 2013 Zhen, LLC. http://zhen.io

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.