Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unosquare/tubular
A set of AngularJS directives designed to rapidly build modern web applications
https://github.com/unosquare/tubular
angularjs forms grid javascript
Last synced: 3 months ago
JSON representation
A set of AngularJS directives designed to rapidly build modern web applications
- Host: GitHub
- URL: https://github.com/unosquare/tubular
- Owner: unosquare
- License: mit
- Archived: true
- Created: 2015-03-25T19:26:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-09-11T15:13:03.000Z (about 5 years ago)
- Last Synced: 2024-07-17T06:42:48.815Z (4 months ago)
- Topics: angularjs, forms, grid, javascript
- Language: JavaScript
- Homepage: http://unosquare.github.io/tubular-angular/
- Size: 7.62 MB
- Stars: 44
- Watchers: 29
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/igrigorik/ga-beacon)
[](https://travis-ci.org/unosquare/tubular)
[](https://ci.appveyor.com/project/geoperez/tubular)
[](https://coveralls.io/r/unosquare/tubular?branch=master)
Important - This repository has been archived. We are not longer maintaining this project. Please check Tubular for [Angular.io](https://github.com/unosquare/tubular2) or [React](https://github.com/unosquare/tubular-react).
:star: *Please star this project if you find it useful!*
Tubular for AngularJS (formerly Tubular) provides a set of directives and services using AngularJS as framework. The main component is a grid with multiple options:
* **Full markup design**, you don't need to write even a Controller in AngularJS to start using our Grid or Form
* Common functionality like **Sorting, Filtering (specific to the data type), Free-text search, Paging** and more.
* Easy to implement inline editors, page or popup forms totally bound to your grid.
* Basic services like **Print and Export to CSV** in client-side.
* Independent backend platform (.NET and Node.js)
* Compatible with modern browsers (Chrome, Firefox, and Edge). We are not supporting old browsers like Internet Explorer, you may need to include some polyfills.
Please visit the [Tubular GitHub Page](http://unosquare.github.io/tubular) to learn how quickly you can start coding. See [Related projects](#related-projects) below to discover more Tubular libraries and backend solutions.
## Dependencies
You will need to reference the following JS libraries in order to use Tubular in your HTML:
* [AngularJS (optionally Animate and Route)](https://angularjs.org/) - 1.6
* [AngularJS UI Bootstrap](https://angular-ui.github.io/bootstrap/) - 2.5 with the Bootstrap CSS
* [Moment.js](http://momentjs.com/) - 2.17
* [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
## Using a CDN
You can get all the dependencies using the following links in your master HTML page. jsDelivr provides almost everything you need to import.
```html
```
Then you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.
```html
```
Finally include Tubular to your module as follows:
```javascript
angular.module('app', ['tubular']);
```
## npm Installation [](http://badge.fury.io/js/tubular)
# install Tubular package and add it to package.json
$ npm install tubular --save
## Samples
You can check out the Tubular GitHub Page to get a few examples. We still need to work on more samples and better documentation, but we feel what we have now will get you up to speed very quickly :).
The following HTML represents a basic grid. You don't need to add anything else to your controller! Everything you need is to create your markup.
```html
{{label}}
{{label}}
{{row.CustomerName}}
{{row.Invoices}}
```
### Run Sample
There is a sample included in this project, you can run it just by doing the following.
```
// Install all the dependencies
npm install
// Builds the project and generates the bundles
grunt build
// Runs the sample project
npm run serve
```
## Related Projects
Name | Type | Language/tech | Description
-----|------|---------------|--------------
| [Tubular for AngularJS (formerly Tubular)](https://github.com/unosquare/tubular) | Library | AngularJs | Tubular provides a set of directives and services using AngularJS as framework. |
| [Tubular for Angular6 (formerly Tubular2)](https://github.com/unosquare/tubular2) | Library | Angular6 | New Tubular2 with Angular6 (Angular2) and Angular Material 2.
| [Tubular React](https://github.com/unosquare/tubular-react) | Library | React | Tubular-React is a DataGrid component using Material-UI |
| [Tubular Common](https://github.com/unosquare/tubular-common) | Library | Javascript/Typescript | Tubular Common provides TypeScript and Javascript models and data transformer to use any Tubular DataGrid component with an array of Javascript objects. |
| [Tubular Dotnet](https://github.com/unosquare/tubular-dotnet) | Backend library | C#/.NET Core | Tubular provides .NET Framework and .NET Core Library to create REST service to use with Tubular Angular Components easily with any WebApi library (ASP.NET Web API for example). |
| [Tubular Nodejs](https://github.com/unosquare/tubular-nodejs) | Backend Library | Javascript | Tubular Node.js provides an easy way to integrate Tubular Angular Components easily with any Node.js WebApi library. |
| [Tubular Boilerplate C#](https://github.com/unosquare/tubular-boilerplate-csharp) | Boilerplate | C# | Tubular Directives Boilerplate (includes AngularJS and Bootstrap) |
| [Tubular Boilerplate](https://github.com/unosquare/tubular-boilerplate) | Boilerplate | Javascript/AngularJS | Tubular Directives Boilerplate (includes AngularJS and Bootstrap). |
| [Tubular ASP.NET Core 2.0 Boilerplate](https://github.com/unosquare/tubular-aspnet-core-boilerplate) | Boilerplate | C#/.NET Core | Tubular Directives Boilerplate (includes AngularJS and Bootstrap). |