SHARE

Materialized Crud Generator in Mean Stack Free Download

CRUDX – Materialized MEAN Stack CRUD Generator

Requirements

Install the following 2 softwares

  • 1.Node (Server)
  • 2.MongoDB (Database)

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.

HighLights

  • Image upload in local file system and view in Materialize Box
  • ng-messages with Materialized angular input controls
  • Parent-Child relation ship dropdown
  • Save form data with image
  • Select2 and PickaDate with materialize css modification
  • Socket.IO with live data broadcasting

Prerequisites

  • 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

Usage

 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       });   }); 

Testing

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.

Features

  • 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
  • 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

 
   View Demo     Download

NO COMMENTS

LEAVE A REPLY