generator-admin

CRUD Admin Generator

generator-admin is a yeoman generator, which allows you to automatically generate basic CRUD functionality based on config. This generator is based on previous AngularJS project experience of best practice.

Featues:

• Provides a directory structure geared towards large Angular projects.

  • All of model is categorized by module, and each module will be injected into the app module.
  • Provides basic admin functionality: authention, authorization. Besides, including many common widgets, service.

• Provides grunt build process for code online's distribution

• Can generate model based on existing project

• Can generate chart just like model on existing project

Demo

https://github.com/pingyuanChen/generator-admin-example

Getting Started

Install Yeoman

$ npm install -g yo

Install 'generator-admin'

$ npm install -g generator-admin

Make a new directory, and cd into it:

$ mkdir my-new-project
$ cd my-new-project

Next, add a global config file(config.json) to generate the basic framework. Here is an example of what this global config might look like:

{
  "appName": "SampleApp", //project name
  "defaultState": "videos.movie", //jump this default url when log in successfull
  "defaultEnv": "development",
  "releaseBaseUrl": "/admin",
  "releaseDomain": "http://172.16.77.30",
  "developmentBaseUrl": "/admin",
  "developmentDomain": "http://localhost:8008"
}

Then, add config directory(config*.json) for all model config, like config\video.json:

{
  "moduleName": "videos",
  "modelName": "movie",
  "items": [
    {
      "name": "title",
      "alias": "视频名称",
      "display_as": "input",
      "rules": 100
    },
    {
      "name": "source",
      "alias": "视频来源",
      "display_as": "select",
      "display_data": [
        {
          "option": "土豆",
          "value": "土豆"
        },
        {
          "option": "爱奇艺",
          "value": "爱奇艺"
        },
        {
          "option": "搜狐",
          "value": "搜狐"
        },
        {
          "option": "乐视",
          "value": "乐视"
        }
      ]
    },
    {
      "name": "status",
      "alias": "发布状态",
      "display_as": "radio",
      "display_data": [
        {
          "option": "发布",
          "value": "发布"
        },
        {
          "option": "未发布",
          "value": "未发布"
        }
      ]
    },
    {
      "name": "director",
      "alias": "演员",
      "display_as": "input",
      "rules": 100
    },
    {
      "name": "rules",
      "module_name": "other",
      "alias": "规则",
      "display_as": "inline-reference",
      "display_data": "rules"
    },
    {
      "name": "type",
      "alias": "视频类型",
      "display_as": "checkbox",
      "display_data": ["冒险", "爱情", "悬疑"]
    },
    {
      "name": "is_hot",
      "alias": "视频类型",
      "display_as": "single-checkbox",
      "display_data": "是否推荐"
    },
    {
      "name": "categories",
      "module_name": "novels",
      "alias": "分类",
      "display_as": "reference",
      "display_data": "categories"
    },
    {
      "name": "folders",
      "module_name": "other",
      "alias": "文件夹",
      "display_as": "inline-reference",
      "display_data": "folders"
    },
    {
      "name": "preview",
      "alias": "视频预览",
      "display_as": "image",
      "display_data": "xxx.jpg",
      "rules": "200k"
    },
    {
      "name": "release_time",
      "alias": "上映时间",
      "display_as": "datetime",
      "rules": {
        "start": "2013-02-01",
        "end": "2015-02-01"
      }
    }
  ],
  "ordering": ["release_time"],
  "list_filter_type": "cascade-dropdown",
  "list_display": ["title", "source", "status", "type", "director", "release_time"],
  "list_display_link": ["title"],
  "list_editable": ["director"],
  "list_per_page": 10,
  "list_datepicker": "release_time",
  "search_field": ["title"],
  "fieldsets": {
    "基础选项": ["title", "source", "status", "type", "categories", "release_time", "is_hot"],
    "高级选项": ["type", "status"],
    "Rules": ["rules"],
    "Folder": ["folders"]
  },
  "list_actions": ["add", "save"]
}

Run yo admin:

$ yo admin

Using the values found in the config file, the generator will add views, controllers, models, etc to add the CRUD functionality for your application. There are certain blocks of code that need to be injected into existing files (for example, the routes, the module, etc). There are two steps the admin generator can accomplish this:

• If being executed for the first time, it will be generated by its template. It will also leave "markers" that it uses for subsequent generation.

• If being executed again against a site, it will rely on the "markers" to know where to inject code. The markers will look something like this:

    /*add state to here*/
    /*invoke*/
    /*ngDeps*/

This process is a little fragile, and will work incorrectly if the existing code looks differently than what the generator expects. For best results, use the "marker" paradigm, and code will always be injected into the correct place.

When you see "beautifyJS task done", it means the code is generated completely(demo: https://github.com/pingyuanChen/generator-admin-example). The project folder may like this:

   SampleApp/
     SampleApp/client/
     SampleApp/server/

'cd' into SampleApp/client/, and run the following command to install the required dependencies:

$ npm install

'cd' into SampleApp/client/src, and run the following command to install the frontend dependencies:

$ bower install

At end, run the node server to serve the website, 'cd' into SampleApp/server/:

$ node server.js

(^__^) visite http://localhost:8008/#/login

Subgenerator

You can generate model on an existing project. in 'my-new-project/config' directory and add model config file, such as tv-play.json.

Then, cd 'my-new-project' and run:

$ yo admin:model 

You can also generate chart just like model:

$ yo admin:chart

At end, run the node server to serve the website, 'cd' into SampleApp/server/:

$ node server.js

visite http://localhost:8008/#/login

FAQ