generator-kbc-ui-app

Keboola Connection UI App Generator

Based on generator-angular

Scaffolds new angular based application ready for deploy into Keboola Connection.

Usage

Install generator-kbc-ui-app:

npm install -g yo generator-kbc-ui-app

Make a new directory, and cd into it:

mkdir my-new-project && cd $_

Run yo kbc-ui-app

Naming conventions

Please follow these:

• Github repository name - keboola/kbc-ui-your-app
• Application module name - kbc.yourApp (You will be asked for this name by generator)

Generators

Available generators:

• kbc-ui-app (aka kbc-ui-app:app)
• kbc-ui-app:controller
• kbc-ui-app:directive
• kbc-ui-app:filter
• kbc-ui-app:route
• kbc-ui-app:service
• kbc-ui-app:provider
• kbc-ui-app:factory
• kbc-ui-app:value
• kbc-ui-app:constant
• [kbc-ui-app:decorator] (#decorator)
• kbc-ui-app:view
• kbc-ui-app:keys

Note: Generators are to be run from the root directory of your app.

App

Sets up a new AngularJS app, generating all the boilerplate you need to get started. The app generator also optionally installs AngularJS modules, such as angular-resource.

Example:

yo angular

Route

Generates a controller and view, and configures a route in app/scripts/app.js connecting them.

Example:

yo angular:route myroute

Produces app/scripts/controllers/myroute.js:

angular.module('myMod').controller('MyrouteCtrl', function ($scope) {
  // ...
});

Produces app/views/myroute.html:

<p>This is the myroute view</p>

Controller

Generates a controller in app/scripts/controllers.

Example:

yo angular:controller user

Produces app/scripts/controllers/user.js:

angular.module('myMod').controller('UserCtrl', function ($scope) {
  // ...
});

Directive

Generates a directive in app/scripts/directives.

Example:

yo angular:directive myDirective

Produces app/scripts/directives/myDirective.js:

angular.module('myMod').directive('myDirective', function () {
  return {
    template: '<div></div>',
    restrict: 'E',
    link: function postLink(scope, element, attrs) {
      element.text('this is the myDirective directive');
    }
  };
});

Filter

Generates a filter in app/scripts/filters.

Example:

yo angular:filter myFilter

Produces app/scripts/filters/myFilter.js:

angular.module('myMod').filter('myFilter', function () {
  return function (input) {
    return 'myFilter filter:' + input;
  };
});

View

Generates an HTML view file in app/views.

Example:

yo angular:view user

Produces app/views/user.html:

<p>This is the user view</p>

Service

Generates an AngularJS service.

Example:

yo angular:service myService

Produces app/scripts/services/myService.js:

angular.module('myMod').service('myService', function () {
  // ...
});

You can also do yo angular:factory, yo angular:provider, yo angular:value, and yo angular:constant for other types of services.

Decorator

Generates an AngularJS service decorator.

Example:

yo angular:decorator serviceName

Produces app/scripts/decorators/serviceNameDecorator.js:

angular.module('myMod').config(function ($provide) {
    $provide.decorator('serviceName', function ($delegate) {
      // ...
      return $delegate;
    });
  });

AWS Keys

To be able to deploy application to AWS S3 you have to provide AWS access keys.

Example:

yo kbc-ui-app:keys

Produces: aws-keys.json which is read by grunt:

{
   "AWSAccessKeyId": "your_id",
   "AWSSecretKey": "your_secret"
}

Bower Components

The following packages are always installed by the app generator:

• angular
• angular-mocks
• angular-scenario
• angular-kb

The following additional modules are available as components on bower, and installable via bower install:

• angular-cookies
• angular-loader
• angular-resource
• angular-sanitize
• angular-route

All of these can be updated with bower update as new versions of AngularJS are released.

Configuration

Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately.