Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/offsky/ADE

AngularJS Datatype Editors
https://github.com/offsky/ADE

Last synced: 3 months ago
JSON representation

AngularJS Datatype Editors

Awesome Lists containing this project

README

        

## AngularJS Datatype Editors (ADE)

ADE is a bunch of filters and directives for displaying and editing various types of data in an AngularJS App. For example, if you have a unix timestamp that you want to display and make editable, ADE can display a formatted date string and make a popup calendar for editing.

Try our Demo and take a look at the demo examples in our source files.

ADE currently supports the following datatypes:

- Text (short)
- Text (long)
- URL
- Email Address
- Phone number
- Date
- Date + Time
- Year
- Time
- Money
- Decimal
- Integer
- Percent
- Length
- List (pick one)
- List (pick multiple)
- Rating
- Boolean
- Multi select
- Icon

## Dependencies

All ADE datatypes depend on the following packages:

* angular 1.2.13
* jquery 1.11.0

The following packages are needed by their respective ADE datatypes:

* angular-sanitize 1.2.13: email and url
* bootstrap: date, email, icon, list, phone, rich, time, url
* font-awesome: icon directive
* tinymce 4.0.4 (for rich directive only) Use our modified version if you want keyboard commands to work.

The following packages included in ADE were modified to support a variety of use cases. You can use the unmodified packages available in bower, but we have not tested the results yet.

* datejs: date and time
* bootstrap-datepicker: date
* bootstrap-timepicker: time
* ngTagsInput: list and tag

We are working to reduce external dependencies as much as possible.

## Installation

1) Install ADE using bower:

```bash
$ bower install ADE
```

Or Download ZIP.

Take a look at the "dist/build" directory.

2) Add ADE's css and file to your HTML file:

CSS

```html

```

JavaScript

```html

```

3) Inject ADE in your angular project:

```javascript
var app = angular.module('app', ['ADE', 'ngSanitize']);
```

4) Use the directives and filters in your HTML:

```html


```

### Individual datatypes

You can also choose individual ADE datatypes to include in your project. Take a look at the example source files to know which files to include.

The following directives are required by their respective ADE datatypes. These directives are available in the "app/common" directory.

* number: decimal, integer, money and percent
* url: email, phone and url

## Build

You can build the project for your specific use case. For example, you may want to pick several components and have their minifed/uglified result available in dist/build.

1. Install node and grunt on your system
2. Install node modules by running "npm install"
3. Run our build script "scripts/build.sh"

## License

ADE is freely distributable under the terms of the MIT license.