flaviogranero/ng-tasty

A tasty collection of reusable UI components for Angular, like grandma used to make. Like Table directive, WebSocket / Debounce / Throttle service, Range / Camelize / Slugify filters

#ngTasty

A lightweight, flexible, and tasty collection of reusable UI components for AngularJS, like grandma used to make.

Live demo visit http://zizzamia.com/ng-tasty/

Quick start

Installing via Bower

bower install ng-tasty

or installing via NPM

npm install ng-tasty

Include the required bower component:

<script src="bower_components/ng-tasty/ng-tasty-tpls.min.js"></script>

Inject the ngTasty module into your app:

angular.module('myApp', ['ngTasty']);

Development

For running the dev environment you just need install all the dependencies by npm, the node package manager.

npm install -g gulp
npm install -g protractor
webdriver-manager update
npm install
bower install

Run dev environment, it's a watch script with several task running like jshint, html2js, build and unit test on the js build files.

gulp build
gulp watch

Run demo app

We have pre-configured the demo with a simple development web server.
The simplest way to start this server is:

gulp build
npm start
// Running on http://localhost:3000/

Unit Tests

The easiest way to run the unit tests is to use the supplied gulp script:

gulp test

Docs

The main docs you will find at http://zizzamia.com/ng-tasty/ , here the list of all components, service, filters supported.

Component

• Table : http://zizzamia.com/ng-tasty/directive/table
• Table server side : http://zizzamia.com/ng-tasty/directive/table-server-side

Service

• WebSocket : http://zizzamia.com/ng-tasty/service/websocket
• Debounce : http://zizzamia.com/ng-tasty/service/debounce
• Throttle : http://zizzamia.com/ng-tasty/service/throttle

Filter

• Filter Int : http://zizzamia.com/ng-tasty/filter/filter-int
• Range : http://zizzamia.com/ng-tasty/filter/
• Camelize : http://zizzamia.com/ng-tasty/filter/camelize
• Slugify : http://zizzamia.com/ng-tasty/filter/slugify

Benchpress

Benchpress allows creation and sampling of macro benchmarks to compare performance of real world web applications.

npm install -g benchpress

Run ngTasty benchmark

protractor benchmarks/protractor.conf.js --specs benchmarks/dist/benchmark.spec.js

Open benchmark with Chrome

http-server -p 8000
http://localhost:8000/benchmarks/dist/

Latest Benchmark v0.5.2

ngtasty.table.reference

          gcAmount |   gcAmountInScript |             render |             script
------------------ | ------------------ | ------------------ | ------------------
            621.10 |             194.23 |              11.14 |               9.83

ngtasty.table.collection

          gcAmount |   gcAmountInScript |             render |             script
------------------ | ------------------ | ------------------ | ------------------
            766.28 |               0.00 |              11.06 |              11.17

ngtasty.table.equality

          gcAmount |   gcAmountInScript |             render |             script
------------------ | ------------------ | ------------------ | ------------------
          29557.73 |           41947.09 |              10.86 |             110.40

More about how I run this benchmark on my talk #ngTasty Building high performance measurable directives at ngconf

Changelog

https://github.com/Zizzamia/ng-tasty/CHANGELOG.md

Creator

Designed and built by Leonardo Zizzamia, like grandma used to make.

• http://twitter.com/zizzamia
• http://github.com/zizzamia

Tasty Contributors: @proudlygeek, @wesww, @aganglada, @alexcasalboni, @bogdan-alexandrescu, @yagoferrer