topadslot

Materialized Crud Generator in Mean Stack



 Materialized Crud Generator in Mean Stack


CRUDX – Materialized MEAN Stack CRUD Generator Requirements

Install the following 2 softwares

  • 1.Node http://nodejs.org/ (Server)
  • 2.MongoDB https://www.mongodb.org/ (Database)

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.HighLights
  • Materialize CSS framework
  • Angular Materilized Controls
  • Materialize Box image preview
  • material-design-icons
  • Common Utils from keystone
  • 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 Rungrunt 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
  • 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


Similar Items

json-slider-carousel--timeline--responsive-jquery-plugin-sliders
flekialert-fully-customizable-alert-navigation
yoga-map--google-map-cusomizer-media
zoomtimeline--ultimate-timeline-pack-javascript
first-person-perspective--jaguar-game-engine-addon-miscellaneous
database-crud-generator--material-designed-database-abstractions
mega-menu-responsive--bootstrap-navigation
animated-audio-player-with-playlist-media


  Item Information
JavaScript
07.02.2016
12.02.2016
93

Buy now for only $12 Preview & Demo
  Share Theme
  Advertisement
InterServer Web Hosting and VPS InterServer Web Hosting and VPS InterServer Web Hosting and VPS
bottomadslot
Web Statistics