tubular

A set of AngularJS directives designed to rapidly build modern web applications

Showing:

Popularity

Downloads/wk

1

GitHub Stars

44

Maintenance

Last Commit

2yrs ago

Contributors

21

Package

Dependencies

7

Size (min+gzip)

20.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Analytics Build Status Build status Coverage Status

Tubular

Important - This repository has been archived. We are not longer maintaining this project. Please check Tubular for Angular.io or React.

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 to learn how quickly you can start coding. See 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:

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.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css" />

<script src="//cdn.jsdelivr.net/npm/angular@1.6.4/angular.js"></script>
<script src="//cdn.jsdelivr.net/npm/angular-route@1.6.4/angular-route.js"></script>
<script src="//cdn.jsdelivr.net/npm/angular-animate@1.6.4/angular-animate.js"></script>
<script src="//cdn.jsdelivr.net/combine/npm/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap.min.js,npm/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap-tpls.min.js,npm/moment@2.18.1"></script>

Then you will need to either grab your own copy of Tubular or you use jsDelivr to reference Tubular CSS and JS files.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/tubular@latest/dist/tubular-bundle.min.css" />
<script src="//cdn.jsdelivr.net/npm/tubular@1.8.1"></script>

Finally include Tubular to your module as follows:

angular.module('app', ['tubular']);

npm Installation npm version

# 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.

 <div class="container">
        <tb-grid server-url="/data/customers.json" page-size="20" 
                 class="row" grid-name="mygrid">
            <div class="col-md-12">
                <div class="panel panel-default panel-rounded">
                    <tb-grid-table class="table-bordered">
                        <tb-column-definitions>
                            <tb-column name="CustomerName">
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                            <tb-column name="Invoices">
                                <tb-column-header>
                                    <span>{{label}}</span>
                                </tb-column-header>
                            </tb-column>
                        </tb-column-definitions>
                        <tb-row-set>
                            <tb-row-template ng-repeat="row in $component.rows" 
                                             row-model="row">
                                <tb-cell-template>
                                    {{row.CustomerName}}
                                </tb-cell-template>
                                <tb-cell-template>
                                    {{row.Invoices}}
                                </tb-cell-template>
                            </tb-row-template>
                        </tb-row-set>
                    </tb-grid-table>
                </div>
            </div>
        </tb-grid>
    </div>

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 
NameTypeLanguage/techDescription
Tubular for AngularJS (formerly Tubular)LibraryAngularJsTubular provides a set of directives and services using AngularJS as framework.
Tubular for Angular6 (formerly Tubular2)LibraryAngular6New Tubular2 with Angular6 (Angular2) and Angular Material 2.
Tubular ReactLibraryReactTubular-React is a DataGrid component using Material-UI
Tubular CommonLibraryJavascript/TypescriptTubular Common provides TypeScript and Javascript models and data transformer to use any Tubular DataGrid component with an array of Javascript objects.
Tubular DotnetBackend libraryC#/.NET CoreTubular 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 NodejsBackend LibraryJavascriptTubular Node.js provides an easy way to integrate Tubular Angular Components easily with any Node.js WebApi library.
Tubular Boilerplate C#BoilerplateC#Tubular Directives Boilerplate (includes AngularJS and Bootstrap)
Tubular BoilerplateBoilerplateJavascript/AngularJSTubular Directives Boilerplate (includes AngularJS and Bootstrap).
Tubular ASP.NET Core 2.0 BoilerplateBoilerplateC#/.NET CoreTubular Directives Boilerplate (includes AngularJS and Bootstrap).

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial