angular-modernui

Modern UI module for AngularJS

Added by: Sam Deering

GitHub

Repository

pcx360/angular-modernui

Stats

Stars: 1

Watchers: 1

Forks: 0

Author

Pcx360
Pcx360

Module Description

angular-modernui

License Bower

angular-modernui is an AngularJS user interface module written in TypeScript.

Requirements: AngularJS 1.3+

Installation

The module is not yet available through traditional package managers such as Bower, meaning the commands below will not work. Packages will start appearing once the library reaches a stable state.

Bower

bower install angular-modernui --save

Then add a reference to angular-modernui.min.js and angular-modernui.min.css.

TypeScript Definition Manager

tsd install angular-modernui --save

Then add a reference to angular-modernui/angular-modernui.d.ts.

Usage

Configuration

Reference the ngModernUI module and configure it. The following providers let you change the module's behavior:

  • $navigationProvider: extends AngularUI's state-based router
angular.module('myModule', ['ngModernUI'])
  .config(['$navigationProvider', function($navigationProvider) {
    $navigationProvider
      .html5Mode(true)
      .state('home', {
        url: '/',
        templateUrl: 'views/home.html'
        controller: 'HomeCtrl'
      })
    ;
  }])
;

Routing and States

TODO

Directives

TODO

Application

TODO

Container

TODO

Section

TODO

Group

TODO

Tile

A tile is one of the most basic elements in the ModernUI system. It can be configured in a number of different ways, depending on the application's needs.

<mui-tile x="5" y="7" width="4" height="2" href="#/path" loading="{{isReady}}">
</mui-tile>

By default, a tile doesn't offer much apart from a simple rectangular shape. The following attributes are available:

  • x: the horizontal position (tile units); defaults to 0
  • y: the vertical position (tile units); defaults to 0
  • width: the width (tile units); defaults to 1
  • height: the height (tile units); defaults to 1
  • size: short-hand notation to specify both the width and height (tile units)
  • href: URL the tile links to
  • loading: set to true while waiting for data to load (defaults to false)
Background

TODO

Label

TODO

Content

TODO

Controls

TODO

Text Input

TODO

File Input

TODO

Date/Time Input

TODO

Contribute

In order to work on this project, you need to first install its dependencies using npm, Bower and tsd.

npm install
bower install
tsd link

Once all the dependencies are installed, Grunt can be used to automatically build the project whenever files change.

grunt livereload

Linking

In order to test the module directly, it is possible to link to it from another project.

cd angular-modernui
bower link
cd ../other-project
bower link angular-modernui

Packaging

Grunt can be used to generate the JavaScript and CSS files used for distribution. They are created in the dist folder.

grunt

Module stats last updated: 2015-05-27 01:21:06

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!