项目作者: johannesjo

项目描述 :
Generator for automatic CRUD angular backend for loopback apps and apis
高级语言: JavaScript
项目地址: git://github.com/johannesjo/generator-angular-auto-admin-loopback.git
创建时间: 2016-02-15T21:39:52Z
项目社区:https://github.com/johannesjo/generator-angular-auto-admin-loopback

开源协议:MIT License

下载


generator aaal (angular auto admin loopback)

generator-aaal is a Yeoman generator, which provides you with a angular based crud-interface with is automatically created based on your model definitions. You can drop it in in your existing loopback app, even drop it in your existing angular frontend app.

The interface generator-aaal provides relies heavily on angular schema forms. So if you want to customize your forms, you might want to have a look at their docs.

Edit Screen
Login Screen
Overview Screen

getting started

Check out the pre built example!

manually building a new app

  1. Create loopback app for your api if not done so and create some models

    1. ```
    2. npm install -g strongloop bower yo
    3. slc loopback # choose version 2.x and 'api-server'
    4. slc loopback:model yourFirstModel
    5. ```
  2. Install generators

    1. ```
    2. npm install -g generator-moda generator-aaal
    3. ```
  3. Create basic front-end via generator-moda

    1. ```
    2. cd client
    3. # create .yo-rc.json for the frontend if not present
    4. echo "{}" > .yo-rc.json
    5. yo moda my-admin
    6. ```

    Choose ui-router.js and angular-resource from modules. Everything else is optional.

  4. Cancel gulp and drop in the aaal components

    1. ```
    2. # install bower deps
    3. bower install -S ngtoast angular-schema-form angular-smart-table ui.bootstrap ngstorage angular-schema-form-datepicker angular-schema-form-tinymce bootstrap-css-only
    4. # drop in aaal
    5. yo aaal
    6. ```
  5. Make sure jquery (required for the datepicker) is loaded first by adding the following to your bower.json

    1. ```
    2. "overrides": {
    3. "angular": {
    4. "dependencies": {
    5. "jquery": "*"
    6. }
    7. }
    8. }
    9. ```
  6. Inject frontend files and build css

    1. ```
    2. gulp injectAll && gulp buildStyles
    3. ```
  7. Update your _app.js (client/app/scripts/_app.js) with the aaap-depdency, e.g.:

    1. ```
    2. (function() {
    3. 'use strict';
    4. angular
    5. .module('myAdmin', [
    6. 'ngAnimate',
    7. 'ngAria',
    8. 'ngResource',
    9. 'ui.router',
    10. // insert here or somewhere else
    11. 'aaal'
    12. ]);
    13. })();
    14. ```
  8. Update the path from which static files are serverd in your server/middleware.json

    1. ```
    2. "files": {
    3. "loopback#static": {
    4. "params": "$!../client/app"
    5. }
    6. }
    7. ```
  9. Run the server

    1. ```
    2. # cd to server dir
    3. cd ..
    4. node .
    5. ```
  10. Navigate to http://localhost:3000/index.html#/login log yourself in with one of your loopback users and enjoy.

  11. (optional) add proxy to access api from gulp serve for development.

    1. ```
    2. # cd to frontend
    3. cd client
    4. # install proxy middleware
    5. npm install -D proxy-middleware
    6. #######################################
    7. # add the following to the tasks/dev.js
    8. var proxy = require('proxy-middleware');
    9. var url = require('url');
    10. // ...
    11. gulp.task('browserSync', function() {
    12. var proxyOptions = url.parse('http://localhost:3000/api');
    13. proxyOptions.route = '/api';
    14. browserSync({
    15. server: {
    16. baseDir: config.base,
    17. livereload: true,
    18. middleware: [proxy(proxyOptions)]
    19. }
    20. });
    21. });
    22. #######################################
    23. # run gulp or gulp serve for dev
    24. gulp serve
    25. ```

rebuilding your aaal backend interface after model changes

Simply run:

  1. ```
  2. yo aaal
  3. ```

adding it to your existing angular frontend

  1. Install generator

    1. ```
    2. npm install -g generator-aaal
    3. ```
  2. Cd to your frontend directory and run the generator

    1. ```
    2. yo aaal
    3. ```
  3. Cancel gulp and drop in the aaal components

    1. ```
    2. # install bower deps
    3. bower install -S ngtoast angular-schema-form angular-smart-table ui.bootstrap ngstorage angular-schema-form-datepicker angular-schema-form-tinymce bootstrap-css-only
    4. ```
  4. Inject all the files in your aaal directory and all the bower_components to your index.html.

  5. Update your angular module with the aaap-depdency, e.g.:

    1. ```
    2. (function() {
    3. 'use strict';
    4. angular
    5. .module('myAdmin', [
    6. 'ngAnimate',
    7. 'ngAria',
    8. 'ngResource',
    9. 'ui.router',
    10. // insert here or somewhere else
    11. 'aaal'
    12. ]);
    13. })();
    14. ```
  6. Have fun!

customizing your forms via form schema definition

It’s best to check out the the examples of angular schema forms for this. This can be easily added to the controller definition of the [your-model]-edit-ctrl.js.

customizing your forms via model definitions

Out of the box generator-aaal supports to declare additional formats for your model properties, you can provide via the format sub-property. Some example:

  1. // common/models/another-model.json
  2. {
  3. "name": "AnotherModel",
  4. "base": "PersistedModel",
  5. "properties": {
  6. "title": {
  7. "type": "string"
  8. },
  9. "description": {
  10. "type": "string",
  11. "format": "html" // ==> will be edited in a tinymce editor instance
  12. },
  13. "someDate": {
  14. "type": "date" // ==> will be automatically converted to a date input
  15. }
  16. }