AngularJS CRUD Table Directive Free Download

CRUD Table

  • CRUD-Table directive
  • Website authentication

Helpful AngularJS application with a directive to interact easily with the most common tasks of database (Create, Read, Update, Delete, Filter, Sort, Export) with just a single line of code utilizing the power of AngularJs Directives, Filters, Factory, Resources.

   <crud-table api="API NAME" cols='[{"name":"text"},{"info":"text"}]'></crud-table> 

Getting Started


Install the following softwares in your server

  • >= v0.12.0
  • [MongoDB]( – Keep a running daemon with mongod

Developing (Only need to run once)

  • Run npm install -g bower grunt-cli yo to install required libraries.
  • Run npm install to install server dependencies.
  • Run bower install to install front-end dependencies.
  • Run mongod in a separate shell to keep an instance of the MongoDB Daemon running

Build & Preview

  • Run grunt serve to start the development server. It should automatically open the client in your browser when ready.

Additional Parameters (Properties)

  - api : The AngularJS resource      Ex: api = 'Customers'  – cols : List of columns to be displayed      Ex:  cols = "[{'name':'text'},{'active':'boolean'}]"  – noadd : CRUD Table with no add button      Ex:   noadd="true"  – noedit : CRUD Table with no edit button      Ex:   noedit="true"  – nodelete : CRUD Table with no delete button      Ex:   nodelete="true"  – noexport : CRUD Table without export option      Ex:   noexport="true"  – nofilter : CRUD Table without the filter      Ex:   nofilter="true"  – nocolumns : CRUD Table without hide columns menu      Ex:   nocolumns="true"  – title : Optionally a table title can be specified      Ex:   title="A list of all customers" 

Creating your own CRUD-Table

Generate a new ReST API

   yo angular-fullstack:endpoint hostel 

The above command creates entry at

  • server/config/socketio.js
  • server/config/routes.js

Create a new route / page

   yo angular-fullstack:route hostels 

Create a new resource (data)

Open client/app/factory/factory.service.js At the end, add

   .factory('Hostels', ['$resource', function($resource) {     return $resource('/api/hostels/:id', null, { 'update': { method:'PUT' } });   }]); 

Embed the table into a html page

   <crud-table api='Hostels' cols='[{"name":"text"},{"info":"text"},{"active":"boolean"}]' noedit="true"></crud-table> 


  • Select
  • Create
  • Update / Edit
  • Delete
  • Search / Filter / Sort
  • Export
  • Show / Hide Columns
  • Delete confirmation with modal
  • Column Filters
  • View change from table to grid
  • Infinite scrolling
  • Loading indicators
  • Realtime updates – Any changes to database is updated in Realtime
  • Smooth Animations
  • Count total number of records returned
  • Token expire time
  • Cookie store
  • Session management
  • Login
  • Signup
  • Change Password
  • Password encryption with SHA1
  • Automatic minification, compression, CDNify during deployment
  • Live reaload while development
  • User roles
  • Auto selection of resources for development and production
  • API with role based authentication
  • SEO optimized title for each page
  • Responsive front end to fit any screen
  • Modular code structure for faster development
  • Partial pages for changing themes on fly
  • Each module is placed inside its own directory for easy management
  • Out of the box directives: onlyNumbers, animateOnChange, passwordMatch, ngConfirmClick, errSrc, datetimepicker, datepicker, modalWindow
  • Out of the box filters: unique, labelCase, camelCase, reverse, active, status
  • Animations: ng-repeat, ng-if, ng-show
  • Nested routing mechanism using ui-router
  • Separate configuration envirnoment for development and production
  • Quick start video guide
  • Message for post confirmation/error
  • Modal system – so that user won’t have to leave the page for updation

This will fire up the application and will open up your browser with the application at the URL http://localhost:9000

   View Demo     Download