node package manager

angularjs-groovy

Create a templated application from scratch in two minutes

To address issues or request additional functionality, please use the issues tab associated with this repo. Build includes ngRoute and ngTouch modules for AngularJS. If you choose to scaffold an application that is not for web, you will be prompted to install phonegap.

To use this framework to create a boilerplate application project, please install via NPM:

npm install [-g] angularjs-groovy

To use this framework as a runtime JS API, please install the Bower component:

bower install angularjs-groovy --save-dev

For CLI use:

groovy [app name] [desired location]

Follow the prompts. Your settings can then be found in the js file settings.js. Examples use the boilerplate.

Projects are built in the desired location with both Grunt and Gulp build scripts. To watch:

grunt
gulp

To build:

grunt build
gulp build

For Runtime Use:

Include a Groovy Settings Object:

<script type='text/javascript'>
    groovy = {
        forWeb: false,
        useLogin: false,
        header: {
            title: 'Groovy',
            color: 'Emerald Cove'
        },
        masterDetail: {
            iconUrl: 'images/appbar.nyan.svg'
        }
    };
</script>

More details on each option are included below.

Include these files in the head of your HTML:

<script type='text/javascript'
        src='bower_components/angularjs/angular.js'>
</script>
<script type='text/javascript'
        src='bower_components/angularjs-groovy/dist/angularjs-groovy.js'>
</script>

Or wherever your Bower components install.

Include an element where you wish your application elements to register:

<ng-view></ng-view>

Create a module with angularjs-groovy as a dependency:

angular.module('groovyApp', [
    'angularjs-groovy'
]);

inside of your own JavaScript. Doing the above will create a templated master-detail application.

Next you may choose to add one or many application views:

<div ng-controller='yourCtrl'
     ng-groovy-view
     ng-groovy-view-name='settings'
     ng-groovy-view-icon-url='iconUrl'
     ng-groovy-view-options='{ prependHTML: true }'>
    HTML
</div>

Available View Types:

  • ngGroovyView
  • ngGroovyListView
  • ngGroovySettingsView
  • ngGroovyGridView

Check the examples to determine how these views appear. They can also be nested inside other views as directives.

An attribute representing options on the view is also available (similar to ngModelOptions) with the following options:

  • prependHTML: Whether view html for non-base view types should be prepended (appends by default)

Groovy Options:

Key Type Definition Default
appName / n string Adds your application name to the title of the page undefined
forWeb / fW boolean Is this application intended to be used for the web or as a native application? true
useLogin / uL boolean Instantiates a view for login, controlled by user reference false
useStyle boolean Use bootstrap/drunken pirate/groovy css true
header / h object undefined
header.title string Application header content undefined
header.color string Options: 'Lagoon, Strawberry, Banana, Bruise, Emerald Cove, Nassau Sunset' undefined
header.templateUrl string An html file to use en lieu of the default API header template undefined
type string Options: masterDetail (mD), tabbed (t), pageBased (pB), singleView (sV) 'sV'
masterDetail / mD object undefined
masterDetail.iconUrl string An image file to use en lieu of the default API master detail icon undefined
masterDetail.templateUrl string An html file to use en lieu of the default API master detail template undefined
tabbed / t object undefined
tabbed.templateUrl string An html file to use en lieu of the default API page based template undefined
pageBased / pB object undefined
pageBased.templateUrl string An html file to use en lieu of the default API page based template undefined
color / c string Options: 'Lagoon, Strawberry, Banana, Bruise, Emerald Cove, Nassau Sunset' undefined
debug boolean Enables AngularJS debug statements for Groovy false