AngularJS CRUD Table Directive (Forms)

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

1. Getting Started

1. Prerequisites

– Node.js and NPM >= v0.12.0
– Bower (`npm install—global bower`)
– (`npm install –global grunt-cli`”>Grunt
– [MongoDB](https://www.mongodb.org/) – Keep a running daemon with `mongod`

1. Developing (Only need to run once)

1. Run npm `install -g bower grunt-cli yo` to install required libraries.

2. Run `npm install` to install server dependencies.

3. Run `bower install` to install front-end dependencies.

4. Run `mongod` in a separate shell to keep an instance of the MongoDB Daemon running

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

1. Build & Preview

Run `grunt serve` for preview of the awesome app.

1. Further development
   1. 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’ } });
}])

1. Example

   <crud-table api=’Hostels’ cols=’[{name“}]’ noedit=”true”></crud-table>

1. Features
   1. Select
   2. Create
   3. Update
   4. Delete
   5. Search / Filter
   6. Export
   7. Show / Hide Columns
   8. Multi delete
   9. Column Filter
   10. View change from table to grid
   11. Infinite scrolling
   12. Loading indicators
   13. Realtime updates – Any changes to database is updated in Realtime
   14. Smooth Animations

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

Download AngularJS CRUD Table Directive (Forms)