Showing posts with label angular tubular. Show all posts
Showing posts with label angular tubular. Show all posts
angular tubular

angular tubular

May 17, 2017

A set of AngularJS directives designed to rapidly build modern web applications - http://unosquare.github.io/tubular/

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.
Developing with .NET as backend? check Tubular DotNet project. If you are looking for Angular2 support, check Tubular2 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:

Mandatory


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/bootstrap/latest/css/bootstrap.min.css" />  
 <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css" />  
 <script src="//cdn.jsdelivr.net/g/angularjs@1.6.0(angular.min.js+angular-animate.min.js+angular-route.min.js),angular.bootstrap@2.5.0(ui-bootstrap.min.js+ui-bootstrap-tpls.min.js),momentjs@2.17.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/tubular/latest/tubular-bundle.min.css" />  
 <script src="//cdn.jsdelivr.net/tubular/latest/tubular-bundle.min.js"></script>  
Finally update your modules to include Tubular, for example if your module is called app, then you will need to add Tubular as a dependency as follows:
 angular.module('app', ['tubular']);  

NuGet Installation


 PM> Install-Package Tubular  

Bower Installation


 # install Tubular package and add it to bower.json  
 $ bower install tubular --save  

npm Installation


The npm package only contains the Tubular Template Generator Module, if you want to use all of Tubular's features, please install the Bower package instead.
 # install Tubular package and add it to package.json  
 $ npm install tubular --save  

Charts


An experimental support to chart is running with Tubular and you can choose between ChartJS or Highcharts. If you want to use any of them, be sure to load the library before Tubular and check Tubular OWIN Sample with easy to understand code on how to start using charts.

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>  

Boilerplate


We have 3 boilerplates ready to seed your project:
Note: Special thanks to Unosquare Labs

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer