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
CSV and JSON export data
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
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
Share This Product
