/generator-material-app

Yet another yeoman generator for scaffolding a simple Node.js/Express/MongoDB/Angular.js app using some material design elements.

Primary LanguageJavaScriptMIT LicenseMIT

generator-material-app

Yet another yeoman generator for scaffolding a simple MEAN stack application using some material design elements.

User administration

This project is still under heavy development.

Features

The generator supports group based ACL's and socket.io communication with the server API.

Install

$ npm install generator-material-app

Quick Start

To quickly scaffold an application use the following commands (Answer all questions with hitting the enter key):

$ mkdir app && cd $_
$ yo material-app
$ gulp build
$ npm start

Will generate something like this: User creation Create user dialog

Navigate to http://localhost:9001 to see the generated application where you can administer the users of your application

Add API

This will add a server API and a corresponding client route to manage your cats including test stubs and documentation:

$ yo material-app:api cat
$ yo material-app:apiroute cat
$ gulp build
$ npm start

Generate Documentation

The documentation is by now generated for server side code only:

gulp jsdoc

Run Tests

For running the generated test start the following gulp tasks

gulp unit:server
gulp unit:client

Deploy

For now, run commands:

NODE_ENV=production gulp build
NODE_ENV=production npm start

And manually seed database with NODE_ENV=production npm run seed if you choosed to auth your app. You can't sign into app without any users. You can specify users and seed data in server/config/seed.js.

Environment Variables

  • DATABASE_NAME
  • MONGO_URI || 'mongodb://localhost/' + process.env.DATABASE_NAME
  • MONGO_OPTIONS

ModelDefinition

Modefy factory YourResourceDefinition in your-resource.service.js. For example:

ModelDefinitions({
  name: {type: 'text', required: true},
  info: 'text',
  nested: {
    name: {
      type: 'text',
      desc: 'Nested Name'
    }
  }
})

For detail options.

List of Generators

APIs

PropDefintion

  • PropDef - object without a string property type

    • type - different types of property Some special types have special template html, others will pass into normal input tag <input type="type" />

      • 'select' - use md-select for input
      • 'select/resource' - use md-select for input, but options is a resource of another model

      When we discuss types, let's say

      1. 'select' == 'select/resource' is true
      2. 'select' === 'select/resource' is false

      Notice: name: {type: 'text'} can be short in name: 'text' but type: {type: 'text'} can't

    • desc - name of prop displayed in form, detail and list

      • default is capitalized last name of nested name

    • options - static options for type === 'select'

    • displayKey - key to display in md-select

      • work when type == 'select'
      • default is 'name' when type === 'select/resource'

    • valueKey - key to value in md-select

      • work when type == 'select'
      • default is '_id' when type === 'select/resource'

    • resource

      • only work when type === 'select/resource'

    • params

      • only work when type === 'select/resource'

    • getOptions - async function returns a promise to load options upon md-select is open, resource can be dynamic with this

      • work when type == 'select'

    • displayPriority - when set to 'low', prop in list will auto-hide when

      1. screen width is less than 1200
      2. detail state is open

Below is an example with all options, which can be generated into app with the demo option

var typeMap = {
  User: User,
  ClientModelDoc: ClientModelDoc
};

return ModelDefinitions({
  name: {
    type: 'text',
    format: {
      value: /^[a-zA-Z]{6,18}$/,
      error: 'Should be 6-18 letters.'
    },
    required: true,
    remoteUnique: 'ClientModelDoc'
  },
  repeatName: {
    type: 'text',
    repeatInput: 'name',
    desc: 'Repeat Name',
    displayPriority: 'low'
  },
  wholeName: {
    type: 'text',
    validators: {
      required: true,
      'remote-unique': {
        value: 'ClientModelDoc',
        error: 'Override default error'
      },
      pattern: /^[a-zA-Z0-9]{8,12}$/
    }
  },
  user: {
    type: 'select/resource',
    required: true,
    resource: User
  },
  rootUser: {
    type: 'select/resource',
    resource: User,
    params: {
      role: 'root'
    },
    displayKey: '_id'
  },
  anyType: {
    type: 'select',
    options: ['User', 'ClientModelDoc']
  },
  anyTypeRef: {
    type: 'select',
    getOptions: function(model) {
      var resource = typeMap[model.anyType];
      if (!resource || !resource.query) return $q.when([]);
      return resource.query().$promise;
    },
    displayKey: 'name',
    valueKey: '_id'
  },
  important: 'text',
  notImportant: {
    type: 'text',
    desc: 'Not Important',
    displayPriority: 'low'
  },
  nested: {
    name: 'text',
    repeatName: {
      type: 'text',
      repeatInput: 'nested.name',
      desc: 'Nested Repeat Name',
      displayPriority: 'low'
    },
    firstName: {
      type: 'text',
      desc: 'First Name',
      displayPriority: 'low'
    },
  },
  info: 'text',
  //active: 'boolean'
})

Purpose

This generator is suited for prototyping simple CRUD applications. The generated code is somehow following John Papa's Styleguide for Angular applications. Every generator generates a test stub for easily adding tests to your application. Note that there is not much material design in the layout yet, despite the use of the Angular Material Design components.

Used Technologies

  • Node.js
  • MongoDB
  • Express
  • mongoose
  • socket.io
  • Angular.js
  • ui.router
  • SASS
  • Gulp

Screenshots

User password Set password dialog