npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-aaal

v0.0.10

Published

An crud interface generator for loopback and angular.

Downloads

4

Readme

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.

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

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

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

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

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

  1. Cancel gulp and drop in the aaal components

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

     ```
       "overrides": {
         "angular": {
           "dependencies": {
             "jquery": "*"
           }
         }
       }
     ```
  3. Inject frontend files and build css

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

     ```
     (function() {
         'use strict';
        
         angular
             .module('myAdmin', [
                 'ngAnimate',
                 'ngAria',
                 'ngResource',
                 'ui.router',
                 // insert here or somewhere else
                 'aaal'
       ]);
     })();  
     ```
  5. Update the path from which static files are serverd in your server/middleware.json

     ```
      "files": {
         "loopback#static": {
           "params": "$!../client/app"
         }
       }
     ```
  6. Run the server

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

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

    ```
    # cd to frontend
    cd client
    # install proxy middleware
    npm install -D proxy-middleware
        
    #######################################
    # add the following to the tasks/dev.js
    var proxy = require('proxy-middleware');
    var url = require('url');
    // ...
    gulp.task('browserSync', function() {
        var proxyOptions = url.parse('http://localhost:3000/api');
        proxyOptions.route = '/api';
        
        browserSync({
            server: {
                baseDir: config.base,
                livereload: true,
                middleware: [proxy(proxyOptions)]
            }
        });
    });
    #######################################
        
    # run gulp or gulp serve for dev
    gulp serve
    ```

rebuilding your aaal backend interface after model changes

Simply run:
yo aaal

adding it to your existing angular frontend

  1. Install generator

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

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

     ```
     # install bower deps
     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. 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.:

     ```
     (function() {
         'use strict';
        
         angular
             .module('myAdmin', [
                 'ngAnimate',
                 'ngAria',
                 'ngResource',
                 'ui.router',
                 // insert here or somewhere else
                 'aaal'
       ]);
     })();  
     ```
  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:

// common/models/another-model.json
{
  "name": "AnotherModel",
  "base": "PersistedModel",
  "properties": {
    "title": {
      "type": "string"
    },
    "description": {
      "type": "string",
      "format": "html" // ==> will be edited in a tinymce editor instance
    },
    "someDate": {
      "type": "date" // ==> will be automatically converted to a date input
    }
}