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

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