[](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)
:star: *Please star this project if you find it useful!*
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.
Developing with .NET as backend? check [Tubular DotNet](https://github.com/unosquare/tubular-dotnet) project.
Developing with Node.js as backend? check [Tubular Node.js](https://github.com/unosquare/tubular-nodejs) project.
If you are looking for Angular2 components, check [Tubular2](https://github.com/unosquare/tubular2) beta project.
Please visit the Tubular GitHub Page to learn how quickly you can start coding. Don't forget to check out the Tubular Generator which quickly turns models into an awesome UIs!
## 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']);
```
## Bower Installation [](http://badge.fury.io/bo/tubular)
# install Tubular package and add it to bower.json
$ bower install tubular --save
# 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
```
### 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
```
## Boilerplate
We have 3 boilerplates ready to seed your project:
* Simple Boilerplate without server-side.
* [ASP.NET 4.6 Boilerplate](https://github.com/unosquare/tubular-boilerplate-csharp).
* [ASP.NET Core Boilerplate](https://github.com/unosquare/tubular-aspnet-core-boilerplate)