Materialized Crud Generator in Mean Stack

Materialized Crud Generator in Mean Stack

CRUDX – Materialized MEAN Stack CRUD Generator Requirements
Install the following 2 softwares

Live Demo – Hosted on Heroku

Note : Due to heroku doesn’t store images in local after certain amount of time, images may get deleted. We should save images to S3 or something which is better for storage.



  • Node.js and NPM >= v0.12.0
  • MongoDB – configure mongoDB as a service or run mongod

Technology Stack Used

  • MongoDB 3.2
  • Express 4.9
  • AngularJS 1.4.9
  • Node.JS 4.2.3

Install Run the following commands and the application will start automatically

npm install yo -g (Install yeoman for scaffolding web application)
npm install grunt-cli -g (This creates and runs javascript repetative tasks) 
npm install bower -g ( A frontend package manager for web applications) 
npm install (Install all nodejs dependencies, also automatically installs bower components)

Buid and Run

grunt serve [for running in dev environment with livereload] 
grunt serve:dist [Buid and run in production mode] 
grunt --force [buid with Administrator rights]

Note : If any of the test failed or any error in running application, please install npm and bower with latest verion and in Administrator mode in command prompt


 npm install -g generator-angular-fullstack 

Create ES5 based ReST API

 yo angular-fullstack:endpoint brand [DESIRED_TABLE_NAME] 
 yo angular-fullstack:route brand [DESIRED_HTML_PAGES_NAME] 
 yo angular-fullstack:controller brand 
 yo angular-fullstack:directive [Custom Directive] 
 yo angular-fullstack:filter [Custom Filter Name]
 yo angular-fullstack:factory [Custom Factory Name] 

declare directive on HTML Page for listing data

 crud-grid name="brand" api="API NAME i.e Brand in this case" required-cols="requiredCols" cols-width="colsWidth" schema = "schema" data ="brands" cols="displayCols" /crud-grid 

In controller set columns text type and visibility

 $scope.displayCols = [{ 'name': 'text' }, { 'description': 'text' }, { 'parent': 'id' }, { 'image': 'image' }, { 'active': 'boolean' }]; $scope.requiredCols = ['name']; $scope.colsWidth = [{ 'name': '20%' }, { 'description': '30%' }, { 'parent': '20%' }, { 'image': '10%' }, { 'active': '10%' }];

Set colums in brand.modal.js in server/api/brand

 var brandModel = mongoose.model('Brand', BrandSchema) brandModel.displayColumns = 'name|30%, description|20%, Website|15% ,LogoUrl|15%,active|10%'; brandModel.exportColumns = 'name,description,website,logourl,active'; brandModel.requiredColumns = 'name';

set Authenticate true on route

.config(function ($stateProvider) { $stateProvider .state('brand', { url: '/brand', templateUrl: 'app/brand/brand.html', controller: 'BrandCtrl', authenticate: true }); });

Running `grunt test` will run the client and server unit tests with karma and mocha. Use `grunt test:server` to only run server tests. Use `grunt test:client` to only run client tests.
Protractor tests
To setup protractor e2e tests, you must first run `npm run update-webdriver` Use `grunt test:e2e` to have protractor go through tests located in the `e2e` folder.

  • Mobile resposinve home page with login, signup, category crud pages
  • Real time sync data from any client
  • Authentication with role
  • create entity from provided models and settings from controller
  • listing, searching, edit,paging
  • Search / Filter / Sort
  • Delete confirmation with modal with Angular Modal service
  • Upload image for each item with form data
  • View image in materialize box
  • Realtime updates – Any changes to database is updated in Realtime
  • Export to CSV and JSON
  • Token expire time
  • 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 using keystone.utils for slugify
  • 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
  • Message for post confirmation/error
  • Modal system – so that user won’t have to leave the page for updation

More items by dcoderx

Real Time Patient Appointment Manager in AngularJS NodeJS Mysql Stack Events Calender using Angularjs with Nodejs and MySQL Mean Stack - Full Calender for events using Angularjs with Nodejs and MongoDB Materialized Crud Generator in Mean Stack